Para la internacionalización de nuestros servicios FundeWebJS utilizamos la librería i18n. En el proyecto Portal UI ya viene configurado por lo que sólo tendremos que hacer los siguientes pasos.

Definir mensajes 

Podemos definir los mensajes de dos maneras diferentes, o bien en un archivo .json para nuestro servicio, o dentro de los propios componentes. Lo más recomendable es definirlos en un archivo .json.

En archivo .json

En cada servicio, tendremos una carpeta locales/, en la que añadiremos un arhivo .json para los textos. Este archivo definirá los mensajes tanto en español (es) como en inglés (en). Por ejemplo:

{
  "es": {
    "abrir_resguardo": "Abrir resguardo",
    "aqui": " aquí",
    "curso_academico": "Curso académico"
  },
  "en": {
    "abrir_resguardo": "Open receipt",
    "aqui": " here",
    "curso_academico": "Course"
  }
}

Después, para importar estos mensajes en nuestros componentes, tendremos que añadir un bloque <i18n>, indicándole el archivo que los contiene de esta manera:

<i18n src="../locales/localesResguardoMatricula.json"></i18n>

En los propios componentes

La otra opción es añadir los mensajes en los propios componentes, dentro del bloque <i18n> que hemos añadido.

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

Mostrar los mensajes

Para mostrar las cadenas de texto, lo haremos con $t('nombreCadena') en el template, y en la parte javascript con this.$t('nombreCadena'):

<Column :header="$t('tituloColumna')" />
<span>
  {{ $t('texto') }}
</span>
...
unaFuncion() {
	...
	this.$t('error_descarga')
}

Mostrar los mensajes en Vuex

En Vuex, al estar en otro contexto, no podemos acceder a this, por lo que tendremos que importar i18n y utilizarlo así:

import i18n from '@/locales' 
i18n.t("nombreCadena")

Parametrizar los mensajes

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:",
};

y usarlos de forma:

$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 modificando this.$i18n.locale:

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

Esto 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.

Más documentación

Para consultar la documentación oficial, con todas las opciones disponibles, 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.

  • Sin etiquetas