Changements cassants dans v12

Suppression du mode d'API hérité

Raison : Le mode d'API hérité a été déprécié dans la version v11 comme annoncé dans les changements cassants v11. C'était le mode d'API compatible avec Vue I18n v8 pour Vue 2, fourni pour faciliter la migration de v8 à v9.

Avec la version v12, le mode d'API hérité a été complètement supprimé. L'option legacy dans createI18n n'est plus disponible, et toutes les applications doivent utiliser le mode API de composition.

Ce qui est supprimé

• Option legacy: true dans createI18n
• Instance VueI18n (l'interface héritée)
• Type VueI18nOptions
• Option allowComposition (plus nécessaire puisque l'API de composition est le seul mode)
• APIs d'injection spécifiques à l'héritage qui dépendaient de l'instance VueI18n

Avant (v11)

import { createI18n } from 'vue-i18n'

// Mode d'API hérité
const i18n = createI18n({
  legacy: true, // C'était la valeur par défaut dans les versions précédentes
  locale: 'en',
  messages: {
    en: { hello: 'Hello!' },
    ja: { hello: 'こんにちは！' }
  }
})

// Accès via l'instance VueI18n
i18n.global.locale = 'ja'

<!-- Dans un composant avec l'API Options -->
<template>
  <p>{{ $t('hello') }}</p>
</template>

<script>
export default {
  mounted() {
    // Accès via this.$i18n (instance VueI18n)
    console.log(this.$i18n.locale)
    this.$i18n.locale = 'ja'
  }
}
</script>

Après (v12)

import { createI18n } from 'vue-i18n'

// Mode API de composition (seul mode disponible)
const i18n = createI18n({
  locale: 'en',
  messages: {
    en: { hello: 'Hello!' },
    ja: { hello: 'こんにちは！' }
  }
})

// Accès via l'instance Composer
i18n.global.locale.value = 'ja'

<!-- Utilisation de l'API de composition -->
<template>
  <p>{{ t('hello') }}</p>
</template>

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

const { t, locale } = useI18n()

// Changer la locale
locale.value = 'ja'
</script>

<!-- API Options avec useI18n dans setup -->
<template>
  <p>{{ t('hello') }}</p>
</template>

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

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

Migration

1. Supprimer l'option legacy: true de createI18n
2. Modifier l'accès à la locale de i18n.global.locale à i18n.global.locale.value
3. Remplacer l'utilisation de this.$i18n par useI18n() dans la fonction setup
4. Remplacer this.$t() par t() provenant de useI18n()

Pour un guide de migration détaillé, voir :

• Migration du mode d'API hérité vers le mode API de composition
• Utilisation de l'API de composition

Suppression de la directive personnalisée v-t

Raison : Cette directive personnalisée avait déjà été dépréciée dans les avertissements concernant sa suppression dans la version v12. La documentation indique : https://vue-i18n.intlify.dev/guide/migration/breaking11.html#deprecate-custom-directive-v-t

Modification de la signature de MissingHandler

Raison : L'API getCurrentInstance() a été dépréciée dans Vue 3.6+. Le type MissingHandler recevait auparavant un ComponentInternalInstance comme troisième paramètre, mais cela n'est plus disponible.

Avant (v11)

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

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

Après (v12)

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

const i18n = createI18n({
  missing: (locale, key, uid, type) => {
    // uid est maintenant passé directement comme nombre
    console.warn(`Missing: ${key}`, uid)
  }
})

Migration

Remplacer le paramètre instance par 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)
    }
  })