Changements cassants dans v10

Activation par défaut de la compilation JIT

Raison : Les problèmes CSP peuvent être résolus et les ressources dynamiques peuvent être prises en charge

La compilation JIT a été introduite dans v9.3. Elle n'était pas activée par défaut.

Nuxt I18n, qui intègre vue-i18n, a déjà cette fonctionnalité activée et stable par défaut. https://i18n.nuxtjs.org/docs/options/compilation#jit

Pour utiliser cette fonctionnalité dans Vue I18n, nous devions utiliser un bundler et @intlify/unplugin-vue-i18n pour activer l'indicateur __INTLIFY_JIT_COMPILATION__. Par défaut dans la compilation JIT, cet indicateur n'est plus nécessaire à partir de v10.

Si vous n'utilisez pas encore la compilation JIT et que vous migrez vers v10 ou ultérieur, vous devrez reconstruire votre application une fois.

Pour les détails sur la compilation JIT, voir "Optimisation".

Modification de la signature surchargée de $t et t pour le mode API hérité

Dans Vue I18n v9, l'interface est différente entre le mode API Composition et le mode API hérité des signatures surchargées de $t et t.

En particulier, la signature de $t et t dans le mode API hérité dispose de moins de signatures surchargées que dans le mode API Composition, comme indiqué ci-dessous :

Signatures surchargées de $t et t	API héritée v9	API héritée v10	API Composition 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;	-	✅	✅

À partir de v10, le mode API hérité peut utiliser la même signature surchargée de $t et t que le mode API Composition.

Raison : Suite à cette migration, lors de la migration vers le mode API Composition, nous tombons parfois dans un piège en raison de la différence de signature.

Si vous utilisez les API suivantes dans le mode API hérité, vous devez changer de signature en raison des changements cassants :

• $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 ou ultérieur :

utiliser $t(key: Key, list: unknown[], options: TranslateOptions): TranslateResult; ou $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 ou ultérieur :

utiliser $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 ou ultérieur :

utiliser $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,
  // options divers ...
})

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

Vue I18n v10 ou ultérieur :

utiliser t(key: Key, list: unknown[], options: TranslateOptions): TranslateResult; ou t(key: Key, named: NamedValue, options: TranslateOptions): TranslateResult;

const i18n = createI18n({
  legacy: true,
  // options divers ...
})

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,
  // options divers ...
})

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

Vue I18n v10 ou ultérieur :

utiliser t(key: Key, list: unknown[], options: TranslateOptions): TranslateResult;

const i18n = createI18n({
  legacy: true,
  // options divers ...
})

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,
  // options divers ...
})

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

Vue I18n v10 ou ultérieur :

utiliser t(key: Key, named: NamedValue, options: TranslateOptions): TranslateResult;

const i18n = createI18n({
  legacy: true,
  // options divers ...
})

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

Dépréciation de tc et $tc pour le mode API hérité

Les API suivantes sont dépréciées dans v10 :

• 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;

Raison : Le mode API hérité dispose du support des interfaces plurielles pour t et $t, donc elles peuvent être remplacées.

Dans v10, tc et $tc existent toujours afin de faciliter la migration. Elles seront complètement supprimées dans v11.

Si vous les utilisez, Vue I18n affichera un avertissement dans la console de votre application.

tc(key: Key | ResourceKeys): TranslateResult;

Vue I18n v9.x :

const i18n = createI18n({
  legacy: true,
  // options divers ...
})
console.log(i18n.global.tc('banana'))

Vue I18n v10 ou ultérieur :

utiliser t(key: Key | ResourceKeys, plural: number): TranslateResult;

const i18n = createI18n({
  legacy: true,
  // options divers ...
})
console.log(i18n.global.t('banana', 1))

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

Vue I18n v9.x :

const i18n = createI18n({
  legacy: true,
  // options divers ...
})
console.log(i18n.global.tc('banana', 'ja'))

Vue I18n v10 ou ultérieur :

utiliser t(key: Key | ResourceKeys, plural: number, options: TranslateOptions<Locales>): TranslateResult;

const i18n = createI18n({
  legacy: true,
  // options divers ...
})
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,
  // options divers ...
})
console.log(i18n.global.tc('banana', ['dio']))

Vue I18n v10 ou ultérieur :

utiliser t(key: Key | ResourceKeys, list: unknown[], plural: number): TranslateResult;

const i18n = createI18n({
  legacy: true,
  // options divers ...
})
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,
  // options divers ...
})
console.log(i18n.global.tc('banana', { name: 'dio' }))

Vue I18n v10 ou ultérieur :

utiliser t(key: Key | ResourceKeys, named: NamedValue, plural: number): TranslateResult;

const i18n = createI18n({
  legacy: true,
  // options divers ...
})
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,
  // options divers ...
})
console.log(i18n.global.tc('banana', 2))

Vue I18n v10 ou ultérieur :

utiliser t(key: Key | ResourceKeys, plural: number): TranslateResult;

const i18n = createI18n({
  legacy: true,
  // options divers ...
})
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,
  // options divers ...
})
console.log(i18n.global.tc('banana', 2, 'ja'))

Vue I18n v10 ou ultérieur :

utiliser t(key: Key | ResourceKeys, plural: number, options: TranslateOptions<Locales>): TranslateResult;

const i18n = createI18n({
  legacy: true,
  // options divers ...
})
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,
  // options divers ...
})
console.log(i18n.global.tc('banana', 2, ['dio']))

Vue I18n v10 ou ultérieur :

utiliser t(key: Key | ResourceKeys, list: unknown[], plural: number): TranslateResult;

const i18n = createI18n({
  legacy: true,
  // options divers ...
})
console.log(i18n.global.t('banana', ['dio'], 2))

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

const i18n = createI18n({
  legacy: true,
  // options divers ...
})
console.log(i18n.global.tc('banana', 2, { name: 'dio' }))

Vue I18n v10 ou ultérieur :

utiliser t(key: Key | ResourceKeys, named: NamedValue, plural: number): TranslateResult;

const i18n = createI18n({
  legacy: true,
  // options divers ...
})
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 ou ultérieur :

utiliser $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 ou ultérieur :

utiliser $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 ou ultérieur :

utiliser $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 ou ultérieur :

utiliser $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 ou ultérieur :

utiliser $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 ou ultérieur :

utiliser $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 ou ultérieur :

utiliser $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 ou ultérieur :

utiliser $t(key: Key, named: NamedValue, plural: number): TranslateResult;

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

Suppression de la syntaxe modulo %

L'interpolation nommée utilisant le modulo % n'est plus prise en charge dans v10.

Raison : La syntaxe module a déjà été dépréciée dans v9 avec un avertissement.

Pour la migration

Vous pouvez utiliser eslint-plugin-vue-i18n.

eslint-plugin-vue-i18n possède la règle @intlify/vue-i18n/no-deprecated-modulo-syntax. https://eslint-plugin-vue-i18n.intlify.dev/rules/no-deprecated-modulo-syntax.html

Vous pouvez corriger cela en utilisant eslint --fix

Vous devez avoir migré avec eslint avant de passer à vue-i18n v10

Suppression de vue-i18n-bridge

Raison : vue-i18n-bridge est une bibliothèque de pont pour migrer vue-i18n de Vue 2 vers Vue 3, et Vue 2 n'est plus dans sa phase de support.

Suppression de l'option allowComposition

Raison : Cette option a déjà été dépréciée dans un avertissement concernant sa suppression dans v10. La documentation dit : https://vue-i18n.intlify.dev/guide/migration/vue3.html#about-supporting

Cette option a été ajoutée pour supporter la migration du mode API hérité vers l'API Composition dans v9.

Suppression de l'option formatter sur l'API héritée

Raison : Cette option a été dépréciée dans un avertissement dans v9.

Suppression de l'option preserveDirectiveContent sur l'API héritée

Raison : Cette option a été dépréciée dans un avertissement dans v9.

Suppression des codes modificateurs preserve sur la directive v-t

Raison : Cette option a été dépréciée dans un avertissement dans v9.

Suppression de getChoiceIndex sur l'API héritée

Raison : Cette option a été dépréciée dans un avertissement dans v9.

Suppression de la compatibilité du composant de traduction <i18n> v8.x

Raison : Cette option a été dépréciée dans un avertissement dans v9.

Suppression du comportement de te v8.x compatibility

Raison : Cette option a été dépréciée dans un avertissement dans v9.

Cette option a été introduite dans ce problème pour prendre en charge la compatibilité du comportement de te v8.x dans v9