Más i18n con Vue: formato y alternativas

Hoy cubriremos cómo varias opciones de formato disponibles con elvista-i18ncomplemento para internacionalización (i18n). También cubriremos cómo manejar los cambios de respaldo cuando no hay una cadena disponible para una configuración regional. Usaremos el complementovista-i18ncomplemento escrito por Kazuya Kawaguchi, y este artículo se basa en este anterior , que presenta el usovista-i18npara la internacionalización (i18n) en aplicaciones Vue.js.

vista-i18nofrece varias formas de formatear las cadenas de tu aplicación. Incluso podemos definir un formateador personalizado si no te gusta el estilo predeterminado. También podemos proporcionar alternativas que son útiles cuando nos faltan cadenas para una configuración regional determinada.

Configuración de la aplicación

Comenzaremos asumiendo que ya has creado un proyecto simple.Vistaaplicación. Ahora agregaremos elvista-i18nComplementa usando tu método preferido:

# Yarn$ yarn add vue-i18n# npm$ npm install vue-i18n# Vue CLI 3.x+$ vue add i18n

Continuaremos donde lo dejamos en la última publicación. Omitiré el código del SelectLocale /componente en esa publicación, ya que no cambiará, pero siéntete libre de incluirlo si estás siguiendo el artículo de la última vez.

principal.js

import Vue from 'vue';import VueI18n from 'vue-i18n';import App from './App.vue';Vue.use(VueI18n);const messages = {  en: {    message: {      hello: 'Hello, {name}!'    }  },  de: {    message: {      hello: 'Guten Tag, {name}!'    }  }};const i18n = new VueI18n({  locale: 'en',  messages});new Vue({  render: h = h(App),  i18n}).$mount('#app');

Aplicación.vue

template  div    HelloGator /  /div/templatescriptimport HelloGator from './components/HelloGator.vue';export default {  name: 'App',  components: {    HelloGator  }}/script

componentes/HelloGator.vue

template  div{{ $t('message.hello', { name: 'Gator' }) }}/div/templatescriptexport default { name: 'Gator' }/script

Funciones de formato

Ya hemos cubierto el formato básico quevista-i18nSe utiliza con el código anterior. El complemento ofrece un par de funciones más relacionadas con el formato, como listas, HTML y formateadores personalizados.

Liza

Elvista-i18nEl complemento también proporciona una forma de formatear usando listas de variables. Pasaremos una matriz de cadenas como segundo parámetro, a $tlas que se puede acceder en nuestra aplicación a través de su índice:

principal.js

const messages = {  en: {    message: {      hello: 'Hello, {name}!',      counting: 'One: {0}, Two: {1}, Three: {2}'    }  },  de: {    message: {      hello: 'Guten Tag, {name}!',      counting: 'Eins: {0}, Zwei: {1}, Drei: {2}'    }  }};

Ahora agreguemos nuestra message.countingcadena a HelloGator.vue:

Plantilla: componentes/HelloGator.vue

div  {{ $t('message.hello', { name: 'Gator' }) }}  br /  {{ $t('message.counting', [' ', ' ', ' ']) }}/div

HTML

Elvista-i18nEl complemento también nos permite usar HTML directamente en las cadenas de nuestra aplicación. Cualquier HTML estándar se mostrará en el navegador.

Agregaremos la message.welcomecadena de la aplicación a continuación, envuelta en una strongetiqueta:

principal.js

const messages = {  en: {    message: {      hello: 'Hello, {name}!',      counting: 'One: {0}, Two: {1}, Three: {2}',      welcome: 'strongWelcome!/strong'    }  },  de: {    message: {      hello: 'Guten Tag, {name}!',      counting: 'Eins: {0}, Zwei: {1}, Drei: {2}',      welcome: 'strongWilkommen!/strong'    }  }};

Ahora agreguemos nuestra cadena de aplicación HTML a HelloGator.vue:

Plantilla: componentes/HelloGator.vue

div  {{ $t('message.hello', { name: 'Gator' }) }}  br /  {{ $t('message.counting', [' ', ' ', ' ']) }}  br /  {{ $t('message.welcome') }}/div

Ahora deberías ver un texto en negrita.¡Bienvenido!o¡Bienvenidos!dependiendo de la localidad.

Ruby on Rails

También hay soporte listo para usar para i18n estilo Ruby on Rails, si esa es su preferencia:

const messages = {  en: {    message: {      hello: 'Hello, %{name}!',      ...    }  },  ...}

Costumbre

Probablemente no necesitarás esta función, pero lavista-i18nEl complemento también te permite definir tu propio formateador personalizado. No lo explicaremos en detalle aquí, pero en su mayoría implica escribir una función que reemplazaría la $tfunción de traducción que ofrece el complemento. Asegúrate de consultar la documentación de formato personalizado si deseas obtener más información.

Respaldos

Elvista-i18nEl complemento nos permite recurrir fácilmente a las cadenas de aplicación de otra configuración regional si a la configuración regional actual le falta alguna.

Agreguemos otra cadena de aplicación llamada message.descriptionque solo estará disponible en inglés. También especificaremos fallbackLanguageque el complemento use las cadenas de aplicación en inglés si no están disponibles en otra configuración regional:

principal.js

const messages = {  en: {    message: {      hello: 'Hello, {name}!',      description: 'This sentence is in English!'    }  },  de: {    message: {      hello: 'Guten Tag, {name}!'    }  }};const i18n = new VueI18n({  locale: 'en',  fallbackLocale: 'en',  messages});

Ahora agreguemos nuestro mensaje solo en inglés a HelloGator.vue:

Plantilla: componentes/HelloGator.vue

div  {{ $t('message.hello', { name: 'Gator' }) }}  br /  {{ $t('message.description') }}/div

Notarás que al cambiar la configuración regional, deel primer mensaje estará en alemán y el segundo en inglés. Esto es muy útil si quieres comenzar a agregar compatibilidad con una nueva configuración regional pero aún no tienes todas las cadenas de la aplicación definidas.

Terminando

Con todas las opciones de formato que ofrecevista-i18nEs poco frecuente que tengas que implementar una lógica de formato personalizada por tu cuenta. Hay suficiente soporte listo para usar para cubrir la mayoría de los casos de uso de formato relacionados con la internacionalización de tu aplicación. Como siempre, ¡asegúrate de consultar la documentación!