Historial de página

Para guardar nuestras cadenas de texto, y poder tenerlas en diferentes idiomas, haremos uso de la libreríalibrería Vue i18n. Antes de nada, para empezar a usarlo tenemos que descargar el paquete:

...

Para inicializar i18n, crearemos la instancia en el archivo src/locales/index.js, de la siguiente manera:

...

Además, al crear la instancia de Vue, tendremos que importarlo e incluirlo en elel new VueVue del archivomain.js:

import i18n from '@/locales'
 
new Vue({
  router,
  store,
  i18n,
  render: h => h(App)
}).$mount("#app");

...

La forma más intuitiva de gestionar los diferentes locales disponibles, será tener cada uno en un archivo dentro dede src/locales. Si por ejemplo tenemos español e inglés, tendremostendremos es.jsyjs y en.js, respectivamente, y seguirán la siguiente estructura:

// es.js
export default {
  helloworld: "¡Hola mundo!",
  test: "Esto es una prueba",
};
 
// en.js
export default {
  helloworld: "Hello world!",
  test: "This is a test",
};

Por último, tendremos que juntar los diferentes locales en un objeto, en, el como hemos visto previamente, los dos archivos se importan en el src/locales/index.js:

...

...

, se juntan en una variable y se pasa en la creación de la instancia de VueI18n.

En los propios componentes

...

Para esto, es necesario añadir elel i18n-loader:

npm install @kazupon/vue-i18n-loader

Después, en la raíz del proyecto, debemos crear el archivoarchivo vue.config.js, que contenga lo siguiente:

...

Con esto, nos podemos definir los mensajes en un bloque entre tagstags <i18n>, por ejemplo:

<i18n>
{
  "es": {
    "helloworld": "¡Hola mundo!",
    "test": "Esto es una prueba"
  },
  "en": {
    "helloworld": "Hello world!",
    "test": "This is a test"
  }
}
</i18n>

...

Para mostrar las cadenas de texto, lo haremos concon $t('nombreCadena'):

<Column :header="$t('tituloColumna')" />
<span>
  {{ $t('texto') }}
</span>
...
unaFuncion() {
	...
	this.$toast.add({ severity: "error", summary: "Error", detail: this.$t('error_descarga'), life: 10000 });
}

...

Podemos poner parámetros en los mensajes de declarados en en.js y es.js de forma:

export default {
  introduccion: "La descripcion de {nombre} es la siguiente:",
};

...

$t('introduccion', {nombre: nombreUsuario})

Cambiar idioma

En las aplicaciones, lo normal es que queramos cambiar el idioma en la aplicación completa, en todos los compones. Para cambiar el idioma globalmente tendremos que modificar this.$root.$i18n.locale:

onClick() {
  if (this.$root.$i18n.locale === "es") this.$root.$i18n.locale = "en";
  else this.$root.$i18n.locale = "es";
}

Con esto es importante tener en cuenta un detalle, por si nos topamos con que no funciona: no se puede acceder al $root en funciones con la sintaxis flecha () => { ... }. Esto se debe a que este tipo de funciones cogen el contexto de dónde se definen, es decir, el del componente, mientras que para acceder a $root se necesita estar en el contexto de la instancia de Vue, lo que se hace con las funciones normales (nombreFuncion(param) / nombreFuncion: function(param)).

Tenemos otra forma de cambiar el idioma, pero en este caso se cambia para el componente actual y sus hijos. Se haría igual, pero Para cambiar el idioma sólo en un componente, lo podemos hacer desde un método de un componente modificando this.$i18n.locale. Por ejemplo:

onClick() {
  if (this.$i18n.locale === "es") this.$i18n.locale = "en";
  else this.$i18n.locale = "es";
}

En cambio, para cambiarlo desde la raíz, es decir, para todos, tendríamos que modificar $root.$i18n.localeEsto se puede utilizar también para cambiar el idioma en toda la aplicación si lo hacemos en el componente inicial, en el App.vue, pero si lo hacemos en otro componente tenemos que tener en cuenta que se perderá al navegar a otro componente y volver. Si por algún caso de uso de nuestras aplicaciones es necesario, se puede utilizar, pero lo más habitual será cambiar el idioma globalmente.

Documentación oficial

Para consultar la documentación oficial, con todas las opciones disponiblees, podemos irnos aquí. Algunas opciones útiles que podemos consultar en la documentación son la pluralización (cadenas en singular o plural), gestión de fechas, o números.