Internationalization (i18n)

The editor ships with 175+ translatable label keys covering every UI element. English is the default; a complete French translation is included.

Using French Labels

<script setup>
import { EmailEditor, FR_LABELS } from '@lab2view/vue-email-editor'
import '@lab2view/vue-email-editor/style.css'
</script>

<template>
  <EmailEditor :labels="FR_LABELS" />
</template>

Partial Override

You don't need to translate everything. Pass only the keys you want to change:

<EmailEditor
  :labels="{
    editor_title: 'Mein Editor',
    undo: 'Ruckgangig',
    redo: 'Wiederholen',
    blocks: 'Bausteine',
  }"
/>

Missing keys fall back to the English default.

Creating a Full Translation

To create a complete translation, implement the EditorLabels interface:

import type { EditorLabels } from '@lab2view/vue-email-editor'

export const DE_LABELS: Partial<EditorLabels> = {
  // Toolbar
  blocks: 'Bausteine',
  styles: 'Stile',
  layers: 'Ebenen',
  search_blocks: 'Bausteine suchen...',
  undo: 'Ruckgangig',
  redo: 'Wiederholen',
  
  // Block categories
  category_layout: 'Layout',
  category_content: 'Inhalt',
  category_composite: 'Fertige',
  
  // Content blocks
  block_content_text: 'Text',
  block_content_image: 'Bild',
  block_content_button: 'Schaltflache',
  
  // ... 170+ more keys
}

Label Categories

Labels are organized into logical groups:

Category	Count	Examples
Toolbar	16	blocks, undo, redo, code, fullscreen
Block categories	4	category_layout, category_content
Layout blocks	6	block_layout_1_col, block_layout_2_col
Content blocks	7	block_content_text, block_content_image
Composite blocks	28	block_comp_header, block_comp_hero_banner
Node types	13	node_mj_text, node_mj_section
Property groups	10	group_background, group_spacing
Property labels	34	prop_background_color, prop_font_family
Property options	26	align_left, border_solid, mode_horizontal
UI actions	7	delete_node, duplicate_node, move_up
Global styles	11	global_styles, email_background
Inline toolbar	11	bold, italic, link, text_color_label
Status	3	loading, empty_canvas_hint

Accessing Default Labels

import { DEFAULT_LABELS, FR_LABELS } from '@lab2view/vue-email-editor'

// English defaults
console.log(DEFAULT_LABELS.blocks) // 'Blocks'

// French
console.log(FR_LABELS.blocks) // 'Blocs'

Plugin Labels

Plugins also receive the current labels in their context, so they can add their own translations:

const myPlugin: Plugin = (ctx) => {
  // Access current labels reactively
  const currentLabels = ctx.labels.value
  
  ctx.registerBlock({
    id: 'my-block',
    label: 'my_block_label', // Use a key
    category: 'content',
    icon: 'Star',
    factory: () => createText('Hello'),
  })
}