Migración en Vue 3

Migración a la API de Composición desde la API heredada

Resumen

Vue I18n admite ambos estilos: el modo de API heredada y el modo de API de Composición. El modo de API heredada es del estilo Options API, mientras que el modo de API de Composición permite usar la API de Composición de Vue que es capaz de componerse con funciones.

El modo de API heredada es casi compatible con Vue I18n v8.x heredado, lo que facilita la migración de aplicaciones Vue a Vue 3. Vue 3 admite el estilo Options API, por lo tanto, las aplicaciones existentes de Vue 2 serán casos donde se migrarán a Vue 3.

Vue 3 te permite crear aplicaciones Vue combinando estilos Options API y Composition API, pero Vue I18n no ha permitido una mezcla de estos estilos de API desde el lanzamiento inicial v9, por lo tanto, puedes utilizar solo uno u otro estilo de API.

Desarrollar una aplicación Vue con una mezcla de estilos Options API y Composition API no es un proyecto deseable desde un punto de vista de mantenimiento del código. Esto se debe a que el costo de mantener este tipo de código es elevado. Sin embargo, hay ventajas en usar ambos estilos. En particular, la migración de estilo de API es más fácil para hacerlo paso a paso, ya que funciona incluso cuando se implementan en ambos estilos de API.

Desde Vue I18n v9.2, también puede usarse el modo de API heredada con el modo de API de Composición.

Acerca del soporte

AVISO

Este soporte para migración será eliminado en la próxima versión principal v10. Si tu proyecto de aplicación Vue 3 aún no ha sido migrado, por favor migre a v9 y luego actualice a v10.

Limitaciones

AVISO

Debes entenderlo como una función limitada para migración.

• La API de Composición en modo de API heredada no admite SSR
• Si quieres usar correctamente la API de Composición de Vue I18n (por ejemplo t) en el contexto de la función setup directamente no en <template>, necesitas llamarla mediante el contexto de devolución de llamada de nextTick.

Cómo migrar

createI18n

Necesitas especificar allowComposition: true en las opciones de createI18n. El siguiente ejemplo:

import { createI18n } from 'vue-i18n'

const i18n = createI18n({
  locale: 'en',
  allowComposition: true, // ¡necesitas especificar esto!
  messages: {
    en: {
      hello: 'hello!'
    },
    ja: {
      hello: 'こんにちは！'
    }
  }
})

console.log(i18n.allowComposition) // la salida es true

useI18n en Componente Vue

Opción setup

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

export default defineComponent({
  name: 'Hello',
  setup() {
    const { t } = useI18n() // usar en ámbito global
    return { t }
  }
})
</script>

<template>
  <p>{{ $t('hello') }}</p>
  <p>{{ t('hello') }}</p>
</template>

<script setup>

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

const { t } = useI18n() // usar en ámbito global
</script>

<template>
  <p>{{ $t('hello') }}</p>
  <p>{{ t('hello') }}</p>
</template>