Template Builder

$3

Build Package (Include Store)
1. Run Command
``
yarn add @pamsai/pam-builder
`

2. Run Command
`
yarn dev
`
or
`
npm run dev
`

3. Setup Data To Local Storage
`javascript

get storageBaseUrl() {
return
}

get storageToken() {
return
}

[Optional]
get personalizeBaseUrl() {
return
}

get personalizeToken() {
return
}

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] /galleries, [POST] /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] /customers/attributes)* |
|personalizeToken (optional) |up to you |string |for access api get personalize |

4. Import Module And Create Instance Vue Component
`javascript
[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 |



5. Use Component
`html