Cambios Rotos en v12

Eliminación del modo de API heredado

Razón: El modo de API heredado fue descontinuado en v11 como se anunció en los cambios rotos de v11. Era el modo de API compatible con Vue I18n v8 para Vue 2, proporcionado para facilitar la migración desde v8 a v9.

Con v12, el modo de API heredado ha sido eliminado completamente. La opción legacy en createI18n ya no está disponible, y todas las aplicaciones deben usar el modo de API de Composición.

Qué se eliminó

• Opción legacy: true en createI18n
• Instancia VueI18n (la interfaz heredada)
• Tipo VueI18nOptions
• Opción allowComposition (ya no es necesaria ya que API de Composición es el único modo)
• APIs de inyección específicas del modo heredado que dependían de la instancia VueI18n

Antes (v11)

import { createI18n } from 'vue-i18n'

// Modo de API heredado
const i18n = createI18n({
  legacy: true, // Esto era el valor predeterminado en versiones anteriores
  locale: 'en',
  messages: {
    en: { hello: 'Hello!' },
    ja: { hello: 'こんにちは！' }
  }
})

// Acceso mediante instancia VueI18n
i18n.global.locale = 'ja'

<!-- En componente con Options API -->
<template>
  <p>{{ $t('hello') }}</p>
</template>

<script>
export default {
  mounted() {
    // Acceso mediante this.$i18n (instancia VueI18n)
    console.log(this.$i18n.locale)
    this.$i18n.locale = 'ja'
  }
}
</script>

Después (v12)

import { createI18n } from 'vue-i18n'

// Modo de API de Composición (el único modo disponible)
const i18n = createI18n({
  locale: 'en',
  messages: {
    en: { hello: 'Hello!' },
    ja: { hello: 'こんにちは！' }
  }
})

// Acceso mediante instancia Composer
i18n.global.locale.value = 'ja'

<!-- Usando API de Composición -->
<template>
  <p>{{ t('hello') }}</p>
</template>

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

const { t, locale } = useI18n()

// Cambiar idioma
locale.value = 'ja'
</script>

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

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

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

Migración

1. Eliminar la opción legacy: true de createI18n
2. Cambiar el acceso al idioma de i18n.global.locale a i18n.global.locale.value
3. Reemplazar el uso de this.$i18n con useI18n() en la función setup
4. Reemplazar this.$t() con t() de useI18n()

Para una guía detallada de migración, ver:

• Migración del modo de API heredado al modo de API de Composición
• Uso de API de Composición

Eliminación de la directiva personalizada v-t

Razón: Esta directiva personalizada ya había sido descontinuada en una advertencia sobre ser eliminada en v12. La documentación dice, https://vue-i18n.intlify.dev/guide/migration/breaking11.html#deprecate-custom-directive-v-t

Cambio en la firma de MissingHandler

Razón: Vue 3.6+ descontinúa la API getCurrentInstance(). El tipo MissingHandler anteriormente recibía un ComponentInternalInstance como tercer parámetro, pero esto ya no está disponible.

Antes (v11)

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

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

Después (v12)

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

const i18n = createI18n({
  missing: (locale, key, uid, type) => {
    // uid se pasa ahora directamente como número
    console.warn(`Missing: ${key}`, uid)
  }
})

Migración

Reemplazar el parámetro instance con 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)
   }
 })