Skip to content

#Yakoue's MJML Drag & Drop email builder component for vuejs

Notifications You must be signed in to change notification settings

yakoue/vue-email-builder

Repository files navigation

Yakoue Email Editor

Yakoue Email builder

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]

About

#Yakoue's MJML Drag & Drop email builder component for vuejs

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published