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
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
| 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.
