国際化

詳細は国際化ガイドをご覧ください。

クイックサンプル

実行時にエディターの言語を切り替えます。

<script setup lang="ts">
import { useI18n } from 'vue-i18n'

const { locale } = useI18n()

const languages = [
  { code: 'en', name: 'English' },
  { code: 'de', name: 'Deutsch' },
  { code: 'fr', name: 'Français' },
  { code: 'es', name: 'Español' },
]
</script>

<template>
  <div>
    <v-select
      v-model="locale"
      :items="languages"
      item-title="name"
      item-value="code"
      label="Language"
    />

    <Tiptapify />
  </div>
</template>

利用可能なロケール

コード	言語	コード	言語
en	英語	ko	韓国語
ar	アラビア語	la	ラトビア語
bg	ブルガリア語	lt	リトアニア語
ch	中国語	nl	オランダ語
cz	チェコ語	no	ノルウェー語
de	ドイツ語	pl	ポーランド語
el	ギリシャ語	pt	ポルトガル語
es	スペイン語	pt-BR	ポルトガル語（ブラジル）
et	エストニア語	ro	ルーマニア語
fi	フィンランド語	ru	ロシア語
fr	フランス語	se	スウェーデン語
he	ヘブライ語	sk	スロバキア語
hi	ヒンディー語	sl	スロベニア語
hr	クロアチア語	sr	セルビア語
hu	ハンガリー語	th	タイ語
id	インドネシア語	tr	トルコ語
it	イタリア語	uk	ウクライナ語
ja	日本語	vi	ベトナム語

ロケールの異なる複数のエディター

vue-i18n のスコープ付きロケールを使うと、インスタンスごとに言語を設定できます。

<script setup lang="ts">
import { useI18n } from 'vue-i18n'

const en = useI18n({ useScope: 'local', locale: 'en' })
const de = useI18n({ useScope: 'local', locale: 'de' })
</script>

<template>
  <v-row>
    <v-col>
      <h3>English</h3>
      <Tiptapify />
    </v-col>
    <v-col>
      <h3>German</h3>
      <Tiptapify />
    </v-col>
  </v-row>
</template>