Unlayer Documentation

Unlayer Documentation

Welcome to Unlayer Documentation. It takes less than 5 minutes to get our editor up and running on your project.

These guides will take you through the process and get you up and running.

Get Started    

Vue Component

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

See the example source for a reference implementation.

Updated 3 months ago


Vue Component


Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.