Migración desde Vue 2

`vue-i18n-bridge`

NOTA

vue-i18n-bridge no se proporcionará en la versión 10 debido al fin de vida de Vue 2. La versión 9.13 será la última.

¿Qué es `vue-i18n-bridge`?

vue-i18n-bridge es un puente para hacer que la actualización sea lo más fácil posible entre [email protected] o posterior y [email protected].

Puede utilizarse en aplicaciones Vue 2 que ya haya construido con [email protected] o posterior.

Y, también algunas características son retroportadas desde [email protected]:

Vue I18n Composition API, que está impulsado por @vue/composition-api y vue-demi
Sintaxis de formato de mensaje, que está impulsada por @intlify/message-compiler

Instalación

Gestor de paquetes

npmyarnpnpm

npm install vue-i18n-bridge

yarn add vue-i18n-bridge

pnpm add vue-i18n-bridge

Debe instalar los siguientes paquetes antes de usar esta biblioteca:

vue-i18n: >= v8.26.1 < v9
vue-demi: >= v0.13.5
@vue/composition-api: >= v1.2.0 (si va a usar Vue 2.6)

CDN

Para Vue 2.7:

Incluya vue-i18n-bridge después de vue, vue-demi y se instalará automáticamente.

html

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://unpkg.com/vue-i18n@8/dist/vue-i18n.min.js"></script>
<script src="https://unpkg.com/[email protected]/lib/index.iife.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vue-i18n-bridge.global.prod.js"></script>

Para Vue 2.6:

Incluya vue-i18n-bridge después de vue, @vue/composition-api, vue-demi y se instalará automáticamente.

html

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://unpkg.com/vue-i18n@8/dist/vue-i18n.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@vue/[email protected]"></script>
<script src="https://unpkg.com/[email protected]/lib/index.iife.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vue-i18n-bridge.global.prod.js"></script>

Uso

Composition API

Para Vue 2.7:

import Vue from 'vue'
import { createApp } from 'vue-demi'
import { createI18n, useI18n } from 'vue-i18n-bridge'

Vue.use(VueI18n, { bridge: true }) // debe especificar la opción '{ bridge: true }' al instalar vue-i18n

// Las opciones `createI18n` son casi iguales a las de vue-i18n ([email protected])
const i18n = createI18n({
  legacy: false,
  locale: 'ja',
  messages: {
    en: {
      message: {
        hello: 'hello, {name}!'
      }
    },
    ja: {
      message: {
        hello: 'こんにちは、{name}！'
      }
    }
  }
}, VueI18n) // `createI18n` que proporciona `vue-i18n-bridge` tiene un segundo argumento, debe pasar el constructor `VueI18n` que proporciona `vue-i18n`

const app = createApp({
 setup() {
  // Las opciones `useI18n` son casi iguales a las de vue-i18n ([email protected])
  const { t, locale } = useI18n()
  // ... hacer algo

  return { t, locale }
 }
})

app.use(i18n) // debe instalar la instancia `i18n` creada por `createI18n`
app.mount('#app')

Para Vue 2.6:

import Vue from 'vue'
import VueCompositionAPI, { createApp } from '@vue/composition-api'
import { createI18n, useI18n } from 'vue-i18n-bridge'

Vue.use(VueCompositionAPI)
Vue.use(VueI18n, { bridge: true }) // debe especificar la opción '{ bridge: true }' al instalar vue-i18n

// Las opciones `createI18n` son casi iguales a las de vue-i18n ([email protected])
const i18n = createI18n({
  legacy: false,
  locale: 'ja',
  messages: {
    en: {
      message: {
        hello: 'hello, {name}!'
      }
    },
    ja: {
      message: {
        hello: 'こんにちは、{name}！'
      }
    }
  }
}, VueI18n) // `createI18n` que proporciona `vue-i18n-bridge` tiene un segundo argumento, debe pasar el constructor `VueI18n` que proporciona `vue-i18n`

const app = createApp({
 setup() {
  // Las opciones `useI18n` son casi iguales a las de vue-i18n ([email protected])
  const { t, locale } = useI18n()
  // ... hacer algo

  return { t, locale }
 }
})

app.use(i18n) // debe instalar la instancia `i18n` creada por `createI18n`
app.mount('#app')

Legacy API

Para Vue 2.7:

import Vue from 'vue'
import { createI18n, useI18n } from 'vue-i18n-bridge'

Vue.use(VueI18n, { bridge: true }) // debe especificar la opción '{ bridge: true }' al instalar vue-i18n

// Las opciones `createI18n` son casi iguales a las de vue-i18n ([email protected])
const i18n = createI18n({
  locale: 'ja',
  messages: {
    en: {
      message: {
        hello: 'hello, {name}!'
      }
    },
    ja: {
      message: {
        hello: 'こんにちは、{name}！'
      }
    }
  }
}, VueI18n) // `createI18n` que proporciona `vue-i18n-bridge` tiene un segundo argumento, debe pasar el constructor `VueI18n` que proporciona `vue-i18n`

Vue.use(i18n) // debe instalar la instancia `i18n` creada por `createI18n`

const app = new Vue({ i18n })
app.$mount('#app')

Para Vue 2.6:

import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
import { createI18n, useI18n } from 'vue-i18n-bridge'

Vue.use(VueCompositionAPI)
Vue.use(VueI18n, { bridge: true }) // debe especificar la opción '{ bridge: true }' al instalar vue-i18n

// Las opciones `createI18n` son casi iguales a las de vue-i18n ([email protected])
const i18n = createI18n({
  locale: 'ja',
  messages: {
    en: {
      message: {
        hello: 'hello, {name}!'
      }
    },
    ja: {
      message: {
        hello: 'こんにちは、{name}！'
      }
    }
  }
}, VueI18n) // `createI18n` que proporciona `vue-i18n-bridge` tiene un segundo argumento, debe pasar el constructor `VueI18n` que proporciona `vue-i18n`

Vue.use(i18n) // debe instalar la instancia `i18n` creada por `createI18n`

const app = new Vue({ i18n })
app.$mount('#app')

Para TypeScript:

import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
import { createI18n, useI18n, castToVueI18n } from 'vue-i18n-bridge'

Vue.use(VueCompositionAPI)
Vue.use(VueI18n, { bridge: true })

// necesita convertir la instancia `i18n`
const i18n = castToVueI18n(createI18n({
  locale: 'ja',
  messages: {
    en: {
      message: {
        hello: 'hello, {name}!'
      }
    },
    ja: {
      message: {
        hello: 'こんにちは、{name}！'
      }
    }
  }
}, VueI18n))

Vue.use(i18n)

const app = new Vue({ i18n })
app.$mount('#app')

Uso del módulo UMD en el navegador

Para Vue 2.7

const { createApp } = VueDemi // exportado UMD nombrado como `VueDemi`
const { createI18n, useI18n } = VueI18nBridge // exportado UMD nombrado como `VueI18nBridge`

Vue.use(VueI18n, { bridge: true })

const i18n = createI18n({
  locale: 'ja',
  messages: {
    // ...
  }
}, VueI18n)

const app = createApp({}, {
  // ...
})
app.use(i18n)
app.mount('#app') // elemento contenedor de la aplicación Vue

Para Vue 2.6

const { createApp } = VueCompositionAPI // exportado UMD nombrado como `VueCompositionAPI`
const { createI18n, useI18n } = VueI18nBridge // exportado UMD nombrado como `VueI18nBridge`

Vue.use(VueCompositionAPI)
Vue.use(VueI18n, { bridge: true })

const i18n = createI18n({
  locale: 'ja',
  messages: {
    // ...
  }
}, VueI18n)

const app = createApp({}, {
  // ...
})
app.use(i18n)
app.mount('#app') // elemento contenedor de la aplicación Vue

Limitaciones

En modo Legacy API, no puede usar la nueva sintaxis de formato de mensaje al portarlo desde vue-i18n
- solo es posible en modo Composition API
En modo Legacy API, no puede usar componentes retroportados que sean los siguientes componentes al portarlos desde vue-i18n
- Componentes de traducción: <i18n-t>
- Componentes de formato de fecha/hora: <i18n-d>
- Componentes de formato de número: <i18n-n>
En modo Composition API, las siguientes APIs con prefijo $ están en el ámbito global
- $t
- $d
- $n

Explicación de las diferentes compilaciones

En el directorio dist/ del paquete npm encontrará muchas compilaciones diferentes de vue-i18n-bridge. Aquí hay una vista general de qué archivo dist debería usarse dependiendo del caso de uso.

Desde CDN o sin un empaquetador

vue-i18n-bridge(.runtime).global(.prod).js:
- Para uso directo mediante <script src="..."> en el navegador. Expone el global VueI18nBridge
- Compilación del formato de mensaje en el navegador:
  - vue-i18n-bridge.global.js es la compilación "completa" que incluye tanto el compilador como el tiempo de ejecución, por lo tanto, permite compilar formatos de mensaje sobre la marcha
  - vue-i18n-bridge.runtime.global.js contiene solo el tiempo de ejecución y requiere que los formatos de mensaje se precompilen durante un paso de construcción
- Incorpora todos los paquetes internos principales de Vue I18n, es decir, es un único archivo sin dependencias de otros archivos. Esto significa que debe importar todo desde este archivo y solo desde él para asegurarse de obtener la misma instancia de código
- Contiene ramas prod/dev codificadas, y la compilación prod está pre-minificada. Use los archivos *.prod.js para producción

AVISO

Las compilaciones globales no son compilaciones UMD. Están construidas como IIFEs y están destinadas únicamente para uso directo mediante <script src="...">.

vue-i18n-bridge(.runtime).esm-browser(.prod).js:
- Para uso mediante importaciones nativas de módulos ES (en el navegador mediante <script type="module">)
- Comparte el mismo comportamiento de compilación en tiempo de ejecución, inserción de dependencias e instrucciones codificadas de prod/dev con la compilación global

Con un empaquetador

vue-i18n-bridge(.runtime).esm-bundler.js:
- Para uso con empaquetadores como webpack, rollup y parcel
- Deja ramas prod/dev con guardias process.env.NODE_ENV (deben ser reemplazadas por el empaquetador)
- No envía compilaciones minimizadas (deben hacerse junto con el resto del código tras empaquetar)
- Importa dependencias (por ejemplo, @intlify/core-base, @intlify/message-compiler)
  - Las dependencias importadas también son compilaciones esm-bundler y a su vez importan sus dependencias (por ejemplo, @intlify/message-compiler importa @intlify/shared)
  - Esto significa que puede instalar/importar estas dependencias individualmente sin terminar con diferentes instancias de estas dependencias, pero debe asegurarse de que todas resuelvan a la misma versión
- Compilación de mensajes locales en el navegador:
  - vue-i18n-bridge.runtime.esm-bundler.js es solo tiempo de ejecución, y requiere que todos los mensajes locales se precompilen. Esta es la entrada por defecto para empaquetadores (a través del campo module en package.json) porque cuando se usa un empaquetador, las plantillas se precompilan típicamente (por ejemplo, en archivos *.json)
  - vue-i18n-bridge.esm-bundler.js (por defecto): incluye el compilador de tiempo de ejecución. Úselo si usa un empaquetador pero aún quiere compilación de mensajes locales (por ejemplo, plantillas mediante cadenas JavaScript en línea). Para usar esta compilación, cambie su declaración de importación a: import { createI18n } from "vue-i18n-bridge/dist/vue-i18n-bridge.esm-bundler.js";

AVISO

Si usa vue-i18n-bridge.runtime.esm-bundler.js, necesitará precompilar todos los mensajes locales, y puede hacerlo con archivos .json (.json5) o .yaml, bloques personalizados i18n para gestionar recursos i18n. Por lo tanto, puede precompilar todos los mensajes locales con un empaquetador y el siguiente cargador / plugin.

@intlify/unplugin-vue-i18n

Para Node.js (Servidor)

vue-i18n-bridge.cjs(.prod).js:
- Para uso en Node.js mediante require()
- Si empaqueta su aplicación con webpack con target: 'node' y externa apropiadamente vue-i18n-bridge, esta es la compilación que se cargará
- Los archivos dev/prod están precompilados, pero el archivo apropiado se requiere automáticamente basado en process.env.NODE_ENV

`vue-i18n-composable`

La API de composición está soportada desde Vue 3, y puede utilizar el plugin oficial @vue/composition-api para hacer disponible la API de composición en Vue 2.

La API de composición de Vue I18n también está disponible en Vue 2 usando el plugin vue-i18n-composable.

Sobre cómo usarlo, vea aquí

AVISO

vue-i18n-composable permite que la API principal de Vue I18n v8.x funcione con la API de composición. Todas las API de composición proporcionadas en Vue I18n v9 no están disponibles.

general

Variables

Functions

Interfaces

Type Aliases

vue

Interfaces

Migración desde Vue 2

`vue-i18n-bridge`

¿Qué es `vue-i18n-bridge`?

Instalación

Gestor de paquetes

CDN

Uso

Composition API

Legacy API

Uso del módulo UMD en el navegador

Para Vue 2.7

Para Vue 2.6

Limitaciones

Explicación de las diferentes compilaciones

Desde CDN o sin un empaquetador

Con un empaquetador

Para Node.js (Servidor)

`vue-i18n-composable`

Migración desde Vue 2 ​

vue-i18n-bridge ​

¿Qué es vue-i18n-bridge? ​

Instalación ​

Gestor de paquetes ​

CDN ​

Uso ​

Composition API ​

Legacy API ​

Uso del módulo UMD en el navegador ​

Para Vue 2.7 ​

Para Vue 2.6 ​

Limitaciones ​

Explicación de las diferentes compilaciones ​

Desde CDN o sin un empaquetador ​

Con un empaquetador ​

Para Node.js (Servidor) ​

vue-i18n-composable ​

Migración desde Vue 2

`vue-i18n-bridge`

¿Qué es `vue-i18n-bridge`?

Instalación

Gestor de paquetes

CDN

Uso

Composition API

Legacy API

Uso del módulo UMD en el navegador

Para Vue 2.7

Para Vue 2.6

Limitaciones

Explicación de las diferentes compilaciones

Desde CDN o sin un empaquetador

Con un empaquetador

Para Node.js (Servidor)

`vue-i18n-composable`