Internacionalización de un proyecto Vue

Para empezar, y como curiosidad, te cuento que en la abreviatura i18n el número 18 hace referencia a las letras que se encuentran entre la primera y última letra de la palabra internacionalitation.

La internacionalización de un proyecto de software es algo en cuya implementación no se suele prestar toda la atención requerida. Habitualmente sólo se gestiona el aspecto más básicos que permita mostrar los textos en distintos idiomas, y hay otros aspectos, como la gestión de la pluralización, que quedan olvidados.

En esta entrada, y alguna más que le seguirá, usaré Vue I18n para añadir la gestión de la internacionalización a un proyecto Vue. Como primer paso, por tanto, deberías acceder al directorio donde se encuentra tu proyecto Vue y añadir Vue I18n.

cd proyecto-vue
vue add i18n

Tendrás que atender unas consultas en la consola; La primera de estas consultas es la sobre configuración regional que usará por defecto el proyecto. Luego debes indicar la configuración regional alternativa, el directorio donde se guardarán los archivos con las traducciones y si deseas activar cierta compatibilidad.

? The locale of project localization. es
? The fallback locale of project localization. en
? The directory where store localization messages of project. It's stored under `src` directory. locales
? Enable legacy API (compatible vue-i18n@v8.x) mode ? No

Después vas a poder comprobar que hay varios cambios en el proyecto, por ejemplo, en el archivo main.js deberías ver algo parecido a esto:

import i18n from './i18n'

const app = createApp(App).use(i18n)

Y el archivo vue.config.js debería contener algo parecido a esto:

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  pluginOptions: {
    i18n: {
      locale: 'es',
      fallbackLocale: 'en',
      localeDir: 'locales',
      enableLegacy: false,
      runtimeOnly: false,
      compositionOnly: false,
      fullInstall: true
    }
  }
})

Comprueba también que ya dispones de una carpeta llamada locales en la carpeta src de tu proyecto. Aquí es donde guardaremos los archivos con las traducciones que utilizará nuestra aplicación.