#多言語化

<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 の翻訳(この例では日本語)
 *
 * @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>

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

const { locale } = useI18n();

/** ロケールごとの翻訳表 */
const phrasesByLocale: Record<string, Record<string, string>> = {
  ja: {
    Find: '検索',
    Replace: '置換',
    close: '閉じる'
    // ...
  },
  en: {} // 空の場合は CodeMirror の既定(英語)のテキストを使います
};

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

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