Retroceso (Fallback)

fallbackLocale: '<lang>' para elegir qué idioma usar cuando tu idioma preferido no tiene una traducción.

Retroceso implícito usando locales

Si se proporciona un locale que contiene un territorio y un dialecto opcional, se activa automáticamente el retroceso implícito.

Por ejemplo, de-DE-bavarian haría retroceder

1. de-DE-bavarian
2. de-DE
3. de

Para suprimir el retroceso automático, agrega el signo de exclamación ! como sufijo, por ejemplo de-DE!

Retroceso explícito con un solo locale

A veces algunos elementos no estarán traducidos a algunos idiomas. En este ejemplo, el elemento hello está disponible en inglés pero no en japonés:

const messages = {
  en: {
    hello: 'Hello, world!'
  },
  ja: {
  }
}

Si quieres usar elementos de en cuando un elemento no está disponible en tu locale deseado, establece la opción fallbackLocale en createI18n:

const i18n = createI18n({
  locale: 'ja',
  fallbackLocale: 'en',
  messages
})

Plantilla:

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

Salida:

<p>Hello, world!</p>

Por defecto, hacer retroceder a fallbackLocale genera dos advertencias en la consola:

[intlify] No se encontró la clave 'hello' en los mensajes del locale 'ja'.
[intlify] Se hace retroceder para traducir la clave 'hello' con el locale 'en'.

El primer mensaje de advertencia se imprime la clave, ya que la clave dada a la función de traducción $t no está en los mensajes del locale ja y el segundo mensaje de advertencia que aparece cuando haces retroceder para resolver mensajes localizados desde los mensajes del locale en. Estos mensajes de advertencia se muestran para ayudar en la depuración usando Vue I18n.

NOTA

Estos mensajes de advertencia solo se muestran en modo de desarrollo (process.env.NODE_ENV !== 'production') por defecto, no para producción.

Para suprimir la primera advertencia (No se encontró la clave...), establece silentTranslationWarn: true en el modo de API heredada o establece missingWarn: false en el modo de API de Composición al inicializar createI18n.

Para suprimir la segunda advertencia (Se hace retroceder...), establece silentFallbackWarn: true en el modo de API heredada o establece fallbackWarn: false en el modo de API de Composición al inicializar createI18n.

Retroceso explícito con un array de locales

Es posible establecer más de un locale de retroceso usando un array de locales. Por ejemplo

fallbackLocale: [ 'fr', 'en' ],

Retroceso explícito con mapas de decisión

Si se requieren mapas de decisión más complejos para locales de retroceso, es posible definir mapas de decisión con locales de retroceso correspondientes.

Usando el siguiente mapa de decisión:

fallbackLocale: {
  /* 1 */ 'de-CH':   ['fr', 'it'],
  /* 2 */ 'zh-Hant': ['zh-Hans'],
  /* 3 */ 'es-CL':   ['es-AR'],
  /* 4 */ 'es':      ['en-GB'],
  /* 5 */ 'pt':      ['es-AR'],
  /* 6 */ 'default': ['en', 'da']
},

Resultará en las siguientes cadenas de retroceso:

locale	cadenas de retroceso
'de-CH'	de-CH > fr > it > en > da
'de'	de > en > da
'zh-Hant'	zh-Hant > zh-Hans > zh > en > da
'es-SP'	es-SP > es > en-GB > en > da
'es-SP!'	es-SP > en > da
'fr'	fr > en > da
'pt-BR'	pt-BR > pt > es-AR > es > en-GB > en > da
'es-CL'	es-CL > es-AR > es > en-GB > en > da

Interpolación de retroceso

Establece fallbackFormat: true para hacer interpolación de plantillas en claves de traducción cuando tu idioma no tiene una traducción para una clave.

Dado que las claves para las traducciones son cadenas de texto, puedes usar un mensaje legible por el usuario (para un idioma en particular) como clave. Ejemplo:

const messages = {
  ja: {
    'Hello, world!': 'こんにちは、世界!'
  }
}

Esto es útil porque no necesitas especificar una traducción para la cadena "Hello, world!" al inglés.

De hecho, incluso puedes incluir parámetros de plantilla en una clave. Junto con fallbackFormat: true, esto te permite omitir escribir plantillas para tu idioma "base"; las claves son tus plantillas.

const messages = {
  ru: {
    'Hello {name}': 'Здравствуйте {name}'
  }
}

const i18n = createI18n({
  locale: 'ru',
  fallbackLocale: 'en',
  fallbackFormat: true,
  messages
})

Cuando la plantilla es como la siguiente:

<p>{{ $t('Hello {name}', { name: 'John' }) }}</p>
<p>{{ $t('The weather today is {condition}!', { condition: 'sunny' }) }}</p>

La siguiente salida se producirá:

<p>Здравствуйте, John</p>
<p>The weather today is sunny!</p>