Internationalization

11 built-in languages, lazy loading, RTL and custom translations.

Built-in languages

CodeLanguageDirection
enEnglishLTR
zhHans简体中文LTR
esEspañolLTR
frFrançaisLTR
deDeutschLTR
ptPortuguêsLTR
ruРусскийLTR
ja日本語LTR
ko한국어LTR
arالعربيةRTL
hiहिन्दीLTR

English and Chinese are bundled; the others are separate chunks downloaded the first time you switch to them.

Switch language

import { locale } from 'vue-echo-editor'

await locale.setLang('fr')

setLang is async because it may fetch the language chunk. All editors on the page update immediately. For RTL languages the editor sets dir="rtl" on its root element.

Build a picker with supportedLocales:

<script setup lang="ts">
import { locale, supportedLocales, useLocale } from 'vue-echo-editor'

const { lang } = useLocale()
</script>

<template>
  <select :value="lang" @change="locale.setLang(($event.target as HTMLSelectElement).value)">
    <option v-for="l in supportedLocales" :key="l.code" :value="l.code">{{ l.nativeName }}</option>
  </select>
</template>

Override or add translations

Missing keys fall back to English, so you only need to provide what you change:

import { locale } from 'vue-echo-editor'

// Tweak a few labels
locale.extendMessage('en', { 'editor.bold.tooltip': 'Strong' })

// Add a whole new language
locale.setMessage('sw', {
  'editor.bold.tooltip': 'Herufi nzito',
  'editor.italic.tooltip': 'Italiki',
  // …
})
await locale.setLang('sw')

The full list of keys is in src/locales/locales/en.ts. Plugins can ship their own translations with the locales option.

Using translations in your UI

import { useLocale } from 'vue-echo-editor'

const { t, lang, direction } = useLocale()
t.value('editor.bold.tooltip')                 // → "Bold"
t.value('my.greeting', { name: 'Ada' })        // "Hello {name}" → "Hello Ada"
Collaboration
Real-time collaborative editing with Y.js, remote carets and a presence list.
Theming
Accent colours, border radius, dark mode and CSS customisation.