Vue Component

unlayer/vue-email-editor is open source

Star, browse the source, file issues, or contribute.

Star on GitHub

Installation

npm install vue-email-editor

Basic usage (Vue 3 Composition API)

App.vue

<template>
  <div>
    <div>
      <button @click="exportHtml">Export HTML</button>
      <button @click="saveDesign">Save Design</button>
    </div>
    <EmailEditor ref="emailEditor" :options="options" @ready="onReady" />
  </div>
</template>

<script setup>
  import { ref } from 'vue';
  import { EmailEditor } from 'vue-email-editor';

  const emailEditor = ref(null);

  const options = {
    projectId: 1234, // replace with your Unlayer Project ID
    displayMode: 'email',
    features: {
      ai: true,
    },
  };

  const onReady = () => {
    // Editor is ready. Optionally load a saved design here:
    // emailEditor.value.editor.loadDesign(savedDesign);
  };

  const exportHtml = () => {
    emailEditor.value.editor.exportHtml((data) => {
      const { design, html } = data;
      console.log('HTML output:', html);
    });
  };

  const saveDesign = () => {
    emailEditor.value.editor.saveDesign((design) => {
      console.log('Design JSON:', design);
    });
  };
</script>

Vue 2 / Options API

App.vue

<template>
  <div id="app">
    <div class="container">
      <button v-on:click="saveDesign">Save Design</button>
      <button v-on:click="exportHtml">Export HTML</button>
      <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>

Nuxt.js

Wrap the editor in <ClientOnly> so it renders only on the client:

pages/editor.vue

<template>
  <ClientOnly>
    <EmailEditor ref="emailEditor" @ready="onReady" />
  </ClientOnly>
</template>

Configuration

Pass editor configuration through the options prop, or via dedicated props for the most common knobs. The options shape matches the full unlayer.init configuration:

<EmailEditor
  :appearance="appearance"
  :min-height="minHeight"
  :project-id="projectId"
  :locale="locale"
  :tools="tools"
  :options="options"
  ref="emailEditor"
  v-on:load="editorLoaded"
/>

Loading a saved design

const onReady = () => {
  const savedDesign = /* fetch from your backend */;
  emailEditor.value.editor.loadDesign(savedDesign);
};

Methods

Available on this.$refs.emailEditor.editor (Options API) or emailEditor.value.editor (Composition API):

Method	Params	Description
loadDesign	Object data	Loads a saved design JSON into the editor
saveDesign	Function callback	Returns the current design JSON via callback
exportHtml	Function callback	Returns the rendered HTML and design JSON via callback

Props

Name	Type	Description	Default
minHeight	String	Minimum height to initialize the editor with	500px
options	Object	Options passed to the Unlayer editor instance. See the configuration options for everything available.	{}
tools	Object	Configuration for built-in and custom tools	{}
appearance	Object	Configuration for appearance and theme	{}
locale	String	Translations locale	en-US
projectId	Integer	Unlayer Project ID (alternative to passing via options)

Example

A full working reference implementation lives in the vue-email-editor demo.