Traduccir en VueJS

En este artículo aprenderemos a hacer una aplicación multilenguaje con VueJS 3 y la librería vue-i18n.

Traducir aplicación VueJS 3 con i18n

Para comenzar, instalaremos la librería Vue-i18n. Puedes utilizar tanto npm como yarn, te dejo las dos opciones (previamente instalados):

# Yarn 
  yarn add vue-i18n@9 

# npm
  npm install vue-i18n@9

Una vez tengamos instalada la librería, nos dirigimos a la carpeta src de nuestro proyecto y crearemos una carpeta llamada locales.

En esta carpeta crearemos dos JSON en.json y es.json. En estos archivos añadiremos los textos que se mostrarán en nuestra aplicación dependiendo del lenguaje del usuario. en.json:

{
  "home": {
    "title": "Hello Vue App translated",
    "description": "This is a simple Vue app that demonstrates how to use Vue i18n for localization."
  },
  "contact": {
    "title": "Contact Us",
    "description": "Please contact us at 123-456-7890 or email us at"
  }
}

es.json:

{
  "home": {
    "title": "Hola Aplicación Vue traducida",
    "description": "Esta es una simple aplicación Vue que demuestra cómo usar Vue i18n para la localización."
  },
  "contact": {
    "title": "Contáctanos",
    "description": "Por favor, contáctanos al 123-456-7890 o envíanos un correo electrónico a"
  }
}

Podemos crear tantos idiomas como queramos, creando sus respectivos archivos, como hemos hecho con el inglés y el español.

Añadiendo i18n a VueJS

Ahora nos dirigimos al archivo main.js, que se encuentra en la carpeta src de nuestro proyecto VueJS.

main.js:

import { createApp } from "vue";
import "./style.css";
import App from "./App.vue";

import { createI18n } from 'vue-i18n'

import es from "./locales/es.json";
import en from "./locales/en.json";

const i18n = createI18n({
  locale: navigator.language, // Idioma del navegador
  fallbackLocale: "es", // Si no encuentra la traducción en el idioma actual, buscará en español
  messages: { es, en }, // Nuestros archivos de traducción
  legacy: false, // Para que no muestre advertencias en la consola
});

const app = createApp(App);
app.use(i18n);
app.mount("#app");

Añadir traducción a componente VueJS

Para comprobar que todo funciona correctamente, iremos al componente dónde queramos añadir el mensaje que tenemos en el JSON y añadiremos lo siguiente:

<template>
  <h1>{{ t('home.title') }}</h1>
  <p>{{ t('home.description') }}</p>
</template>

<script setup>
import { useI18n } from 'vue-i18n'

const { t,} = useI18n();

</script>

Elegir idioma de la aplicación

También podemos añadir un select con la lista de idiomas disponibles, para que el usuario pueda cambiarlo.

<template>
  <select @change="changeLanguage" v-model="selectedLanguage">
    <option value="en-EN">English</option>
    <option value="es-ES">Español</option>
  </select>

  <h1>{{ t('home.title') }}</h1>
  <p>{{ t('home.description') }}</p>
</template>

<script setup>
import { ref, watch } from 'vue'
import { useI18n } from 'vue-i18n'

const { t, locale } = useI18n();

const selectedLanguage = ref(locale.value)

const changeLanguage = (event) => {
  locale.value = event.target.value;
};

watch(selectedLanguage, (newLocale) => {
  locale.value = newLocale;
});
</script>