...

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

npm install vue-i18n

Hay diferentes formas de organizar esto en nuestro proyecto, pasamos a verlas.

Inicializar i18n

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

import Vue from 'vue';
import VueI18n from 'vue-i18n';

Vue.use(VueI18n);

function loadLocaleMessages() {
  const locales = require.context('./locales', true, /[A-Za-z0-9-_,\s]+\.json$/i);
  const messages = {};
  locales.keys().forEach((key) => {
    const matched = key.match(/([A-Za-z0-9-_]+)\./i);
    if (matched && matched.length > 1) {
      const locale = matched[1];
      messages[locale] = locales(key);
    }
  });
  return messages;
}

export default new VueI18n({
  locale: process.env.VUE_APP_I18N_LOCALE || 'es',
  fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'es',
  silentTranslationWarn: true,
  messages: loadLocaleMessages(),
});

Además, al crear la instancia de Vue, tendremos que importarlo e incluirlo en el new Vue del archivo main.js:

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

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 Definir mensajes

Podemos definir los mensajes de dos maneras diferentes, o bien en archivosun archivo .js dedicadosjson para nuestro servicio, o dentro de los mismos propios componentes.

En un archivos aparte

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 ejemploLa forma más intuitiva de gestionar los diferentes locales disponibles, será tener cada uno en un archivo JSON dentro de src/locales. Tendremos, al menos, español e inglés, en los archivos es.json y en.json, respectivamente, y seguirán la siguiente estructura:

// es.js
{
  "helloworldes": "¡Hola mundo!",
{
    "testabrir_resguardo": "Esto es una pruebaAbrir resguardo",
}
 
// en.js
{
    "helloworldaqui": "Hello world!aquí",
    "testcurso_academico": "This is a test",
}

Por último, 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

Otra opción, que puede ser útil para, por ejemplo, compartir componentes en el repositorio, es definir los mensajes en los propios archivos .vue de los componentes.

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

npm install @kazupon/vue-i18n-loader

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

module.exports = {
  chainWebpack: config => {
    config.module
      .rule("i18n")
      .resourceQuery(/blockType=i18n/)
      .type('javascript/auto')
      .use("i18n")
      .loader("@kazupon/vue-i18n-loader")
      .end();
  }
}

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

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>

...

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

Mostrar los mensajes en Vuex

...