Agregar internacionalización a su aplicación Vue.js tiene muchos casos de uso y en este tutorial aprenderemos cómo hacerlo con el complemento Vue I18n y cómo configurarlo en nuestra aplicación.

La creación de aplicaciones para personas de diferentes partes del mundo conlleva desafíos, como la compatibilidad con múltiples configuraciones regionales y cómo integrarlas en su aplicación. Recuerdo que la primera vez que enfrenté este desafío, tuve que crear una aplicación que tuviera varios idiomas (inglés, yoruba y francés). Esta fue la primera vez que me pregunté cómo se creaban las aplicaciones que admitían varios idiomas y también cómo descubrí la "internacionalización".

En este tutorial, aprenderemos sobre la internacionalización y cómo implementarla en nuestra aplicación Vue usando el complemento Vue I18n mediante la creación de una aplicación simple que use este complemento. Este complemento le ayuda a configurar su aplicación para que funcione con múltiples configuraciones regionales y le permite al usuario elegir entre todas las configuraciones regionales disponibles sin que usted tenga que hacer demasiado.

He creado una aplicación sencilla para este tutorial y se puede encontrar en Github .

Este artículo requiere conocimientos básicos del marco Vue.js. Para aquellos que quieran iniciarse en Vuejs, les recomiendo empezar desde su documentación oficial .

Reaccionar Internacionalización

¿Cómo podemos construir una aplicación front-end React internacionalizada? Yury Dymov explica cómo se puede detectar la configuración regional del usuario, guardarla en la cookie, permitir que el usuario cambie su configuración regional, traducir la interfaz de usuario y representar monedas en sus formatos apropiados.Leer un artículo relacionado →

¿Qué son i18n y Vue-i18n?

Internacionalización (i18n)

La internacionalización (a veces abreviada como “I18N, que significa “I – ​​dieciocho letras – N”) es el proceso de planificación e implementación de productos y servicios para que puedan adaptarse fácilmente a idiomas y culturas locales específicos, un proceso llamado localización . Imagine que está creando un producto para personas en EE. UU. y Francia, sin internacionalización, esto significaría crear dos aplicaciones separadas en diferentes lugares para ejecutarse en diferentes dominios (versión en inglés en Amazingproduct.us y versión en francés en Amazingproduct.fr).

Aquí es donde entra en juego la internacionalización. Ayuda a las personas de ambos países a utilizar fácilmente la aplicación en el idioma de su elección (inglés o francés). Internacionalizar su aplicación conlleva beneficios como:

1. Código fuente único para todos los idiomas del producto.
2. Mayor aceptación y satisfacción del cliente en el país.
3. Hace que el mantenimiento del producto sea más fácil y sencillo.
4. Reducción de tiempo, costo y esfuerzo de localización (L10n).

Internacionalización en Vue

La internacionalización se puede implementar en Vue utilizando el complemento Vue I18n . Integra fácilmente algunas funciones de localización a su aplicación Vue.js. Se puede agregar a su solicitud de una de las siguientes maneras:

• Mediante descarga directa/CDN: utilizando este enlace CDN para obtener la última versión de NPM.

Después de lo cual se incluirá en la sección principal de su archivo html.

script src="https://unpkg.com/vue-i18n/dist/vue-i18n.js"/script

• Instalando desde NPM o Yarn.

npm install vue-i18n// oryarn add vue-i18n

• Agregándolo usando Vue Cli 3.x (necesita Vue cli 3.x).

vue add i18n

Configurando Vue-i18n en su aplicación

Para configurar este complemento en su aplicación, usaremos el método Vue CLI. Eso se puede hacer usando este comando:

vue add i18n

Al ejecutar este comando, se le pedirá que seleccione las opciones de configuración para elegir. Para este tutorial, seguí seleccionando todas las opciones predeterminadas para configurar este complemento. Esto se parece a esto:

Echemos un vistazo a lo que hacen:

1. La primera opción es configurar la configuración regional predeterminada en la que se ubicaría la aplicación y, en este caso, la configuré en inglés.
2. La segunda opción es establecer una configuración regional alternativa para la aplicación y la configuración regional alternativa servirá como una configuración regional de respaldo para su aplicación si no proporciona una traducción en otra configuración regional y yo seleccioné inglés. Hablaremos de esto más adelante en este artículo.
3. La tercera opción es elegir un directorio para almacenar todos los archivos json locales que se usarán para la localización en la aplicación y seleccioné la opción predeterminada que es la configuración regional.
4. La última opción es habilitar la localización basada en componentes en Componentes de archivo único. Esto significa decidir si desea habilitar o no la traducción dentro de un componente y yo la habilité en mi configuración. Hablaremos de esto más adelante en el artículo.

Una vez hecho esto, su complemento se configurará para funcionar en su aplicación y se le notificará sobre algunos archivos adicionales que este complemento ha agregado a su aplicación.

Echemos un vistazo a algunos de los archivos que se agregaron a nuestra aplicación para que podamos comprender su propósito:

/carpeta local

Esta carpeta sirve como base para todas las configuraciones regionales que se usarían en nuestra aplicación. Si abre esta carpeta, encontrará un archivo en.json y esto se debe a que enfue mi configuración regional seleccionada para este proyecto. Lo que esto significa es que el archivo que encontrará dentro de su carpeta local depende de su elección al configurar el complemento.

/locales/en.json

Este archivo sirve para agregar textos en una configuración regional particular (nombre de archivo, por ejemplo, en, fr) de modo que cuando un usuario cambie a esa configuración regional, su aplicación obtenga todos los textos del archivo JSON que coincida con la configuración regional. De forma predeterminada, este archivo contiene una propiedad que sirve como demostración para configurar su aplicación; se ve así:

{  "message": "hello i18n !!"}

Aquí tenemos una messagepropiedad que podemos usar en cualquier parte de nuestro archivo usando este formato:

p {{ $t('message') }} /p

Si vemos esto en nuestro navegador, lo que veríamos sería el valor de messagey no "mensaje".

Ahora, si cambia el valor de messageen su archivo, se actualizará en su navegador en consecuencia.

HolaI18n.vue

Este archivo sirve como ejemplo de cómo utilizar el complemento en Componentes de archivo único . Si inspecciona el archivo, encontrará una i18netiqueta en la sección de secuencia de comandos de este componente. Según la documentación, necesitaría instalar vue-i18n-loader para usar esta etiqueta, pero no tiene que preocuparse por esto si la agregó como una opción de configuración al instalar el complemento. Dentro de esta etiqueta, tenemos un objeto que contiene en(o su configuración regional predeterminada) una propiedad que tiene una hellopropiedad con un valor. Esto se parece a esto:

i18n{  "en": {    "hello": "Hello i18n in SFC!"  }}/i18n

Lo que esto significa es que le ha dado a un componente un valor que es diferente del valor que se encuentra en el archivo en.json dentro de la carpeta locales . En la sección de plantilla de este componente, tenemos:

template  div    p{{ $t('hello') }}/p  /div/template

Aquí vemos $t('')que esta es la sintaxis para hacer referencia a textos ( t significa textos) de nuestro complemento, y en este componente, estamos usando el valor de helloque agregamos dentro de la i18netiqueta. Si revisamos nuestro navegador, deberíamos ver ¡Hola i18n en SFC! incluso si no hay ninguna hellopropiedad en el archivo en.json . Esto se llama localización basada en componentes y profundizaremos en ello más adelante en este artículo .

Formatear textos

Este complemento viene con la opción de formatear sus textos de diferentes maneras, lo que puede ser útil para mejorar la experiencia del usuario y veremos algunos de estos formatos.

Formato con nombre

Este tipo de opción de formato le permite agregar un valor dinámico dentro de su texto que se definirá al representar el texto en su navegador. Este tipo de formato es útil cuando desea agregar un texto personalizado con la información de un usuario al iniciar sesión o después de realizar una acción. Para ver cómo funciona, agregaremos una nueva página a nuestra aplicación y la llamaremos formatting.vue . También agregaremos esto como una ruta en nuestra aplicación.

Primero, creemos el archivo y agreguemos las siguientes líneas de código:

template  section    h1{{$t('formattingTitle')}}/h1    p v-show="showMessage"{{ $t('hello', {name: name}) }}/p    form @submit.prevent="showMessage = true"      label for="name"{{ $t('name') }}/label      input type="text" name="name" v-model="name" /      input type="submit" :disabled="name.length  1" value="send" /      label for="hideMessage" v-if="showMessage"        input type="checkbox" name="hideMessage" v-model="showMessage" / Show Message      /label    /form  /section/templatescriptexport default {  data() {    return {      name: "",      showMessage: false    };  }};/scriptstyleform {  width: 100%;  max-width: 300px;  margin: 20px auto;}label {  display: block;  width: 100%;  text-align: left;  margin-bottom: 5px;}input[type="text"] {  width: 100%;  height: 30px;  border-radius: 3px;  border: 1px solid #eee;  padding-left: 10px;  box-sizing: border-box;  margin-bottom: 10px;}input[type="submit"] {  width: 80px;  height: 30px;  border-radius: 3px;  border: 0;}/style

En la sección de plantilla de este archivo, utilizamos este complemento para agregar un título (que aún debemos agregar) a esta página. Dentro de la petiqueta, utilizamos el formato nombrado para agregar un mensaje personalizado para el usuario que solo se muestra si ( v-show) showMessagees verdadero. Tenemos un formulario con un campo de entrada (conectado a nuestros datos mediante v-model) que acepta un nombre que se pasa a nuestro complemento cuando el usuario envía el formulario. Tenemos una casilla de verificación que oculta el mensaje y un botón de enviar que cambia showMessagea true.

En la sección script, tenemos namey showMessagedentro nuestros datos. Ambas variables se utilizan en nuestro formulario para almacenar la entrada del usuario y alternar el mensaje respectivamente.

Ahora, agreguemos esto helloa nuestro archivo en.json (su archivo local predeterminado). Esto se parece a esto:

{  "formattingTitle": "How to format your texts",  "name": "What is your Name?",  "hello": "Hi {name}, today is a good day"}

Aquí formattingTitleestá el título de nuestra página de formato mientras hellohace uso del formato de nombre que usamos en la misma página.

Finalmente, agreguemos esta página a nuestro archivo de enrutador. Esto se parece a esto:

import Vue from 'vue'import Router from 'vue-router'import Home from './views/Home.vue'Vue.use(Router)export default new Router({  mode: 'history',  base: process.env.BASE_URL,  routes: [{      path: '/',      name: 'home',      component: Home    },    {      path: '/formatting',      name: 'formatting',      // route level code-splitting      // this generates a separate chunk (about.[hash].js) for this route      // which is lazy-loaded when the route is visited.      component: () = import( /* webpackChunkName: "format" */ './views/formatting.vue')    }  ]})

En el archivo del enrutador, utilizamos la división de código a nivel de ruta para cargar nuestro componente en su ruta (es decir /formatting), que es otra forma de agregar un componente a una ruta en Vue.

Ahora, si navegamos /formattingen nuestro navegador, deberíamos ver esto:

Ahora, cuando ingresa un valor en el campo de entrada y presiona Intro, verá un texto personalizado encima del campo de su formulario.

Formato HTML

Esto implica utilizar HTML válido en su texto en lugar de texto sin formato. Esto puede resultar útil cuando intenta mostrar texto con formato HTML al usuario. Veamos cómo funciona eso en nuestra aplicación.

Agregue lo siguiente a su archivo local.

{  "htmlText": "h1HTML Rocks ❤❤/h1"}

En nuestro archivo formatting.vue , agregue las siguientes líneas de código después de su formulario a la templatesección de este archivo.

div v-html="$t('htmlText')"/div

Aquí, utilizamos la directiva HTML de Vue para vincular nuestro texto a este archivo div. Si lo revisa en su navegador, debería ver el valor de htmlTextrenderizado y si inspecciona el elemento div, debería ver el h1elemento anidado dentro de este div.

Cambiar entre localidades

Se puede cambiar de una configuración regional a otra agregando un archivo con este formato a su carpeta de configuración regional.

locale abbrevation + json//eg en.json, fr.json, ru.json, de.json

Después de crear este archivo y agregar un texto (por ejemplo, 'hola') que queremos usar en nuestra aplicación, puedes hacer referencia a un texto en esa configuración regional de dos maneras:

• Por texto:

p{{ $t('hello', 'de') }} /p

Esto representaría hello, pero en alemán, suponiendo que lo tengamos definido en esa ubicación.

• Utilizando globalmente this.$i18n.locale:

console.log(this.$i18n.locale)// prints 'en.json' because 'en' is my selected localethis.$i18n.locale = 'de'// sets your locale to 'de'

Agreguemos otro caso de uso a nuestra aplicación. Lo primero que haremos es agregar un nuevo archivo a nuestra carpeta local y llamarlo de.json y luego agregar este objeto de línea al archivo.

{  "home": "Zuhause",  "formatting": "Formatieren Sie Ihre Texte",  "formattingTitle": "So formatieren Sie Ihre Texte",  "name": "Wie heißen Sie?",  "hello": "Hallo {name}, heute ist ein guter Tag",  "htmlText": "
HTML Rocks ❤❤
"}

Ya tenemos la enversión de todo aquí en nuestro archivo en.json , pero queremos poder cambiar entre ellas en, depor lo que agregamos la traducción al alemán de esto a nuestro archivo de.json .

Lo siguiente sería agregar un botón que cambie entre eny dedentro de nuestro archivo formatting.vue . Añade esto a tu archivo:

template  section    !-- existing div element --    div v-html="$t('htmlText')"/div    button @click="switchLocale"Switch to {{locale}}/button  /section/templatescriptexport default {  data() {    return {      name: "",      showMessage: false,      locale: "Deutsch"    };  },  methods: {    switchLocale() {      this.$i18n.locale = this.locale === "English" ? "en" : "de";      this.locale = this.$i18n.locale === "en" ? "Deutsch" : "English";    }  }};/script

En la sección de plantilla, hemos agregado un botón con un evento de clic que cambia la configuración regional de enhacia deo viceversa. También tenemos una localevariable que cambia dinámicamente de inglés a alemán . En la sección de script, hemos agregado una localevariable a la función de datos de este componente. Finalmente, tenemos un switchLocalemétodo que se llama cada vez que un usuario hace clic en el botón. Este método cambia el valor del this.$i18n.localeuso de un operador ternario para determinar su propio valor entre dey enen función de lo que localees. Esto significa que si localees inglés , this.$i18n.localeserá eny si this.$i18n.localees de, localeserá inglés .

Si ve esto en su navegador, debería ver esto:

Y cuando haces clic en el botón, deberías ver que cada texto en tu página; en este componente y globalmente, ha cambiado de la configuración regional predeterminada a Deutsch.

Si ingresa su nombre y envía el formulario, también debería ver que ha sido traducido y se ve así:

Localización alternativa y pluralización

Localización alternativa

Hay casos en los que no tendría el valor de una propiedad disponible en una localidad seleccionada. Como resultado, en lugar de que su aplicación falle, recupera el valor del texto de la configuración regional predeterminada e imprime un error de advertencia en su consola. Veamos un ejemplo.

Vamos a agregar este texto a nuestro archivo en.json :

  {  "fallbackLocale": "Fallback Localization",  "placeholder": "This is the fallback text"}

Y en nuestro archivo de.json , solo agregaremos esto:

{  "fallbackLocale": "Fallback-Lokalisierung"}

En nuestro archivo formatting.vue , agregue este fragmento de código dentro del archivo:

template  section    !-- last button --    button @click="switchLocale"Switch to {{locale}}/button    div      h1{{ $t('fallbackLocale') }}/h1    /div      /section/template/style

Aquí, hemos agregado un texto con el nombre de la propiedad fallbackLocaledentro de una h1etiqueta que sirve como encabezado para esta página. También tenemos una petiqueta que tiene un nombre de propiedad placeholderdentro del complemento pero con otro parámetro, deque como vimos anteriormente, es una forma de decirle al complemento que busque esa propiedad en la configuración regional especificada ( deen este caso).

Ahora deberíamos ver esto en nuestro navegador.

Podemos notar que aunque lo configuramos placeholderen de, el texto que se muestra está en en. Esto se debe a que, aunque hemos configurado placeholderque se muestre en otra configuración regional, no está traducido en la configuración regional seleccionada y, por lo tanto, el complemento mostrará esta propiedad en la configuración regional predeterminada mientras imprime un mensaje de advertencia en su consola.

Pluralización

Este es el proceso de darle forma plural a una palabra. Por ejemplo, está creando una aplicación de comercio electrónico y desea representar un artículo en el carrito de compras de un usuario en función del número que tiene en su carrito. Puede manejar la pluralización en su complemento usando un |separador de tuberías entre todas las formas plurales en su localidad.

Para ver cómo funciona, agreguemos esto a nuestro archivo en.json .

{  "developer": "no developer | one developer | {n} developers"}

Tenga en cuenta que la variable se puede llamar de cualquier forma, pero yo la he llamado n.

Y en su archivo formatting.vue , en lugar de usar $t(''), usaríamos $tc('')el cual también acepta un número como segundo parámetro ( nque agregamos en nuestro archivo local). Entonces, si agregamos las siguientes líneas de código a nuestra plantilla.

p{{ $tc('developer', 0) }}/pp{{ $tc('developer', 1) }}/pp{{ $tc('developer', 2) }}/p

Aquí, configuramos el primer valor para nque sea cero, el segundo se establece en 1 y el último se establece en 2. Veamos cómo se ve esto en nuestro navegador.

Podemos ver que el complemento ha traducido cada valor y ha utilizado el plural apropiado según el valor de n.

Lectura recomendada : Cómo realizar la localización de sitios web: no se pierda en la traducción

Localización basada en componentes

Hay casos en los que solo necesitará algunas palabras u oraciones en un componente o casos en los que un texto global tiene un significado diferente en un componente en particular y, en casos como este, la localización basada en componentes resulta útil. La localización basada en componentes es el proceso de traducir texto/grupo de textos dentro de un componente, haciéndolo así sólo disponible dentro de dicho componente. Una cosa que debemos tener en cuenta es que la traducción disponible dentro de su componente tiene prioridad sobre la traducción global, de modo que si, por ejemplo, está utilizando helloen más de un lugar de su aplicación y desea que tenga un texto más largo o más personalizado. para un componente, solo necesita crear una configuración de localización para ese componente y definir su nueva traducción de hello.

Si abrimos nuestra carpeta Componentes , deberíamos ver un archivo Helloi18n.vue que se agregó a nuestra aplicación cuando instalamos el complemento; este componente se agregó para servir como guía sobre cómo funciona la localización basada en componentes.

Para entender mejor, agreguemos la siguiente traducción dentro de nuestro i18nelemento.

i18n{  "en": {    "hello": "Hello, {name}, this is i18n in SFC!",    "greetings": "Component-Based Localization",    "placeholder": "This is a component-based fallback text"  }}/i18n

Aquí, agregamos una traducción para helloy greetings, placeholdertodos los cuales también se traducen en el archivo global en.json .

Y en nuestro componente, agreguemos lo siguiente:

template  div    h1{{ $t("greetings") }}/h1    p v-if="name.length  0"{{ $t('hello', {name: name }) }}/p    p{{ $t('placeholder') }}/p  /div/templatescriptexport default {  name: "HelloI18n",  props: ["name"]};/script

Aquí, tenemos un encabezado que muestra un greetingstexto traducido, una etiqueta de párrafo que utiliza formato con nombre para mostrar un hellotexto personalizado de una namevariable que se pasaría al componente como accesorio.

Finalmente, mostraremos este componente en formatting.vue . Importémoslo a este archivo:

script// @ is an alias to /srcimport HelloI18n from "@/components/HelloI18n.vue";export default {  // existing code  components: {    HelloI18n  }};

Aquí, importamos el componente Helloi18n.vue@ usando un alias y lo definimos dentro de la componentspropiedad de nuestro componente.

Y agréguelo a nuestra plantilla así:

template  section    !-- existing code --    HelloI18n :name="name" /  /section/template

Definimos un valor de propiedad namedentro del Helloi18ncomponente, por lo que le pasamos un valor nameque obtendríamos del campo de entrada en la página formatting.vue .

Ahora, si vemos esta página en nuestro navegador, deberíamos ver esto:

Podemos ver que aunque estamos usando el mismo greetingstexto hellodel placeholderarchivo de traducción global, la traducción en el componente es exactamente lo que definimos dentro de la i18netiqueta.

Conclusión

El complemento Vue I18n tiene muchos casos de uso como:

• localización de DataTime,
• localización de números,
• Sintaxis de mensajes locales,
• Traducción de carga diferida, etc.

Todo lo cual ayuda a lograr la internacionalización completa de su aplicación, por lo que le recomendaría que revise la documentación completa y pruebe algunas de ellas para familiarizarse con ellas.

Recursos

• “¿ Qué es i18n? ”, Lingopuerto
• “ internacionalización (I18N) ”, Margaret Rouse, WhatIs.com
• “ Vue I18n ”, un complemento de internacionalización para Vue.js creado por Kazuya Kawaguchi

(ks, ra, yk, il)Explora más en

• javascript
• Complementos
• Aplicaciones
• Internacionalización
• vista