Aplicación multilenguaje utilizando Vue i18n en Vue y Nuxt

El plugin vue-i18n nos permite diseñar una aplicación internacional preparada para adaptarse a diferentes idiomas. En este artículo se muestra un ejemplo real integrando este plugin con Vue y Nuxt.

Introducción

Este artículo, como la mayoría de los que hay en este blog, nace de la necesidad de aplicar esta funcionalidad en una aplicación. Por lo tanto, el código que se presenta a continuación está probado y funcionando.

El proyecto en donde he realizado la internacionalización es mi página web personal que está publicada en Github. El proyecto se llama Javier y el contenido de la página web es un CV online extendido.

Hay una instancia pública de la página web en donde podéis ver el resultado final de las traducciones. Si tarda en cargar la página no os extrañéis, estoy utilizando now para hacer un deploy rápido, sencillo y gratis. Sin embargo, cada cierto tiempo sin actividad la instancia se para y para iniciarse otra vez necesita unos 60 segundos. Seguramente en un futuro haré un artículo hablando de esta herramienta.

Entorno

El proyecto que se presenta en este artículo está desarrollado con las siguientes tecnologías:

• NuxtJs 2.3.1
• Vue.Js
• Vue-i18n 8.7.0

Código

El origen del código que se muestra a continuación parte de este ejemplo que se encuentra en la página web oficial de Nuxt. Sin embargo, he realizado alguna simplificación al código y lo he adaptado a mis necesidades. En concreto, he eliminado todo el código asociado a actualizar el idioma por la URL.

El primer paso es instalar el plugin vue-i18n:

npm install vue-i18n

El segundo paso es configurar el plugin de Nuxt mediante el fichero i18n.js:

// plugins/i18n.js

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

Vue.use(VueI18n)

export default ({ app, store }) => {
  // Set i18n instance on app
  app.i18n = new VueI18n({
    locale: store.state.locale,
    fallbackLocale: 'en',
    messages: {
      'en': require('~/locales/en.json'),
      'es': require('~/locales/es.json')
    }
  })
}

El tercer paso es configurar este plugin en la aplicación mediante el fichero nuxt.config.js:

// nuxt.config.js

...
plugins: [
  { src: '~/plugins/i18n' },
],
...

El cuarto paso es generar los ficheros de traducciones. En mi caso se pueden encontrar los ficheros es.json y en.json. Estos ficheros se encuentra en la carpeta locales.

El quinto paso se trata de el componente Locale.vue. Este componente se encarga de cambiar la el idioma de la aplicación. Cabe decir, que yo he creado un componente para localizar toda la lógica de las traducciones en un único punto. Sin embargo, tu puedes integrar este código en tu componente header por ejemplo.

El código más importante de este componente es cuando se selecciona un idioma, en este caso hay que notificar dicho cambio al plugin para que actualice todas las variables.

// components/Locale.vue

...
methods: {
  setLocale(locale) {
    this.$store.commit('SET_LANG', locale)
    this._i18n.locale = locale
  },
},
...

Hay una cosa importante que me gustaría destacar. En el segundo paso, el idioma de la aplicación se ha configurado mediante el store de Vuex. Sin embargo, mediante la línea this._i18n.locale = locale, he necesitado cambiar el idioma manualmente, a pesar de actualizar el store en la línea que la precede.

Seguramente investigaré un poco más para saber qué ha pasado, pero con este código se puede cambiar de idioma.

El sexto paso es utilizar el plugin para realizar la traducción en un template. Un ejemplo sencillo se encuentra en el componente Blog.vue.

// components/Blog.vue

...
<h2>{{ $t('blog.name') }}</h2>
...

Conclusión

El único problema que he encontrado cuando estuve haciendo el desarrollo, ha sido el que he mencionado en la explicación del código en el quinto paso. Me ha parecido muy raro que a pesar de estar asociado el idioma de la aplicación al store, no se realice la actualización de dicha variable automáticamente.

Tal vez sea un problema de implementación por mi parte, sin embargo, si alguien sabe porqué ocurre que no dude en comentarlo en este artículo. Por mi parte seguiré investigando este problema.

Finalmente, me gustaría decir que este plugin es muy interesante para hacer tu aplicación internacional. Se ha adaptado perfectamente a la configuración de una aplicación con Vue y Nuxt. Por lo tanto, pienso que seguramente se adaptará perfectamente al framework Vue sin ningún problema.