Vue 3 への移行

レガシーアイテムからコンポジションAPIへの移行

概要

Vue I18n は、レガシーAPIモードとコンポジションAPIモードの両方のスタイルをサポートしています。レガシーAPIモードはOptions APIスタイルであり、コンポジションAPIモードは関数で構成できるVue Composition APIをサポートします。

レガシーAPIモードはレガシーVue I18n v8.xとほぼ互換性があるため、VueアプリケーションをVue 3に移行するのは比較的簡単です。Vue 3はOptions APIスタイルをサポートしているため、既存のVue 2アプリケーションはVue 3へ移行するケースになります。

Vue 3ではOptions APIスタイルとComposition APIスタイルを混合してVueアプリケーションを作成できますが、Vue I18nはv9の初回リリース以降、これらのAPIスタイルの混合を許可していません。そのため、どちらか一方のAPIスタイルのみを使用できます。

Options APIスタイルとコンポジションAPIスタイルの混合によるVueアプリケーション開発は、保守観点から望ましくないソフトウェア開発プロジェクトです。これは、そのようなコードを維持するコストが高いからです。しかし、両方のスタイルを使用することには利点があります。特に、APIスタイルの移行は、両方のAPIスタイルで実装されていても動作するため、段階的に移行するのが容易です。

Vue I18n v9.2からは、レガシーAPIモードもコンポジションAPIモードで使用できます。

サポートについて

注意

この移行サポートは次のメジャーバージョンv10で削除されます。Vue 3アプリケーションプロジェクトがまだ移行されていない場合は、v9に移行してからv10にアップグレードしてください。

制限事項

注意

これは移行用の限定機能として理解すべきです。

• レガシーAPIモードのコンポジションAPIはSSRをサポートしません
• Vue I18nコンポジションAPI（例：t）を <template> ではなく setup 関数コンテキスト内で正しく使用したい場合、nextTick コールバックコンテキスト経由で呼び出す必要があります。

移行方法

createI18n

createI18n のオプションに allowComposition: true を指定する必要があります。以下の例を参照：

import { createI18n } from 'vue-i18n'

const i18n = createI18n({
  locale: 'en',
  allowComposition: true, // これを指定する必要があります！
  messages: {
    en: {
      hello: 'hello!'
    },
    ja: {
      hello: 'こんにちは！'
    }
  }
})

console.log(i18n.allowComposition) // 出力は true

VueコンポーネントでのuseI18n

setup オプション

<script>
import { defineComponent } from 'vue'
import { useI18n } from 'vue-i18n'

export default defineComponent({
  name: 'Hello',
  setup() {
    const { t } = useI18n() // グローバルスコープとして使用
    return { t }
  }
})
</script>

<template>
  <p>{{ $t('hello') }}</p>
  <p>{{ t('hello') }}</p>
</template>

<script setup>

<script setup>
import { useI18n } from 'vue-i18n'

const { t } = useI18n() // グローバルスコープとして使用
</script>

<template>
  <p>{{ $t('hello') }}</p>
  <p>{{ t('hello') }}</p>
</template>