Vue integration

Embed the hosted MailLayers editor in Vue 3

Use the lightweight Vue SDK to mount the hosted MailLayers editor in an iframe with typed props, lifecycle events, exposed reload methods, and deterministic unmount cleanup.

Read documentation Open live editor

Published on npm

Version 0.1.0 · Install from npm or review the source on GitHub.

npm install @maillayers/vue-email-editor

Vue 3 single-file component

<script setup lang="ts">
import { ref } from "vue";
import { MailLayersEmailEditor } from "@maillayers/vue-email-editor";

const editor = ref();
const apiKey = "your-browser-sdk-key";
const embedToken = "server-issued-token";
</script>

<template>
  <MailLayersEmailEditor
    ref="editor"
    :api-key="apiKey"
    :embed-token="embedToken"
    initial-html="<h1>Welcome</h1>"
    @change="saveDraft"
    @save="persistHtml"
    @auth-error="reportAuthError"
  />
</template>

Production integration

Content, assets, security, and lifecycle

A useful embedded email editor is more than a mounted component. Plan the persistence and trust boundaries before connecting it to customer data.

Editor data methods

Use getHtml() for a sendable snapshot and getJson() for structured editor state. Call reload() only when staged content or configuration should start a new iframe handshake; use ready, load, change, save, and status callbacks for normal updates.

Assets

Implement upload, list, and delete handlers against storage owned by your application. Validate file type and size on the server, authorize each tenant-scoped object, return HTTPS URLs, and treat delete as an authenticated operation.

API keys and allowed domains

Use a browser SDK key only from an exact configured origin. Keep privileged secrets on your server, issue scoped embed tokens after authenticating the user, and do not treat iframe messages as trusted until origin and payload validation pass.

Multiple instances

Give each mounted editor stable state and separate callbacks. Avoid reusing one imperative ref across instances, and unmount inactive editors when tabs or routes no longer need them so listeners and iframe resources are released.

Performance

Reserve editor height to prevent layout shift, defer mounting until the authoring UI is needed, and show a stable loading fallback. Avoid remounting the iframe for ordinary form-state changes; prefer events and staged reloads.

Troubleshooting

If the editor does not become ready, verify the allowed origin, browser key, embed-token lifetime, editor URL, and Content Security Policy. For missing saves, inspect callback errors and confirm the host persistence request succeeds independently of the iframe.

Integration

Vue props and events map to the hosted iframe bridge

@maillayers/vue-email-editor on npm Source on GitHub

01
Pass apiKey, embedToken, and initialHtml through props. Content props are staged reactively and applied when reload() starts a new handshake.
02
Listen for change, save, ready, load, statusChange, and authError events without allowing a host-listener exception to break the editor lifecycle.
03
Use the component ref for reload when staged initial content or configuration should begin a new handshake. onBeforeUnmount tears down the iframe bridge.

Relevant capabilities

What this integration actually supports

Composition API

Vue 3 refs and emitted events provide an idiomatic state and lifecycle boundary.

Full asset callbacks

Upload, list, and delete handlers connect the editor to your storage boundary.

Explicit methods

The exposed component ref supports reload when you need a fresh iframe handshake.

Product boundary: MailLayers is the hosted editing surface, not an authentication provider, asset store, approval engine, ESP, or email delivery service. Imports are SSR-safe, but mounting requires the browser.

Related integration guides

React Next.js Angular Svelte SDK overview

Engineering articles

Read implementation notes about editor security, persistence, asset workflows, and framework-specific patterns.

Browse the MailLayers blog

FAQ

Questions specific to this integration

Which Vue version is supported?

Vue 3.4 and later. The package uses the Composition API and requires vue >=3.4.0 as a peer dependency.

Can Nuxt import the package?

The package import is SSR-safe, but the editor component must mount on the client.

How do I persist editor content?

Handle the change event for draft HTML and the save event when you need a committed snapshot for your sending workflow.

Continue with the verified integration guide

Review licensing, allowed domains, events, assets, SSR boundaries, and troubleshooting before production use.

Read docs View pricing