Internationalization

The editor UI supports locale switching. All labels, tooltips, and messages are driven by translation keys.

Setting the Locale

Pass the locale option to init():

import { init } from '@templatical/vue';

const editor = init({
  container: '#editor',
  locale: 'de',
});

If the locale is not recognized, the editor falls back to English.

Built-in Locales

Code	Language
en	English (default)
de	German

The locale value is matched by its base language code. Both 'en' and 'en-GB' resolve to the English translation set.

How Translations Work

Translations are flat objects organized by UI section (blocks, toolbar, settings, etc.). Each section contains keyed strings:

{
  blocks: {
    text: 'Text',
    image: 'Image',
    button: 'Button',
    // ...
  },
  toolbar: {
    duplicate: 'Duplicate',
    delete: 'Delete',
  },
  // ...
}

Some strings support placeholder interpolation using {placeholder} syntax:

{
  header: {
    templatesUsed: '{used}/{max} templates used',
  },
}

Locale files are loaded asynchronously, so only the required language bundle is included in the client.

Contributing Translations

To add a new locale, create a translation file that matches the structure of the English locale and submit a pull request. See the packages/vue/src/i18n/locales/ directory for reference.