Historial de página

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 src/locales/index.js, de la siguiente manera:

import Vue from "vue";
import VueI18n from "vue-i18n";
Vue.use(VueI18n);
 
// Importamos locales
import es from "./es.js";
import en from "./en.js";
 
export const messages = {
  es,
  en,
};
 
export default new VueI18n({
  locale: process.env.VUE_APP_I18N_LOCALE || "es",
  fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || "es",
  silentTranslationWarn: true,
  messages,
});

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

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

Definir mensajes

Podemos definir los mensajes de dos maneras diferentes, o bien en archivos .js dedicados, o dentro de los mismos componentes.

En un archivos aparte

La forma más intuitiva de gestionar los diferentes locales disponibles, será tener cada uno en un archivo dentro de src/locales. Si por ejemplo tenemos español e inglés, tendremos es.js 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 src/locales/index.js:

import Vue from "vue";
import VueI18n from "vue-i18n";
Vue.use(VueI18n);
 
// Importamos locales
import es from "./es.js";
import en from "./en.js";
 
export const messages = {
  es,
  en,
};
 
export default new VueI18n({
  locale: process.env.VUE_APP_I18N_LOCALE || "es",
  fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || "es",
  silentTranslationWarn: true,
  messages,
});

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:

...

<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'):

<Column :header="$t('tituloColumna')" />

...

<span>
  {{ $t('texto') }}
</

...

span>

Cambiar idioma

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

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.