Unlayer editor is also available as a Vue.js component.

Installation

The easiest way to use it is to install it from npm and include it in your own Vue build process.

Npm

npm install vue-email-editor --save

Yarn

yarn add vue-email-editor

Usage

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

App.vue

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

        <button v-on:click="saveDesign">Save Design</button>
        <button v-on:click="exportHtml">Export HTML</button>
      </div>

      <EmailEditor ref="emailEditor" v-on:load="editorLoaded" />
    </div>
  </div>
</template>

<script>
  import { EmailEditor } from 'vue-email-editor'
  
  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);
          }
        )
      }
    }
  }
</script>

Methods

Method	Params	Description
loadDesign	Object data	Takes the design JSON and loads it in the editor
saveDesign	Function callback	Returns the design JSON in a callback function
exportHtml	Function callback	Returns the design HTML and JSON in a callback function

See the example source for a reference implementation.

Properties

Name	Type	Description	Default Value
minHeight	String	Minimum height to initialize the editor with	500px
options	Object	Options passed to the Unlayer editor instance	{}
tools	Object	Configuration for the built-in and custom tools	{}
appearance	Object	Configuration for appearance and theme	{}
locale	String	Translations locale	en-US
projectId	Integer	Unlayer project ID (optional)

Example