Yakoue Email Editor

Install

CDN

<script src="https://unpkg.com/@yakoue/vue-email-builder"></script>

NPM

$ npm install @yakoue/vue-email-builder --save
or
$ yarn @yakoue/vue-email-builder

Usage

Next, you'll need to import the Email Builder component to your app.

<template>
  <div id="example">
    <div class="container">
      <div id="bar">
        <h1>Vue Email Editor (Demo)</h1>

        <button @click="saveDesign">Save Design</button>
        <button @click="exportHtml">Export HTML</button>
      </div>

      <EmailBuilder ref="emailbuilder" :config="config" @load="editorLoaded" />
    </div>
  </div>
</template>

<script>
import EmailBuilder from '@yakoue/vue-email-builder'
export default {
  name: 'Example',
  components: {
    EmailBuilder,
  },
  data() {
    return {
      config: {},
      emailTemplate: `<mjml> 
<mj-body> 
    <mj-section> 
        <mj-column> 
            <mj-text>
                <h1> Hey Title! </h1> 
            </mj-text>
                <mj-button> Hi nestor! </mj-button>
        </mj-column>
    </mj-section>  
</mj-body> 
</mjml>`,
    }
  },
  methods: {
    editorLoaded(instance) {
      //
      this.instance = instance
      this.instance.addEvent('onExport', (data) => {
        console.log('exportHtml', data)
      })
      this.instance.setTemplate(emailTemplate)
    },
    saveTemplate() {
      this.addEvent('onSave', (template) => {
        console.log('saveTemplate', JSON.stringify(template, null, 2))
      })
      this.instance.save()
    },
    exportHtml() {
      this.instance.export()
    },
  },
}
</script>

Methods

Method	Param	description
setTemplate	template	Take the template and load it to the builder
saveTemplate	Function callback	Returns the design JSON and HTML in a callback function
exportHtml	Function callback	Returns the design HTML in a callback function

Properties

template object or string You can set MJML Json on MJML XML as string to this props

config object You can use this props to config and customize the builder

onLoad function callback You can use this to set call back function on builder load

Configuration Options

---

Attribute	Required
brand object	No	This is the Brand Object from Yakoue. You can get it from the Brand settings page.
locale string	No	This is the locale you want to load the editor in. We have many translations available.
fusionTags object	No	This is an array of objects. You can pass the merge tags and special links to display in the editor.
token string	No	String token for authentication. It is required to enable user saved blocks.
tools object	No	These are the options for tools and custom tools.
blocks object	No	This is an array of objects. You can pass custom blocks here.
drows object	No	This is an array of objects. You can pass custom rows (sections) here.
body object	No	This objects to custom default template settings
editor object	No	These are some editor options for different functions of the editor.
fonts object	No	You can pass custom fonts here.
toolsDefaultValues object	No	You can pass default tools properties here.
callbacks array	No	Array of callbacks functions

Customize configuration

See Configuration Reference.

For any report please write to [email protected]