Template Builder

How to use plugin

Build Package (Include Store)

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

Setup Data To Local Storage


 get storageBaseUrl() {
     return <YOUR_STORAGE_BASEURL>
 }

 get storageToken() {
     return <YOUR_PERSONALIZE_TOKEN>
 }

 [Optional]
 get personalizeBaseUrl() {
     return <YOUR_PERSONALIZE_BASEURL>
 }

 get personalizeToken() {
     return <YOUR_PERSONALIZE_TOKEN>
 }

 created() {
     if (process.client) {
         localStorage['storage-baseurl'] = this.storageBaseUrl
         localStorage['storage-token'] = this.storageToken

         [Optional]
         localStorage['personalize-baseurl'] = this.personalizeBaseUrl
         localStorage['personalize-token'] = this.personalizeToken
     }
 }

attribute	value	type	description
storageBaseUrl	up to you	`string`	for get or upload image (ex. [GET] `<BASEURL>/galleries`, [POST] `<BASEURL>/uploader/public`
storageToken	up to you	`string`	for access api get or upload image
personalizeBaseUrl (optional)	up to you	`string`	for get personalize (ex. [GET] `<BASEURL>/customers/attributes`)*
personalizeToken (optional)	up to you	`string`	for access api get personalize

Import Module And Create Instance Vue Component

 [Vue]
 mounted() {
     const builder: any = require('~/node_modules/vue-builder-plugin/src/plugins/Module')
     const store =  builder.default.store
     const router = builder.default.router
     const self = this
     this.builder = new Vue({
         router,
         store,
         render: (h) =>
             h(builder.default.component, {
                 props: {
                     propTemplateJson: this.propTemplateJson,
                     propMessageType: this.propMessageType
                 },
                 on: {
                     change(templateJson: any) {
                         self.$emit('change', (templateJson && !_.isEmpty(templateJson) ? templateJson : {}))
                     }
                 }
             })
     }).$mount(`#${this.id}`)
 }

 [Nuxt.js]
 mounted() {
     if (process.client) {
         const builder: any = require('~/node_modules/vue-builder-plugin/src/plugins/Module')
         const store =  builder.default.store
         const router = builder.default.router
         const self = this
         this.builder = new Vue({
             router,
             store,
             render: (h) =>
                 h(builder.default.component, {
                     props: {
                         propTemplateJson: this.propTemplateJson,
                         propMessageType: this.propMessageType
                     },
                     on: {
                         change(templateJson: any) {
                             self.$emit('change', (templateJson && !_.isEmpty(templateJson) ? templateJson : {}))
                         }
                     }
                 })
         }).$mount(`#${this.id}`)
     }
 }

attribute	value	type	description
id	up to you	`string`	for create element (default: builder). Mutiple element should be setup difference name
store	-	-	for use store in builder component module
router	-	-	for use router in builder component module
propTemplateJson	up to you	`object`	for setup default prop your template json (pass to builder module)
propMessageType	EMAIL, WEB_ATTENTION, FLEX_MESSAGE	`string`	for setup default prop your message type (EMAIL: result mjml, WEB_ATTENTION: result html, FLEX_MESSAGE: result line flex message)
this.builder	up to you	`any`	for save vue instance data (parameter in your component)
render	-	`function`	for render component
change(templateJson: any)	-	`function`	for pass updated data from child (module component) to parent (your component) component
.$mount(`#${this.id}`)	-	-	for create instance vue

Use Component
```
 <div id="builder" />
```

attribute	value	type	description
id	up to you	`string`	for create element (default: builder). Mutiple element should be setup difference name

Import Style To Component

 <style lang="scss">
     @import '~/node_modules/vue-builder-plugin/src/assets/scss/Main.scss';
     @import '~/node_modules/vue-builder-plugin/src/assets/css/quill.core.css';
     @import '~/node_modules/vue-builder-plugin/src/assets/css/quill.snow.css';
 </style>

Access Builder Instance Directive From Outside

 <YOUR_PARAMETER>.$el.__vue__.<YOUR_DIRECTIVE(DATA, PROPS, METHODS, ...)>

 such as
     this.builder.$el.__vue__.onUpdateScreen({
         mobile: this.isMobileActive,
         desktop: this.isFullsceenActive,
         width: {
             type: this.propWidthScreenType,
             size: this.propWidthScreenSize
         }
     })

attribute	value	type	description
isMobileActive	true, false	`boolean`	for set up screen (if value is true you can view on mobile screen only)
isFullsceenActive	true, false	`boolean`	for set up screen (if value is true you can view on desktop screen only)
width	{ type: string, size: string }	`object`	for set up width and type screen (if you set value you still edit builder)
propWidthScreenType	SM, MD, LG, FULL, CUSTOM	`string`	for set up screen type (SM: 30%, MD: 70%, LG: 50%, FULL: 100%, CUSTOM: up to you, DEFAULT: 90%)
propWidthScreenSize	number of percent (ex. 25%)	`string`	for set up screen custom

Project setup

yarn install

Compiles and hot-reloads for development

yarn dev

Compiles and minifies for production

yarn build:ts

Lints and fixes files

yarn lint

Customize configuration

See Configuration Reference.

Package detail

vue-builder-plugin

readme

Template Builder

How to use plugin

Project setup

Compiles and hot-reloads for development

Compiles and minifies for production

Lints and fixes files

Customize configuration