Are you ready to embed Unlayer Email Builder in Vue and start creating rich, drag‑and‑drop email experiences in under 10 minutes?
In this guide, we’ll walk you through everything from installation to capturing your first design export, all optimized for Vue developers looking for a fast, seamless integration.
Just like our popular “Embed Unlayer Email Builder in React” post, we’ll break down the process into clear, actionable steps. So, you can go from zero to a live email builder in no time.
Whether you need to customize tools, load templates, or export polished HTML, we've got you covered.
Let’s make your Vue app email-powerful, quickly!
Step 1: Install the Unlayer Vue Component
Install the Unlayer official Vue wrapper via npm or yarn:
npm install vue-email-editor --saveOr
yarn add vue-email-editorCheck out the Unlayer Vue Component documentation for full API details and usage patterns.
Step 2: Import and Use the Component
Inside the src folder, add the Unlayer Vue component to your App.vue file.
<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: 123456, // 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>Next, pass your projectId, displayMode, version, amp, and other configurations (i.e., customJS) in the options property as shown below:
options: {
version: 'stable',
amp: true,
displayMode: 'email',
},This setup adds the editor to your Vue app and gives you built-in methods to save and export designs.
Visit the GitHub repo to view source code and submit issues or feedback.
Step 3: Add Editor Methods (Optional but Recommended)
The Vue component provides built-in methods to load, save, and export email designs from the editor. These are accessible via the component’s ref and can be triggered on user actions:
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);
});
},
},See the example source for a reference implementation.
Step 4: Customize the Look and Tools
You can tailor the editor’s appearance and available tools to match your app’s branding and user needs:
data() {
return {
minHeight: '1000px',
locale: 'en',
projectId: 123456, // replace with your project id
tools: {
// disable image tool
image: {
enabled: false,
},
},
options: {},
appearance: {
theme: 'dark',
panels: {
tools: {
dock: 'right',
},
},
},
};
},Want to go further? Unlayer supports full theming, custom icons, panel positions, and even creating your own tools with custom settings and property editors.
Try Unlayer’s playground to see how different props and hooks affect the editor.
Step 5: Save or Export the Final Design
You can trigger design export or save programmatically using the Vue wrapper:
<template>
<UnlayerEditor ref="unlayerEditor" />
</template>
<script>
import { UnlayerEditor } from 'vue-unlayer';
export default {
components: { UnlayerEditor },
methods: {
exportHtml() {
this.$refs.emailEditor.editor.exportHtml((data) => {
console.log('exportHtml', data);
});
},
},
};
</script>Unlayer also supports exporting designs as JSON, plain text, PDF, image, or ZIP, which is perfect for headless or backend-driven workflows.
Ready to integrate? Start your free trial and begin embedding today.
What’s Next?
Here are a few ways to take your Vue email builder integration even further:
Unlayer helps you move fast without compromising on design quality, flexibility, or control.
Start building with the Vue SDK, or book a demo if you’re looking for enterprise-ready deployment, support, or white-label solutions.
