v10での破壊的変更

JITコンパイルのデフォルト有効化

理由: CSP問題を解決し、動的リソースをサポートできるようになったため

JITコンパイルはv9.3で導入されました。これはデフォルトでは有効になっていませんでした。

vue-i18nを統合したNuxt I18nは、既にこの機能がデフォルトで有効かつ安定しています。 https://i18n.nuxtjs.org/docs/options/compilation#jit

Vue I18nでこの機能を使用するには、バンドラと@intlify/unplugin-vue-i18nを使って__INTLIFY_JIT_COMPILATION__フラグを有効にする必要がありました。 JITコンパイルでは、v10以降、このフラグは不要になりました。

JITコンパイルを使用していない場合でv10以降に移行する場合は、一度アプリケーションを再構築する必要があります。

JITコンパイルの詳細については、「最適化」を参照してください。

旧APIモードにおける$tとtのオーバーロードシグネチャの変更

Vue I18n v9では、Composition APIモードとLegacy APIモードの$tとtのオーバーロードシグネチャが異なります。

特に、Legacy APIモードの$tとtのシグネチャは、Composition APIモードに比べてオーバーロードシグネチャが少なくなります。以下の通りです：

$tおよびtのオーバーロードシグネチャ	旧API v9	旧API v10	Composition API v9 & v10
$t(key: Key): TranslateResult;	✅	✅	✅
$t(key: Key, locale: Locale): TranslateResult;	✅	-	-
$t(key: Key, locale: Locale, list: unknown[]): TranslateResult;	✅	-	-
$t(key: Key, locale: Locale, named: NamedValue): TranslateResult;	✅	-	-
$t(key: Key, plural: number): TranslateResult;	-	✅	✅
$t(key: Key, plural: number, options: TranslateOptions): TranslateResult;	-	✅	✅
$t(key: Key, defaultMsg: string): TranslateResult;	-	✅	✅
$t(key: Key, defaultMsg: string, options: TranslateOptions): TranslateResult;	-	✅	✅
$t(key: Key, list: unknown[]): TranslateResult;	✅	✅	✅
$t(key: Key, list: unknown[], plural: number): TranslateResult;	-	✅	✅
$t(key: Key, list: unknown[], defaultMsg: string): TranslateResult;	-	✅	✅
$t(key: Key, list: unknown[], options: TranslateOptions): TranslateResult;	-	✅	✅
$t(key: Key, named: Record<string, unknown>): TranslateResult;	✅	✅	✅
$t(key: Key, named: NamedValue, plural: number): TranslateResult;	-	✅	✅
$t(key: Key, named: NamedValue, defaultMsg: string): TranslateResult;	-	✅	✅
$t(key: Key, named: NamedValue, options: TranslateOptions): TranslateResult;	-	✅	✅
t(key: Key): TranslateResult;	✅	✅	✅
t(key: Key, locale: Locale): TranslateResult;	✅	-	-
t(key: Key, locale: Locale, list: unknown[]): TranslateResult;	✅	-	-
t(key: Key, locale: Locale, named: Record<string, unknown>): TranslateResult;	✅	-	-
t(key: Key, plural: number): TranslateResult;	-	✅	✅
t(key: Key, plural: number, options: TranslateOptions<Locales>): TranslateResult;	-	✅	✅
t(key: Key, defaultMsg: string): TranslateResult;	-	✅	✅
t(key: Key, defaultMsg: string, options: TranslateOptions<Locales>): TranslateResult;	-	✅	✅
t(key: Key, list: unknown[]): TranslateResult;	✅	✅	✅
t(key: Key, list: unknown[], plural: number): TranslateResult;	-	✅	✅
t(key: Key, list: unknown[], defaultMsg: string): TranslateResult;	-	✅	✅
t(key: Key, list: unknown[], options: TranslateOptions<Locales>): TranslateResult;	-	✅	✅
t(key: Key, named: Record<string, unknown>): TranslateResult;	✅	✅	✅
t(key: Key, named: NamedValue, plural: number): TranslateResult;	-	✅	✅
t(key: Key, named: NamedValue, defaultMsg: string): TranslateResult;	-	✅	✅
t(key: Key, named: NamedValue, options: TranslateOptions<Locales>): TranslateResult;	-	✅	✅

v10以降から、旧APIモードはComposition APIモードと同じ$tとtのオーバーロードシグネチャを使用できます。

理由: マイグレーション後、Composition APIモードへ移行する際、異なるシグネチャにより落とし穴に陥ることがあるためです。

旧APIモードで以下のAPIを使用している場合は、破壊的変更のため別のシグネチャに変更する必要があります：

• $t(key: Key, locale: Locale): TranslateResult;
• $t(key: Key, locale: Locale, list: unknown[]): TranslateResult;
• $t(key: Key, locale: Locale, named: NamedValue): TranslateResult;
• t(key: Key, locale: Locale): TranslateResult;
• t(key: Key, locale: Locale, list: unknown[]): TranslateResult;
• t(key: Key, locale: Locale, named: NamedValue): TranslateResult;

$t(key: Key, locale: Locale): TranslateResult;

Vue I18n v9.x:

<template>
  <p>{{ $t('message.hello', 'ja') }}</p>
</template>

Vue I18n v10以降:

$t(key: Key, list: unknown[], options: TranslateOptions): TranslateResult;または$t(key: Key, named: NamedValue, options: TranslateOptions): TranslateResult;を使用します

<template>
  <p>{{ $t('message.hello', {}, { locale: 'ja' }) }}</p>
</template>

$t(key: Key, locale: Locale, list: unknown[]): TranslateResult;

Vue I18n v9.x:

<template>
  <p>{{ $t('message.hello', 'ja', ['dio']) }}</p>
</template>

Vue I18n v10以降:

$t(key: Key, list: unknown[], options: TranslateOptions): TranslateResult;を使用します

<template>
  <p>{{ $t('message.hello', ['dio'], { locale: 'ja' }) }}</p>
</template>

$t(key: Key, locale: Locale, named: NamedValue): TranslateResult;

Vue I18n v9.x:

<template>
  <p>{{ $t('message.hello', 'ja', { name: 'dio' }) }}</p>
</template>

Vue I18n v10以降:

$t(key: Key, named: NamedValue, options: TranslateOptions): TranslateResult;を使用します

<template>
  <p>{{ $t('message.hello', { name: 'dio' }, { locale: 'ja' }) }}</p>
</template>

t(key: Key, locale: Locale): TranslateResult;

Vue I18n v9.x:

const i18n = createI18n({
  legacy: true,
  // その他オプション...
})

console.log(i18n.global.t('message.hello', 'ja'))

Vue I18n v10以降:

t(key: Key, list: unknown[], options: TranslateOptions): TranslateResult;またはt(key: Key, named: NamedValue, options: TranslateOptions): TranslateResult;を使用します

const i18n = createI18n({
  legacy: true,
  // その他オプション...
})

console.log(i18n.global.t('message.hello', {}, { locale: 'ja' }))

t(key: Key, locale: Locale, list: unknown[]): TranslateResult;

Vue I18n v9.x:

const i18n = createI18n({
  legacy: true,
  // その他オプション...
})

console.log(i18n.global.t('message.hello', 'ja', ['dio']))

Vue I18n v10以降:

t(key: Key, list: unknown[], options: TranslateOptions): TranslateResult;を使用します

const i18n = createI18n({
  legacy: true,
  // その他オプション...
})

console.log(i18n.global.t('message.hello', ['dio'], { locale: 'ja' }))

t(key: Key, locale: Locale, named: NamedValue): TranslateResult;

Vue I18n v9.x:

const i18n = createI18n({
  legacy: true,
  // その他オプション...
})

console.log(i18n.global.t('message.hello', 'ja', { name: 'dio' }))

Vue I18n v10以降:

t(key: Key, named: NamedValue, options: TranslateOptions): TranslateResult;を使用します

const i18n = createI18n({
  legacy: true,
  // その他オプション...
})

console.log(i18n.global.t('message.hello', { name: 'dio' }, { locale: 'ja' }))

旧APIモードにおけるtcと$tcの非推奨化

v10では以下のAPIが非推奨になります：

• tc(key: Key | ResourceKeys): TranslateResult;
• tc(key: Key | ResourceKeys, locale: Locales | Locale): TranslateResult;
• tc(key: Key | ResourceKeys, list: unknown[]): TranslateResult;
• tc(key: Key | ResourceKeys, named: Record<string, unknown>): TranslateResult;
• tc(key: Key | ResourceKeys, choice: number): TranslateResult;
• tc(key: Key | ResourceKeys, choice: number, locale: Locales | Locale): TranslateResult;
• tc(key: Key | ResourceKeys, choice: number, list: unknown[]): TranslateResult;
• tc(key: Key | ResourceKeys, choice: number, named: Record<string, unknown>): TranslateResult;
• $tc(key: Key): TranslateResult;
• $tc(key: Key, locale: Locale): TranslateResult;
• $tc(key: Key, list: unknown[]): TranslateResult;
• $tc(key: Key, named: Record<string, unknown>): TranslateResult;
• $tc(key: Key, choice: number): TranslateResult;
• $tc(key: Key, choice: number, locale: Locale): TranslateResult;
• $tc(key: Key, choice: number, list: unknown[]): TranslateResult;
• $tc(key: Key, choice: number, named: Record<string, unknown>): TranslateResult;

理由: 旧APIモードではtと$tが複数形インターフェースをサポートしているため、これらを置き換え可能です。

v10ではtcと$tcはマイグレーションを容易にするために依然として存在します。これらはv11で完全に削除されます。

これらを使用する場合、Vue I18nはアプリケーションでコンソール警告を出力します。

tc(key: Key | ResourceKeys): TranslateResult;

Vue I18n v9.x:

const i18n = createI18n({
  legacy: true,
  // その他オプション...
})
console.log(i18n.global.tc('banana'))

Vue I18n v10以降:

t(key: Key | ResourceKeys, plural: number): TranslateResult;を使用します

const i18n = createI18n({
  legacy: true,
  // その他オプション...
})
console.log(i18n.global.t('banana', 1))

tc(key: Key | ResourceKeys, locale: Locales | Locale): TranslateResult;

Vue I18n v9.x:

const i18n = createI18n({
  legacy: true,
  // その他オプション...
})
console.log(i18n.global.tc('banana', 'ja'))

Vue I18n v10以降:

t(key: Key | ResourceKeys, plural: number, options: TranslateOptions<Locales>): TranslateResult;を使用します

const i18n = createI18n({
  legacy: true,
  // その他オプション...
})
console.log(i18n.global.t('banana', 1, { locale: 'ja' }))

tc(key: Key | ResourceKeys, list: unknown[]): TranslateResult;

Vue I18n v9.x:

const i18n = createI18n({
  legacy: true,
  // その他オプション...
})
console.log(i18n.global.tc('banana', ['dio']))

Vue I18n v10以降:

t(key: Key | ResourceKeys, list: unknown[], plural: number): TranslateResult;を使用します

const i18n = createI18n({
  legacy: true,
  // その他オプション...
})
console.log(i18n.global.t('banana', ['dio'], 1))

tc(key: Key | ResourceKeys, named: Record<string, unknown>): TranslateResult;

Vue I18n v9.x:

const i18n = createI18n({
  legacy: true,
  // その他オプション...
})
console.log(i18n.global.tc('banana', { name: 'dio' }))

Vue I18n v10以降:

t(key: Key | ResourceKeys, named: NamedValue, plural: number): TranslateResult;を使用します

const i18n = createI18n({
  legacy: true,
  // その他オプション...
})
console.log(i18n.global.t('banana', { name: 'dio' }, 1))

tc(key: Key | ResourceKeys, choice: number): TranslateResult;

Vue I18n v9.x:

const i18n = createI18n({
  legacy: true,
  // その他オプション...
})
console.log(i18n.global.tc('banana', 2))

Vue I18n v10以降:

t(key: Key | ResourceKeys, plural: number): TranslateResult;を使用します

const i18n = createI18n({
  legacy: true,
  // その他オプション...
})
console.log(i18n.global.t('banana', 2))

tc(key: Key | ResourceKeys, choice: number, locale: Locales | Locale): TranslateResult;

Vue I18n v9.x:

const i18n = createI18n({
  legacy: true,
  // その他オプション...
})
console.log(i18n.global.tc('banana', 2, 'ja'))

Vue I18n v10以降:

t(key: Key | ResourceKeys, plural: number, options: TranslateOptions<Locales>): TranslateResult;を使用します

const i18n = createI18n({
  legacy: true,
  // その他オプション...
})
console.log(i18n.global.t('banana', 2, { locale: 'ja' }))

tc(key: Key | ResourceKeys, choice: number, list: unknown[]): TranslateResult;

Vue I18n v9.x:

const i18n = createI18n({
  legacy: true,
  // その他オプション...
})
console.log(i18n.global.tc('banana', 2, ['dio']))

Vue I18n v10以降:

t(key: Key | ResourceKeys, list: unknown[], plural: number): TranslateResult;を使用します

const i18n = createI18n({
  legacy: true,
  // その他オプション...
})
console.log(i18n.global.t('banana', ['dio'], 2))

tc(key: Key | ResourceKeys, choice: number, named: Record<string, unknown>): TranslateResult;

const i18n = createI18n({
  legacy: true,
  // その他オプション...
})
console.log(i18n.global.tc('banana', 2, { name: 'dio' }))

Vue I18n v10以降:

t(key: Key | ResourceKeys, named: NamedValue, plural: number): TranslateResult;を使用します

const i18n = createI18n({
  legacy: true,
  // その他オプション...
})
console.log(i18n.global.t('banana', { name: 'dio' }, 2))

$tc(key: Key): TranslateResult;

Vue I18n v9.x:

<template>
  <p>{{ $tc('banana') }}</p>
</template>

Vue I18n v10以降:

$t(key: Key, plural: number): TranslateResult;を使用します

<template>
  <p>{{ $t('banana', 1) }}</p>
</template>

$tc(key: Key, locale: Locale): TranslateResult;

Vue I18n v9.x:

<template>
  <p>{{ $tc('banana', 'ja') }}</p>
</template>

Vue I18n v10以降:

$t(key: Key, plural: number, options: TranslateOptions): TranslateResult;を使用します

<template>
  <p>{{ $t('banana', 1, { locale: 'ja' }) }}</p>
</template>

$tc(key: Key, list: unknown[]): TranslateResult;

Vue I18n v9.x:

<template>
  <p>{{ $tc('banana', ['dio']) }}</p>
</template>

Vue I18n v10以降:

$t(key: Key, list: unknown[], plural: number): TranslateResult;を使用します

<template>
  <p>{{ $t('banana', ['dio'], 1) }}</p>
</template>

$tc(key: Key, named: Record<string, unknown>): TranslateResult;

Vue I18n v9.x:

<template>
  <p>{{ $tc('banana', { name: 'dio' }) }}</p>
</template>

Vue I18n v10以降:

$t(key: Key, named: NamedValue, plural: number): TranslateResult;を使用します

<template>
  <p>{{ $t('banana', { name: 'dio' }, 1) }}</p>
</template>

$tc(key: Key, choice: number): TranslateResult;

Vue I18n v9.x:

<template>
  <p>{{ $tc('banana', 2) }}</p>
</template>

Vue I18n v10以降:

$t(key: Key, plural: number): TranslateResult;を使用します

<template>
  <p>{{ $t('banana', 2) }}</p>
</template>

$tc(key: Key, choice: number, locale: Locale): TranslateResult;

Vue I18n v9.x:

<template>
  <p>{{ $tc('banana', 2, 'ja') }}</p>
</template>

Vue I18n v10以降:

$t(key: Key, plural: number, options: TranslateOptions): TranslateResult;を使用します

<template>
  <p>{{ $t('banana', 2, { locale: 'ja' }) }}</p>
</template>

$tc(key: Key, choice: number, list: unknown[]): TranslateResult;

Vue I18n v9.x:

<template>
  <p>{{ $tc('banana', 2, ['dio']) }}</p>
</template>

Vue I18n v10以降:

$t(key: Key, list: unknown[], plural: number): TranslateResult;を使用します

<template>
  <p>{{ $t('banana', ['dio'], 2) }}</p>
</template>

$tc(key: Key, choice: number, named: Record<string, unknown>): TranslateResult;

Vue I18n v9.x:

<template>
  <p>{{ $tc('banana', 2, { name: 'dio' }) }}</p>
</template>

Vue I18n v10以降:

$t(key: Key, named: NamedValue, plural: number): TranslateResult;を使用します

<template>
  <p>{{ $t('banana', { name: 'dio' }, 2) }}</p>
</template>

%構文の削除

v10では、%を使った名前付き補間はサポートされなくなりました。

理由: モジュロ構文はすでにv9で警告とともに非推奨になっています。

移行手順

eslint-plugin-vue-i18nを使用できます。

eslint-plugin-vue-i18nには@intlify/vue-i18n/no-deprecated-modulo-syntaxルールがあります。 https://eslint-plugin-vue-i18n.intlify.dev/rules/no-deprecated-modulo-syntax.html

eslint --fixで修正できます。

vue-i18n v10へのアップグレード前に、eslintによる移行作業が必要です。

vue-i18n-bridgeの削除

理由: vue-i18n-bridgeは、Vue 2からVue 3へのvue-i18nのマイグレーションのためのブリッジライブラリであり、Vue 2はもうEOL(エンド・オブ・ライフ)となっています。

allowCompositionオプションの削除

理由: このオプションはすでにv10で非推奨警告が出るようになっており、ドキュメントには「v10で削除予定」と記載されています。ドキュメントはこちら：https://vue-i18n.intlify.dev/guide/migration/vue3.html#about-supporting

このオプションは、v9で旧APIからComposition APIへの移行をサポートするために追加されました。

旧APIでのformatterオプションの削除

理由: このオプションはv9で警告とともに非推奨になっています。

旧APIでのpreserveDirectiveContentオプションの削除

理由: このオプションはv9で警告とともに非推奨になっています。

v-tディレクティブでのpreserve修飾子コードの削除

理由: このオプションはv9で警告とともに非推奨になっています。

旧APIでのgetChoiceIndexの削除

理由: このオプションはv9で警告とともに非推奨になっています。

翻訳コンポーネント<i18n> v8.x互換性の削除

理由: このオプションはv9で警告とともに非推奨になっています。

te動作のv8.x互換性の削除

理由: このオプションはv9で警告とともに非推奨になっています。

このオプションは、v9でte動作のv8.x互換性をサポートするために導入されました。