La creación de aplicaciones para personas de diferentes partes del mundo presenta desafíos como el soporte para múltiples configuraciones regionales y cómo integrarlo en su aplicación. Recuerdo que la primera vez que enfrenté este desafío, tuve que crear una aplicación que iba a tener varios idiomas (inglés, yoruba y francés). Esta fue la primera vez que me pregunté cómo se crearon las aplicaciones que admitían múltiples 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 a su usuario elegir entre todas las configuraciones regionales disponibles sin que tenga que hacer demasiado.

He reunido una aplicación simple para el propósito de este tutorial y se puede encontrar en Github.

Este artículo requiere conocimientos básicos del marco Vue.js. Para aquellos que buscan comenzar con Vuejs, les recomiendo que comiencen desde su documentación oficial.

¿Qué son i18n y Vue-i18n?

Internacionalización (i18n)

La internacionalización (a veces abreviada a "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íficas, un proceso llamado localización. Imagine que está creando un producto para personas en los EE. UU. Y Francia, sin internacionalización, esto significaría construir 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 entorno local de su elección (inglés o francés). La internacionalización de su aplicación viene con beneficios tales 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. Facilita y simplifica el mantenimiento del producto.
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 Vista I18n enchufar. Integra fácilmente algunas características de localización a su aplicación Vue.js. Se puede agregar a su aplicación de una de las siguientes maneras:

• Por descarga directa / CDN - usando esto Enlace CDN para el último lanzamiento en NPM.

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

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

• Al instalar desde NPM o Yarn.

npm install vue-i18n
// or
yarn add vue-i18n

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

vue add i18n

Configuración de Vue-i18n en su aplicación

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

vue add i18n

Al ejecutar este comando, se le solicitará que seleccione las opciones de configuración para elegir. Para este tutorial, he seguido adelante para seleccionar todas las opciones predeterminadas para configurar este complemento. Esto se ve así:

Opciones de configuración para el complemento Vue I18n. (Vista previa grande)

Echemos un vistazo a lo que hacen:

1. La primera opción es establecer la configuración regional predeterminada en la que estaría la aplicación y, en este caso, me adelanté para configurarla en inglés.
2. La segunda opción es establecer una configuración regional alternativa para la aplicación y la alternativa servirá como una configuración regional alternativa para su aplicación si no proporciona una traducción en otra ubicación y seleccioné inglés. De esto se hablará más adelante en este artículo.
3. La tercera opción es elegir un directorio para almacenar todos los local archivos json que se utilizarán para la localización en la aplicación y seleccioné la opción predeterminada que es local.
4. La última opción es habilitar la localización basada en componentes en Componentes de archivo único. Esto significa decidir si desea o no habilitar la traducción dentro de un componente y lo 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.

Vue-i18n archivos de configuración. (Vista previa grande)

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

carpeta / locales

Esta carpeta sirve como base para todas las configuraciones regionales que se utilizarían en nuestra aplicación. Si abre esta carpeta, encontrará un es.json archivo y esto es porque en fue mi localidad 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/es.json

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

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

Aquí tenemos un message propiedad que podemos usar en cualquier parte de nuestro archivo usando este formato:

<p> {{ $t('message') }}

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

Lo que vue-i18n muestra en el navegador. (Vista previa grande)

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

HolaI18n.vue

Este archivo sirve como ejemplo de cómo usar el complemento en Componentes de archivo único. Si inspecciona el archivo, encontrará un <i18n> etiqueta en la sección de script de este componente. De acuerdo con la documentación que necesitaría instalar cargador vue-i18n 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) propiedad que tiene un hello propiedad con un valor. Esto se ve así:

<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 encontrado en el es.json archivo dentro del locales carpeta. En la sección de plantilla de este componente, tenemos:

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

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

Formateo de 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ía 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 formato.vue, también vamos a agregar 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" id="name" v-model="name" /> <input type="submit" :disabled="name.length < 1" value="send" /> <label for="hideMessage" v-if="showMessage"> <input type="checkbox" name="hideMessage" id="hideMessage" v-model="showMessage" /> Show Message </label> </form> </section>
</template>
<script>
export default { data() { return { name: "", showMessage: false }; }
};
</script>
<style>
form { 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 no hemos agregado) a esta página. Dentro de <p> etiqueta, utilizamos el formato con nombre para agregar un mensaje personalizado para el usuario que solo se muestra si (v-show) showMessage es verdad. Tenemos un formulario con un campo de entrada (conectado a nuestros datos usando 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 envío que alterna showMessage a true.

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

Ahora, agreguemos esto hello para nuestro es.json archivo (su archivo de configuración regional predeterminado). Esto se ve así:

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

Aquí, formattingTitle es el título de nuestra página de formato mientras hello utiliza el formato de nombre que usamos en la misma página.

Finalmente, agreguemos esta página a nuestro archivo de enrutador. Esto se ve así:

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 división de código de 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 a /formatting en nuestro navegador, deberíamos ver esto:

Página de formato actual. (Vista previa grande)

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

Formateo con nombre en acción. (Vista previa grande)

Formato HTML

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

Agregue lo siguiente a su archivo de configuración regional.

{ "htmlText": "<h1>HTML Rocks ❤❤</h1>"
}

En nuestros formato.vue archivo, agregue las siguientes líneas de código después de su formulario a la template sección de este archivo.

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

Aquí, hacemos uso de Vue's Directiva HTML para unir nuestro texto a esto div. Si lo revisa en su navegador, debería ver el valor de htmlText renderizado y si inspecciona el elemento div, debería ver el h1 elemento anidado dentro de este div.

Representación del formato HTML. (Vista previa grande)

Cambio entre local

El cambio de una configuración regional a otra se puede hacer 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, puede hacer referencia a un texto en esa configuración regional de dos maneras:

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

Esto rendiría hello, pero en Deutsch suponiendo que lo tengamos definido en esa configuración regional.

• Usando globalmente this.$i18n.locale:

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

Agreguemos otro caso de uso a nuestra aplicación. Lo primero que vamos a hacer es agregar un nuevo archivo a nuestra carpeta de configuración regional y nombrarlo de.json luego agregue 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": "

 "}

We already have the en version of everything here in our en.json file but we want to be able to switch between en and de so we add the Deutsch translation of this to our de.json file.

Lo siguiente sería agregar un botón que cambie entre en y de dentro de nuestro formato.vue expediente. Agregue esto a su archivo:

<template> <section> <!-- existing div element --> <div v-html="$t('htmlText')"></div> <button @click="switchLocale">Switch to {{locale}}</button> </section>
</template>
<script>
export 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 en a de o viceversa. También tenemos un locale variable que cambia dinámicamente de Inglés a Alemán. En la sección de script, hemos agregado un locale variable a la función de datos de este componente. Finalmente tenemos un switchLocale método que se llama cada vez que un usuario hace clic en el botón. Este método cambia el valor de this.$i18n.locale utilización de un operador ternario para determinar su propio valor entre de y en basado en que locale es. Esto significa que si locale is Inglés, this.$i18n.locale se mostrarán en y si this.$i18n.locale is de, locale se mostrarán Inglés.

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

Formato de página en la configuración regional predeterminada. (Vista previa grande)

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

Formatear la página en un entorno local modificado (de). (Vista previa grande)

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

Formato de página con mensaje personalizado en Deutsch. (Vista previa grande)

Localización y Pluralización de reserva

Localización de reserva

Hay casos en los que no tendría el valor de una propiedad disponible en un entorno local seleccionado. En lugar de que su aplicación se bloquee como resultado, obtiene 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 es.json archivo:

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

Y en nuestro de.json archivo, solo vamos a agregar esto:

{ "fallbackLocale": "Fallback-Lokalisierung"
}

En nuestros formato.vue archivo, 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 fallbackLocale dentro de un h1 etiqueta que sirve como encabezado para esta página. También tenemos un p etiqueta que tiene un nombre de propiedad placeholder dentro del complemento pero con otro parámetro, de que, como hemos visto anteriormente, es una forma de decirle al complemento que obtenga esa propiedad en la configuración regional especificada (de en este caso).

Ahora, deberíamos ver esto en nuestro navegador.

Formato de página con texto de reserva. (Vista previa grande)

Podemos notar que aunque establecemos placeholder a de, el texto que se muestra está en en. Esto es porque aunque hemos establecido placeholder para mostrar en otra configuración regional, no se traduce en la configuración regional seleccionada y, por lo tanto, el complemento mostrará esta propiedad en la configuración regional predeterminada al imprimir un mensaje de advertencia en su consola.

Advertencia de retroceso en la consola. (Vista previa grande)

Pluralización

Este es el proceso de dar 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 tienen en su carrito. Puede manejar la pluralización en su complemento utilizando una tubería | separador entre todas las formas plurales en su localidad.

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

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

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

Y en tu formato.vue archivo, en lugar de usar $t(''), usaríamos $tc('') que también acepta un número como segundo parámetro ( n que agregamos en nuestro archivo de configuración regional). Entonces, si agregamos las siguientes líneas de código a nuestra plantilla.

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

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

Implementación de la pluralización. (Vista previa grande)

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 del sitio web: no te pierdas en la traducción

Localización basada en componentes

Hay casos en los que solo necesitará algunas palabras u oraciones solo 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 es útil. La localización basada en componentes es el proceso de traducir texto / grupo de textos dentro de un componente, por lo que solo está 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 hello en más de un lugar en 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 nuestro Componentes carpeta, deberíamos ver un Holai18n.vue archivo 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 <i18n> .

<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 hello, greetings y placeholder, todos los cuales también se traducen en el global es.json archivo.

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>
</template>
<script>
export default { name: "HelloI18n", props: ["name"]
};
</script>

Aquí, tenemos un encabezado que muestra una traducción greetings texto, una etiqueta de párrafo que utiliza formato con nombre para mostrar un mensaje personalizado hello texto de un name variable que se pasaría al componente como accesorio.

Finalmente vamos a mostrar este componente en formato.vue. Vamos a importarlo en este archivo:

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

Aquí importamos el Holai18n.vue componente utilizando @ alias y definirlo dentro del components propiedad de nuestro componente.

Y agréguelo a nuestra plantilla así:

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

Definimos un valor de apoyo name dentro de Helloi18n componente, por lo que le pasamos un valor de name que obtendríamos del campo de entrada en el formato.vue .

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

Localización basada en componentes. (Vista previa grande)

Podemos ver que aunque estamos usando lo mismo greetings, hello y placeholder texto del archivo de traducción global, la traducción en el componente es exactamente lo que definimos dentro del <i18n> etiqueta.

Conclusión

La Vista I18n El complemento tiene muchos casos de uso como:

• Localización de DataTime,
• Localización de números,
• Sintaxis de mensaje de configuración regional,
• 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 juegue con algunos de ellos para familiarizarse con ellos.

Recursos

(ks, ra, yk, il)

Fuente: https://www.smashingmagazine.com/2020/06/internationalization-vue-i18n/