...

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

Inicializar i18n

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

...

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:

...

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.

...

<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>
...
unaFuncion() {
	...
	this.$toast.add({ severity: "error", summary: "Error", detail: this.$t('error_descarga'), life: 10000 });
}

Parametrizar los mensajes

Podemos poner parámetros en los mensajes de declarados en en.js y es.js 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:

...

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.