v11での破壊的変更
レガシーアップモードの非推奨
理由
レガシーアップモードは、Vue 2用のv8と互換性のあるAPIモードでした。v9がリリースされた際、レガシーアップはv8からv9への移行をスムーズにするために提供されました。
以前のvue-i18nリリースでは、レガシーアップモードからコンポジションAPIモードへの移行をサポートするために、すでに以下の機能が提供されています。
- レガシーアップモードからコンポジションAPIモードへの移行: https://vue-i18n.intlify.dev/guide/migration/vue3.html
- コンポジションAPIの使用方法: https://vue-i18n.intlify.dev/guide/advanced/composition.html
互換性のために、レガシーアップモードはv11でも動作しますが、v12で完全に削除されるため、そのバージョン以降はレガシーアップモードは動作しません。
カスタムディレクティブ v-t の非推奨
理由
v-tの利点は、vueコンパイラ変換とvue-i18n-extensionによる事前翻訳を使用してパフォーマンスを最適化できることでした。
この機能はVue 2からサポートされていました。 詳しくはブログ記事をご覧ください: https://medium.com/@kazu_pon/performance-optimization-of-vue-i18n-83099eb45c2d
Vue 3では、コンポジションAPIのため、vue-i18n-extensionによる事前翻訳はグローバルスコープのみに制限されるようになりました。
さらに、Vue 3の仮想DOM最適化が導入されたことで、vue-i18n-extensionが提供する最適化はもはや効果がありません。SSR用の設定が必要となったため、v-tの使用メリットはなくなりました。また、v-tを使用したテンプレートの開発体験(DX)も悪くなります。カスタムディレクティブはエディタ(例:vscode)でのキー補完機能に対応していません。
互換性のために、v-tモードはv11でも動作しますが、v12で完全に削除されるため、そのバージョン以降はv-tは動作しません。
移行方法
eslint-plugin-vue-i18nを使用できます。
eslint-plugin-vue-i18nには@intlify/vue-i18n/no-deprecated-v-tルールがあります。 https://eslint-plugin-vue-i18n.intlify.dev/rules/no-deprecated-v-t.html
vue-i18n v11にアップグレードする前に、eslintを使った移行作業を完了しておく必要があります。
レガシーアップモードのtcおよび$tcの削除
理由: これらのAPIはv11で削除予定として警告されています。ドキュメントはこちら: https://vue-i18n.intlify.dev/guide/migration/breaking10.html#deprecate-tc-and-tc-for-legacy-api-mode