Template Builder

How to use plugin

Solution 1: Build Package (Style Not Effect and Include Store)

Run Command
```
yarn add vue-builder-template
```
Run Command
```
yarn dev
```
or
```
npm run dev
```

Setup nuxt.config.js file (only nuxt.js)

 "plugins": [
     { "src": "~/plugins/<filename>", "ssr": false }
 ]

Import Package to main.ts or main.js file

 import Builder from 'vue-builder-template/src/main'

 Builder // declare create

Use Component

 <div
     id="builder"
     ref="builder"
     data-id="builder"
     :data-prop-template="JSON.stringify(propTemplateJson)"
     @click="onUpdateTemplate"
 />

attribute	value	type	description
id	bilder	`string`	for access element
ref	up to you	`string`	for access result template
data-id	up to you	`string`	for create element (default: builder). Mutiple element should be setup difference name
:data-prop-template (optional)	up to you	`string`	for setup default prop your template json
@click="<YOUR_FUNCTION_NAME>" (optional)	up to you	`function`	for get result on function

Access Result Template

 JSON.parse(this.$refs.<REF_NAME>.dataset.resultTemplate)

Solution 2: Git Repo (Style Effect and Exclude Store)

Add Dependencies in package.json

 "vue-builder-template": "git+ssh://git@bitbucket.org:3dsinteractive/pam-builder.git"

Run Command

yarn add vue-builder-template

npm install vue-builder-template --save

Create .env file ` NODE_ENV=development VUE_APP_TITLE=Builder VUE_APP_ECOM_CMS_API=<Base URL API image storage> VUE_APP_ADMIN_USERNAME=<Username for access to image storage> VUE_APP_ADMIN_PASSWORD=<Password for access to image storage>

[optionnal] VUE_APP_BASE_URL=<Base URL API image storage> VUE_APP_TOKEN_IMAGE_STORAGE=<Token for access to image storage>


4. Import Component in main.ts or main.js
```javascript
    import Components from 'vue-builder-template/src/plugins/Index.ts'

    Vue.use(Components)

Use Component
```
 <BuilderTemplate></BuilderTemplate>
```

How to Build and Publish Package (Self Reminder)

Setup package.json (Change version)
Setup tsconfig.json
Run Command
```
yarn build:ts
```
or
```
npm run build:ts
```
Register NPM
[In Your Project Plugin] npm login and type username, password, email
Run Command (Every publish must be change version in package.json)
```
npm publish
```
remark: [Unpublish version] Run npm unpublish <PACKAGE_NAME>@<VERSION> such as npm unpublish vue-builder-template@0.0.1
remark: [Deprecate version] Run npm deprecate -f <PACKAGE_NAME>@<VERSION> '<REASON>' such as npm deprecate -f vue-builder-template@0.0.1 'Have New Version'
remark: [Add User NPM for Delete Package] Run npm owner add npm <PACKAGE_NAME> such as npm owner add npm vue-builder-template
remark: [Delete Your User of Package] Run npm owner rm <USER> <PACKAGE_NAME> such as npm owner rm username vue-builder-template

Project setup

yarn install

Compiles and hot-reloads for development

yarn dev

Compiles and minifies for production

yarn build

Lints and fixes files

yarn lint

Customize configuration

See Configuration Reference.

Package detail

vue-builder-template

readme