> For AI agents: the complete documentation index is available at /vue-codemirror6/llms.txt, the full documentation bundle is available at /vue-codemirror6/llms-full.txt.

# 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](https://codemirror.net/examples/translate/).

## 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.

```vue
<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`:

```vue
<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.
:::