Draggable Unlayer Email Editor With Vue

Install & Download:

# Yarn
$ yarn add vue-email-editor
# NPM
$ npm i vue-email-editor

Description:

A powerful and developer-friendly email editor that makes it easy to create professional newsletters with drag and drop.

How to use it:

1. Import and register the email editor.

import { EmailEditor } from 'vue-email-editor'
export default {
  components: {
    EmailEditor
  },
}

2. Add the mail editor to your app template.

<EmailEditor ref="emailEditor" v-on:load="editorLoaded" />
<button v-on:click="saveDesign">Save Design</button>
<button v-on:click="exportHtml">Export HTML</button>

export default {
  name: 'app',
  components: {
    EmailEditor
  },
  methods: {
    editorLoaded() {
      this.$refs.emailEditor.editor.loadDesign({});
    },
    saveDesign() {
      this.$refs.emailEditor.editor.saveDesign(
        (design) => {
          console.log('saveDesign', design);
        }
      )
    },
    exportHtml() {
      this.$refs.emailEditor.editor.exportHtml(
        (data) => {
          console.log('exportHtml', data);
        }
      )
    }
  }
}

3. Possible options & props. See https://unlayer.com/ for full configs.

// options passed to the Unlayer editor instance
options: Object,
// project ID
projectId: Number,
// configuration for the built-in and custom tools
tools: Object,
// configuration for appearance and theme
appearance: Object,
// translations string
locale: String,
// min height
minHeight: {
  type: String,
  default: '500px',
},

Preview:

Changelog:

v1.0.0 (04/22/2022)

• Update