Template Builder
How to use plugin
Build Package (Include Store)
1. 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
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
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
(window as any).$el.__vue__.<YOUR_DIRECTIVE(DATA, PROPS, METHODS, ...)>
such as
(window as any).$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.