Skip to main content

Vue Setup

This guide covers setting up Unlayer in a Vue application using the official vue-email-editor package.

Installation​

npm install vue-email-editor
# or
yarn add vue-email-editor

Basic Usage (Vue 3)​

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

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

const emailEditor = ref(null);

const options = {
  displayMode: 'email',
};

const onReady = () => {
  console.log('Editor is ready');
};

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>

Loading a Saved Design​

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

Nuxt.js​

For Nuxt.js, wrap the editor in a client-only component:

pages/editor.vue
<template>
  <ClientOnly>
    <EmailEditor ref="emailEditor" @ready="onReady" />
  </ClientOnly>
</template>

What's Next​