v12での破壊的変更

レガシーアプリケーションAPIモードの廃止

理由: レガシーアプリケーションAPIモードは、v11 の破壊的変更で既に非推奨と宣言されていました。これは Vue 2 用の Vue I18n v8 互換の API モードであり、v8 から v9 への移行をスムーズにするために提供されました。

v12では、レガシーアプリケーションAPIモードは完全に削除されました。createI18n の legacy オプションは使用できなくなり、すべてのアプリケーションは Composition API モードを使用する必要があります。

削除された項目

• createI18n の legacy: true オプション
• VueI18n インスタンス（レガシーインターフェース）
• VueI18nOptions 型
• allowComposition オプション（Composition APIが唯一のモードとなったため不要）
• VueI18n インスタンスに依存するレガシー固有の注入API

変更前 (v11)

import { createI18n } from 'vue-i18n'

// レガシーアプリケーションAPIモード
const i18n = createI18n({
  legacy: true, // この値は以前のバージョンでデフォルトでした
  locale: 'en',
  messages: {
    en: { hello: 'Hello!' },
    ja: { hello: 'こんにちは！' }
  }
})

// VueI18nインスタンス経由でのアクセス
i18n.global.locale = 'ja'

<!-- Options APIコンポーネント内 -->
<template>
  <p>{{ $t('hello') }}</p>
</template>

<script>
export default {
  mounted() {
    // this.$i18n（VueI18nインスタンス）経由でのアクセス
    console.log(this.$i18n.locale)
    this.$i18n.locale = 'ja'
  }
}
</script>

変更後 (v12)

import { createI18n } from 'vue-i18n'

// Composition APIモード（唯一の利用可能なモード）
const i18n = createI18n({
  locale: 'en',
  messages: {
    en: { hello: 'Hello!' },
    ja: { hello: 'こんにちは！' }
  }
})

// Composerインスタンス経由でのアクセス
i18n.global.locale.value = 'ja'

<!-- Composition APIの使用 -->
<template>
  <p>{{ t('hello') }}</p>
</template>

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

const { t, locale } = useI18n()

// ロケールの変更
locale.value = 'ja'
</script>

<!-- setupでuseI18nを使用したOptions API -->
<template>
  <p>{{ t('hello') }}</p>
</template>

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

export default {
  setup() {
    const { t, locale } = useI18n()
    return { t, locale }
  }
}
</script>

移行手順

1. createI18n から legacy: true オプションを削除
2. ロケールアクセスを i18n.global.locale から i18n.global.locale.value に変更
3. this.$i18n の使用を setup 関数内の useI18n() に置き換え
4. this.$t() を useI18n() からの t() に置き換え

詳細な移行ガイドについては、以下を参照してください：

• レガシーアプリケーションAPIモードからComposition APIモードへの移行
• Composition APIの使用方法

カスタムディレクティブ v-t の廃止

理由: このカスタムディレクティブは、v12で廃止されることが警告で既に示されています。ドキュメントでは、https://vue-i18n.intlify.dev/guide/migration/breaking11.html#deprecate-custom-directive-v-t に記載されています。

MissingHandler シグネチャの変更

理由: Vue 3.6+ で getCurrentInstance() API が非推奨になりました。MissingHandler 型は以前、3番目のパラメータとして ComponentInternalInstance を受け取りましたが、これはもう利用できません。

変更前 (v11)

type MissingHandler = (
  locale: Locale,
  key: Path,
  instance?: ComponentInternalInstance,
  type?: string
) => string | void

const i18n = createI18n({
  missing: (locale, key, instance, type) => {
    // instance は ComponentInternalInstance です
    console.warn(`Missing: ${key}`, instance?.uid)
  }
})

変更後 (v12)

type MissingHandler = (
  locale: Locale,
  key: Path,
  uid?: number,
  type?: string
) => string | void

const i18n = createI18n({
  missing: (locale, key, uid, type) => {
    // uid は今や直接数値として渡されます
    console.warn(`Missing: ${key}`, uid)
  }
})

移行手順

instance パラメータを uid に置き換えます：

 const i18n = createI18n({
-  missing: (locale, key, instance, type) => {
-    console.warn(`Missing key "${key}" in ${locale}`, instance?.uid)
+  missing: (locale, key, uid, type) => {
+    console.warn(`Missing key "${key}" in ${locale}`, uid)
   }
 })