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() {
        // Pass your template JSON here
        // 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)

Here's an example using the above properties...

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
        :appearance="appearance"
        :min-height="minHeight"
        :project-id="projectId"
        :locale="locale"
        :tools="tools"
        :options="options"
        ref="emailEditor"
        v-on:load="editorLoaded"
      />

    </div>
  </div>
</template>

<script>
  import { EmailEditor } from 'vue-email-editor'
  
  export default {
    name: 'app',
    components: {
      EmailEditor
    },
    data() {    
      return {  
        minHeight: "1000px",
        locale: "en",
        projectId: 0, // replace with your project id
        tools: {
          // disable image tool
          image: {
            enabled: false
          }
        },
        options: {},
        appearance: {
          theme: 'dark',
          panels: {
            tools: {
              dock: 'right'
            }
          }
        } 
      }
    },
    methods: {
      editorLoaded() {
        // Pass your template JSON here
        // 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>

Example

See the example source for a reference implementation.