Customizing the top bar

Everything in the top bar is configurable from the host app — swap the logo, show/hide built-in actions, rename them, add your own buttons, or replace the bar entirely.

Goal	How
Show/hide a built-in action	config.actions.<name> (boolean)
Rename a built-in label/tooltip	config.labels.<name> (string)
Replace the logo / brand	#header-brand slot
Add custom buttons (keep built-ins)	#header-actions slot
Fully custom toolbar (own labels/layout)	#header slot
Trigger the editor from your buttons	@ready="api = $event" (or events)

Show / hide built-in actions

<EmailEditor
  :config="{
    actions: {
      undo: true, preview: true, theme: true, fullscreen: true,
      templates: false, new: false, import: false,
      save: true, saveTemplate: true, export: true,
    },
  }"
/>

All default to true except saveTemplate (defaults false). Set false to hide.

Rename built-in labels — config.labels

<EmailEditor
  :config="{
    labels: { brand: 'Acme Mailer', save: 'Publish', export: 'Get HTML' },
  }"
/>

Every label is optional. brand only applies when you haven't overridden the #header-brand slot.

Save / Export button style — config.labeledActions

The Save and Export buttons render icon-only by default (the label shows as a tooltip). Set labeledActions: true to show the text label alongside the icon.

<EmailEditor :config="{ labeledActions: true }" />

The Fullscreen button (right of the header) expands the editor to fill the whole window; a second click or Esc exits. Hide it with actions.fullscreen: false.

Replace the logo — #header-brand

<EmailEditor>
  <template #header-brand>
    <img src="/logo.svg" alt="Acme" style="height: 24px" />
  </template>
</EmailEditor>

Add custom actions — #header-actions

Your buttons render next to the built-ins; wire them via the imperative API:

TS

<script setup lang="ts">
import { ref } from 'vue'
import { EmailEditor } from 'vue-mail-editor'
import type { EditorApi } from 'vue-mail-editor'

const api = ref<EditorApi>()
function publish() {
  myBackend.publish(api.value!.exportHtml())
}
</script>

<template>
  <EmailEditor @ready="api = $event">
    <template #header-actions>
      <button @click="publish">Publish</button>
    </template>
  </EmailEditor>
</template>

JS

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

const api = ref()
function publish() {
  myBackend.publish(api.value.exportHtml())
}
</script>

<template>
  <EmailEditor @ready="api = $event">
    <template #header-actions>
      <button @click="publish">Publish</button>
    </template>
  </EmailEditor>
</template>

Fully custom toolbar — #header

Replace the whole bar (your own labels/layout) and drive it via the API:

<EmailEditor @ready="api = $event">
  <template #header>
    <header class="my-toolbar">
      <img src="/logo.svg" />
      <button @click="api?.undo()">Undo</button>
      <button @click="api?.exportHtml()">Export</button>
    </header>
  </template>
</EmailEditor>

With #header you own the markup, so wire every action through the EditorApi (@ready) and/or the events.