@yakoue/vue-email-builder

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

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

Customize configuration

See Configuration Reference.

For any report please write to contact@yakoue.com