Internationalization

CodeMirror shows its own UI text: the search and replace panel, folding markers, the lint panel, screen reader announcements, and so on. Pass a translation table to the phrases prop to localize it. The keys are the original English strings. For the full list, see the CodeMirror translation example.

Translation table

This example uses vue-codemirror6 as a Markdown editor with the UI translated into Japanese. Keys are grouped by the package that uses them; you only need to include the keys you want to translate.

<script lang="ts" setup vapor>
import { markdown } from '@codemirror/lang-markdown';
import { ref } from 'vue';
import CodeMirror from 'vue-codemirror6';

const value = ref('');
const lang = markdown();

/**
 * UI translations (Japanese in this example).
 *
 * @see {@link https://codemirror.net/examples/translate/}
 */
const phrases: Record<string, string> = {
  // @codemirror/view
  'Control character': '制御文字',
  // @codemirror/commands
  'Selection deleted': '選択範囲を削除しました',
  // @codemirror/language
  'Folded lines': '折りたたまれた行',
  'Unfolded lines': '展開された行',
  to: '〜',
  'folded code': '折りたたまれたコード',
  unfold: '展開',
  'Fold line': '行を折りたたむ',
  'Unfold line': '行を展開',
  // @codemirror/search
  'Go to line': '行へ移動',
  go: '移動',
  Find: '検索',
  Replace: '置換',
  next: '▼',
  previous: '▲',
  all: 'すべて',
  'match case': '大文字と小文字を区別',
  'by word': '単語単位',
  regexp: '正規表現',
  replace: '置換',
  'replace all': 'すべて置換',
  close: '閉じる',
  'current match': '現在の一致',
  'replaced $ matches': '$ 件を置換しました',
  'replaced match on line $': '$ 行目の一致を置換しました',
  'on line': '行',
  // @codemirror/autocomplete
  Completions: '補完候補',
  // @codemirror/lint
  Diagnostics: '診断',
  'No diagnostics': '問題はありません'
};
</script>

<template>
  <code-mirror v-model="value" basic :lang="lang" :phrases="phrases" />
</template>

$ in a key such as replaced $ matches is a placeholder that CodeMirror replaces with a number. Keep it in the translated text.

Switching languages with vue-i18n

phrases is reactive. Changing it reconfigures the editor without recreating it, so you can follow the current vue-i18n locale with a computed:

<script lang="ts" setup vapor>
import { computed } from 'vue';
import { useI18n } from 'vue-i18n';
import CodeMirror from 'vue-codemirror6';

const { locale } = useI18n();

/** Translation tables per locale. */
const phrasesByLocale: Record<string, Record<string, string>> = {
  ja: {
    Find: '検索',
    Replace: '置換',
    close: '閉じる'
    // ...
  },
  en: {} // Empty: CodeMirror's default (English) text is used.
};

const phrases = computed(() => phrasesByLocale[locale.value]);
</script>

<template>
  <code-mirror basic :phrases="phrases" />
</template>

Tip

Keys missing from the table fall back to CodeMirror’s English text, so a partial table is fine.

#Internationalization

#Translation table

#Switching languages with vue-i18n

Internationalization

Translation table

Switching languages with vue-i18n