Integrating Unlayer with Vue introduces its own quirks. Reactive lifecycles, improper scoping, or overlooked config settings can quietly break features, derail builds, and frustrate even experienced developers.
What looks like a minor hiccup in setup often snowballs into full-blown Vue email builder issues, leading to hours of head-scratching debugging.
This guide walks you through the most common Vue + Unlayer integration issues — and more importantly, how to avoid them altogether.
Whether you're dealing with unstable exports, non-functional AMP blocks, or a setup that just won’t behave in production, we’ve got you covered with practical, field-tested fixes.
Here’s what you’ll learn:
✅ How to initialize Unlayer cleanly inside Vue components
⚙️ Enabling AMP and Carousel features without breaking the layout
🔁 Loading templates properly — and when to fall back to the Classic Editor
🧩 Why custom tools vanish and how to fix them
🚫 What causes the watermark to appear in production, and how to get rid of it
🛠️ How version mismatches lead to regressions (and how to stay ahead of them)
Let’s dive in and make your Vue email builder setup clean, stable, and ready for scale.
1. Messy or Broken Initialization of the Vue Email Builder
One of the most common Vue email builder issues stems from a sloppy or incorrect initialization of the Unlayer editor.
Developers often struggle with where and how to set up the Unlayer editor in Vue applications. This can involve deciding the right place to initialize the editor, managing configuration options like customJS, projectID, or version, or ensuring features like AMP and custom tools load correctly.
As a result, things spiral:
AMP blocks fail to render
Custom tools don’t load
Configuration changes become a nightmare to manage
And worst of all, your editor becomes tightly coupled to a single view, making it nearly impossible to reuse or scale.
✅ Solution: Modularize Unlayer with a dedicated Vue component
To keep things clean, scalable, and bug-free, isolate the Unlayer setup into its own component. This lets you control configuration, versioning, and feature flags with less risk of polluting your app’s core logic.
Step-by-step: Properly initialize Unlayer in Vue
Step 1: Install the Vue email editor
npm install vue-email-editor --save --save or yarn add vue-email-editor
Step 2: Add the editor to your App.vue
Inside the src folder, add the Unlayer Vue component to your App.vue file. Full docs are available here: Vue Component.
<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>
Step 3: 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',
},
2. AMP/Carousel Blocks Not Rendering in Vue
You’ve dropped in an AMP Carousel block while designing your email with Unlayer, expecting a dynamic and interactive experience. But when you preview the email—or worse, export the HTML—nothing shows up.
This is a common and frustrating issue developers run into when integrating Unlayer with Vue. The root cause? AMP mode isn’t enabled properly in your configuration.
✅ Solution: Enable AMP mode in the options Config
To make AMP blocks work correctly, you need to turn on AMP support during editor initialization in your Vue component.
Step 1: Update your options property
Inside your Vue component setup, pass the following config:
options: {
version: 'stable',
amp: true,
displayMode: 'email',
},
This enables AMP rendering and ensures blocks like Carousel appear in both the live editor and exported HTML.
Step 2: Toggle AMP mode in the editor UI
Inside the Unlayer editor interface, toggle the AMP preview mode to see your AMP blocks live in action. Here’s what to look for:
Step 3: Export AMP HTML properly
Want to export the AMP version of your email along with the standard HTML? Just add the AMP flag in the exportHtml() method:
exportHtml() {
this.$refs.emailEditor.editor.exportHtml(
(data) => {
const json = data.design;
const html = data.html;
const ampHTML = data.amp.html;
console.log("Design JSON:", json);
console.log("Design AMP HTML:", ampHTML);
console.log("Design HTML:", html);
},
{ amp: true } // enable AMP in the export
);
}
With this setup, your AMP and Carousel blocks will render correctly, both in the editor and in the final output. Therefore, there will be no more blank previews or missing features.
3. Confusion on Declaration of Version and How Version Updates Work
You’ve followed the setup docs, everything looks fine — but a block won’t render, or a feature you expected just isn’t there. Sound familiar?
This kind of issue often points to one root cause: you’re using the wrong Unlayer editor version in your Vue app.
Unlayer supports multiple version modes, and choosing the wrong one can lead to inconsistent behavior, especially in production. What works locally might silently break live due to version mismatches or undocumented updates.
✅ Solution: Choose the right editor version for your use case
Unlayer gives you full control over which version of the editor to load. The key is using the right one for the right environment.
Version options available:
latestIdeal for development. Gives you access to cutting-edge features and updates. But keep in mind — it may introduce breaking changes without warning.stableBest for production. It’s thoroughly tested and less likely to break your setup.Specific version (e.g.,
1.248.0) Locking into a specific version helps avoid surprise regressions. Perfect for production environments where stability matters.
🔧 How to set the editor version in Vue
Pass the version directly in the options config of your Vue component:
options: {
version: 'stable',
amp: true,
displayMode: 'email',
},
💡 Best practice
Use the latest while developing to catch breaking changes early and test new features.
Before pushing to production, switch to stable or a specific version to lock in behavior and prevent unwanted surprises.
4. Unlayer Watermark Showing or Premium Features Missing in Production
You’ve upgraded to a paid Unlayer plan — no watermark, access to advanced tools — but in production, that Unlayer watermark still shows up, and some premium features are nowhere to be found.
Everything worked perfectly on localhost, so you naturally start digging into your code. But the issue likely isn’t in your setup — it’s a domain authorization problem that often slips under the radar when moving from development to production.
✅ Solution: Whitelist your production domain in the Unlayer Console
Unlayer automatically whitelists localhost for testing purposes, which is why everything seems fine during development. But in production, your domain must be explicitly added in the Unlayer Console to activate your paid plan features.
🔐 How to whitelist your domain:
Open your app in the browser where the Unlayer editor is embedded.
Right-click > Inspect and go to the Network tab.
Refresh the page and look for the
sessionnetwork call.Under Payload, locate the
domainvalue — this is exactly what Unlayer expects to be authorized.Head to the Unlayer Console Under
DeveloperSection, Go to:Builder > Settings > Allowed DomainsPaste the domain into the “Allowed Domains” field and save.
Refresh your app — the watermark should disappear, and premium features should unlock.
Next, let’s tackle another frustrating issue: why your custom tools vanish and what you can do about it.
5. Custom Tool Not Showing Up in Your Vue Email Builder
You’ve written and bundled a custom Unlayer tool and integrated it into your Vue app, but it’s not visible in the editor.
This is a frustrating issue that usually boils down to one of two things:
The custom tool JavaScript isn’t properly bundled or hosted
The tool wasn’t registered correctly using the
customJSconfig
When either of these steps is missed, Unlayer silently fails to load your tool — no error, no warning, just... nothing.
✅ Solution: Properly bundle, host, and register your custom tool
To successfully integrate a custom tool in your Vue-based Unlayer setup, you need to complete three key steps:
Step 1: Implement the custom tool
Write your tool’s logic in a standalone JavaScript file. If you haven’t already, refer to Unlayer’s docs on how to create a custom tool.
Step 2: Host the JavaScript file
Make sure the final, bundled version of your tool is publicly accessible. You can host it on:
Your web server
A CDN (e.g., Cloudflare, AWS S3, or Netlify)
Any HTTPS-accessible endpoint
Step 3: Register the tool via customJS
Inside your Vue component, add the customJS field inside the options object returned by your data() method:
options: {
version: 'stable',
displayMode: 'email',
customJS: “https://yourdomain.com/custom-tool.js”,
},
Once registered, the editor should load the script at runtime and display your custom tool inside the toolbox, just like any built-in block.
6. Custom Tool Appears as "Missing" in Exports
Your custom tool works flawlessly in the Unlayer editor; it renders, behaves, and even saves correctly. But when you export the design as HTML, PDF, or image, the block is replaced with a dreaded “Missing” label.
This is a surprisingly common issue, and it usually happens for one of two reasons:
The custom tool’s JavaScript file isn’t publicly accessible
The tool lacks proper exporters during registration
Without those in place, Unlayer’s server-side exporters can’t interpret your tool, so they simply leave a placeholder.
✅ Solution: Publicly host the tool & define exporters for all modes
To ensure your custom tool is properly rendered in all output formats, you’ll need to take care of two essential steps:
🔹 Step 1: Host your custom tool on a public URL
Your custom tool’s JavaScript file must be accessible via a public HTTPS URL.
You can host it on:
AWS S3
GitHub Pages
Netlify
Any reliable CDN or server
Then, reference this file in your Vue config using the customJS property and using the export APIs.
Ensure your tool’s registration includes valid exporters for email, web, popup, and document displayModes.
🔹 Step 2: Properly define exporters in registerTool
When calling unlayer.registerTool(), make sure to define exporters for all necessary displayModes, including email, web, popup, and document.
⚠️ If you don’t define exporters, the server won’t know how to render your tool during export, and it’ll be flagged as missing.
Final Thoughts
Building a seamless email design experience in a Vue app using Unlayer is completely doable, but only when the integration is handled with care. As you’ve seen, many problems that feel complex at first glance often come down to simple configuration oversights.
Whether it's broken AMP blocks, disappearing custom tools, or unexpected export behavior, understanding the root cause can save you hours of debugging.
By taking a modular approach, using the right versioning strategy, and correctly registering tools and domains, you’ll avoid most of the Vue email builder issues that derail production workflows.
Got a specific issue we didn’t cover? Feel free to comment below or reach out to our customer support team.
