Email Export

Quick start

If you use the standalone EmailEditor component, you can access the email HTML and plain text through a template ref.

<script setup lang="ts">
import { EmailEditor, type EmailEditorRef } from '@vuemaildev/editor';
import { ref, useTemplateRef } from 'vue';

const emailEditor = useTemplateRef<EmailEditorRef>('email-editor');
const html = ref('');

async function handleExport() {
  if (!emailEditor.value) return;
  html.value = await emailEditor.value.getEmailHTML();
}
</script>

<template>
  <div>
    <EmailEditor ref="email-editor" content="<p>Edit me</p>" />
    <button type="button" @click="handleExport">Export HTML</button>
    <textarea v-if="html" readonly :value="html" />
  </div>
</template>

The ref exposes three export methods:

Method	Returns	Description
`getEmailHTML()`	`Promise<string>`	Email-ready HTML
`getEmailText()`	`Promise<string>`	Plain text version
`getEmail()`	`Promise<{ html, text }>`	Both in a single call

All three use composeVueEmail under the hood. The @update and @ready events receive the same object.

Using without EmailEditor

Use composeVueEmail directly to convert editor content into email-ready HTML and plain text without EmailEditor.

export-panel.vue

<script setup lang="ts">
import { composeVueEmail, useCurrentEditor } from '@vuemaildev/editor/core';
import { ref } from 'vue';

const { editor } = useCurrentEditor();
const html = ref('');
const exporting = ref(false);

async function handleExport() {
  if (!editor.value) return;
  exporting.value = true;
  const result = await composeVueEmail({ editor: editor.value });
  html.value = result.html;
  exporting.value = false;
}
</script>

<template>
  <div>
    <button type="button" :disabled="exporting" @click="handleExport">
      {{ exporting ? 'Exporting...' : 'Export HTML' }}
    </button>
    <textarea
      v-if="html"
      readonly
      :value="html"
      rows="16"
      :style="{ width: '100%', fontFamily: 'monospace' }"
    />
  </div>
</template>

my-editor.vue

<script setup lang="ts">
import { EditorProvider } from '@vuemaildev/editor';
import { StarterKit } from '@vuemaildev/editor/extensions';
import { EmailTheming } from '@vuemaildev/editor/plugins';
import { BubbleMenu } from '@vuemaildev/editor/ui';
import ExportPanel from './export-panel.vue';

const extensions = [StarterKit, EmailTheming];

const content = `
  <h1>My Email Newsletter</h1>
  <p>Edit this content, then click <strong>Export HTML</strong> to see the generated email markup.</p>
  <p>The exported HTML uses Vuemail components and is ready to send.</p>
`;
</script>

<template>
  <EditorProvider :extensions="extensions" :content="content">
    <BubbleMenu />
    <ExportPanel />
  </EditorProvider>
</template>

How it works

The composeVueEmail function follows this pipeline:

Read the editor’s JSON document
Traverse each node and mark in the document tree
Call renderToVueEmail() on each EmailNode and EmailMark extension
Apply theme styles via the SerializerPlugin (if EmailTheming is configured)
Wrap the content in a BaseTemplate
Renders to an HTML string and plain text version using render

The return value is:

const { html, text, unformattedHtml } = await composeVueEmail({ editor });

// html            — Full HTML email string, formatted for reading
// text            — Plain text version for email clients that don't support HTML
// unformattedHtml — The same HTML without formatting, smaller for storing or sending

Preview text

The preview parameter sets the email preview text. Email preview text is the snippet shown in inbox list views before the email is opened.

const result = await composeVueEmail({
  editor,
  preview: 'Check out our latest updates!',
});

Leave preview out to omit preview text.

Using with theming

When the EmailTheming extension is in your extensions array, theme styles are automatically injected into the exported HTML. The serializer uses the SerializerPlugin provided by EmailTheming to resolve styles for each node based on the current theme and depth in the document tree.

const extensions = [StarterKit, EmailTheming.configure({ theme: 'basic' })];

// Later, when exporting:
const { html } = await composeVueEmail({ editor });
// ...the html includes all theme styles inline

Full example with export panel

Here’s a complete editor with theming and an export panel, using the export-panel.vue component from above.

full-email-builder.vue

<script setup lang="ts">
import { EditorProvider } from '@vuemaildev/editor';
import { StarterKit } from '@vuemaildev/editor/extensions';
import { EmailTheming } from '@vuemaildev/editor/plugins';
import {
  BubbleMenu,
  defaultSlashCommands,
  SlashCommand,
} from '@vuemaildev/editor/ui';
import { computed, ref } from 'vue';
import ExportPanel from './export-panel.vue';

type EditorTheme = 'basic' | 'minimal';

const theme = ref<EditorTheme>('basic');
const extensions = computed(() => [
  StarterKit,
  EmailTheming.configure({ theme: theme.value }),
]);

const content = `
  <h1>Weekly Newsletter</h1>
  <p>Edit this content, then click <strong>Export HTML</strong> to see the generated email markup.</p>
`;
</script>

<template>
  <div>
    <div :style="{ display: 'flex', gap: '8px', marginBottom: '16px' }">
      <button type="button" @click="theme = 'basic'">Basic Theme</button>
      <button type="button" @click="theme = 'minimal'">Minimal Theme</button>
    </div>
    <EditorProvider :key="theme" :extensions="extensions" :content="content">
      <BubbleMenu
        :hide-when-active-nodes="['button']"
        :hide-when-active-marks="['link']"
      />
      <BubbleMenu.LinkDefault />
      <BubbleMenu.ButtonDefault />
      <SlashCommand :items="defaultSlashCommands" />
      <ExportPanel />
    </EditorProvider>
  </div>
</template>

Overview

Features

Advanced

API Reference

Quick start

Using without EmailEditor

How it works

Preview text

Using with theming

Full example with export panel

Examples

Email Export

Full Email Builder

​Quick start

​Using without EmailEditor

​How it works

​Preview text

​Using with theming

​Full example with export panel

​Examples

Email Export

Full Email Builder

Quick start

Using without EmailEditor

How it works

Preview text

Using with theming

Full example with export panel

Examples