En el artículo de hoy te enseñaré a usar varios idiomas en tu aplicación web con Vue 3 usando Vue I18n que es un paquete para agregar localización a tus proyectos.

Básicamente vas a poder mostrar tu aplicación en distintos idiomas ya sea español, inglés, francés, etcétera, teniendo un archivo de traducciones y mostrando la cadena traducida en tus componentes.

Con Vue 3 y Vue I18n vas a poder tener aplicaciones web internacionales.

Instalando Vue I18n

Toma en cuenta que yo estoy usando Vue 3 con Vue I18n versión 9, cuya documentación encuentras en: https://vue-i18n.intlify.dev/

Puedes instalarlo ejecutando: npm install vue-i18n@9

Creando archivo de traducciones

Antes de comenzar a usar el paquete para tener aplicaciones de Vue 3 en varios idiomas recomiendo crear un archivo con las traducciones.

Yo lo he creado en src/translations.ts (si tú usas JavaScript solo cambia la extensión del archivo) y se ve así:

export const translations = {
    en: {
        guardar: "Save",
    },
    es: {
        guardar: "Guardar",
    }
};

Fíjate en que las traducciones son un diccionario JSON, en donde la claves de primer nivel son el idioma, en este caso tengo solo 2 idiomas: inglés y español, que corresponden a en y es.

Dentro de cada idioma, puedes tener más propiedades en donde realmente existirán las traducciones. En el ejemplo anterior tengo la propiedad guardar que está en su respectivo idioma.

Aquí puedes agregar traducciones infinitas dentro de cada idioma, y también puedes agrupar traducciones, por ejemplo:

en: {
    guardar: "Save",
    acciones:{
        guardar: "Save",
        eliminar: "Delete",
    }
},

Lo importante es tener el objeto de JavaScript, ya sea importándolo como lo haremos en este ejemplo o colocándolo al usar createI18n.

Usar traducciones con createI18n

Ya tenemos instalado el paquete y también el archivo con las traducciones. Ahora, en nuestro main.ts o main.js vamos a importar createI18n de su paquete:

import { createI18n } from 'vue-i18n'

También importaremos el objeto con las traducciones. Como mi main.ts está en src, es hermano de translations.ts así que lo importo así:

import { translations } from "./translations"

Después, vamos a configurarlo:

const i18n = createI18n({
    locale: "es",
    fallbackLocale: "es",
    messages: translations,
    legacy: false,
})

En este caso locale es el idioma por defecto, fallbackLocale es el idioma que se va a usar si no se encuentra una traducción para el idioma seleccionado, messages es el objeto que contiene todas las traducciones y que hemos importado de nuestro archivo.

Finalmente para el caso de legacy, yo establezco esta opción en false porque quiero usar la Composition API.

Ahora solo resta invocar a app.use pasándole el i18n que hemos creado:

app.use(i18n);

Recuerda que debes hacerlo antes de invocar a app.mount. Solo como referencia, mi main completo queda así; toma en cuenta que también estoy usando al router y pinia, mismos que no son relevantes para el objetivo de este tutorial.

import './assets/main.css'

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import { createI18n } from 'vue-i18n'
import { translations } from "./translations"
const i18n = createI18n({
    locale: "es",
    fallbackLocale: "en",
    messages: translations,
    legacy: false,
})

import App from './App.vue'
import router from './router'

const app = createApp(App)

app.use(createPinia())
app.use(router)
app.use(i18n);

app.mount('#app')

Usando varios idiomas en Vue 3

Ahora que ya hemos configurado todas las traducciones, es momento de mostrar dichos mensajes traducidos. Para ello vamos a usar $t pasándole la clave del mensaje, que debe ser hija de uno de los idiomas.

Siguiendo el ejemplo que mostré anteriormente con el archivo de traducciones, podemos mostrar “Guardar” y “Save” usando:

{{ $t("guardar") }}

Si has agrupado las traducciones, puedes acceder a ellas con el punto, así:

{{ $t("acciones.guardar") }}

Cambiando idioma en tiempo de ejecución

Puedes cambiar el idioma en cualquier momento desde tus componentes. Comienza “usando” I18n así:

import { useI18n } from 'vue-i18n';
const i18n = useI18n();

Después, puedes cambiar el idioma cambiando el locale.value de i18n de la siguiente manera:

i18n.locale.value = "en";

El valor que debes asignar debe ser un idioma soportado y que se encuentre dentro de las traducciones. Como yo solo tengo inglés y español, los valores soportados son en y es.

Usando traducciones de manera programada

También es posible acceder a las traducciones desde el código TypeScript o JavaScript, no estás obligado a usarlo desde la vista. Para ello, simplemente invoca a useI18n y accede a su propiedad t, que será una función.

import { useI18n } from 'vue-i18n';
const i18n = useI18n();
const { t } = i18n;

Ahora puedes usar la traducción así:

const cadenaGuardarTraducida = t("guardar");

Aplicación de ejemplo

Todo lo que te he explicado en este artículo ya está en una de mis aplicaciones que a su vez es open source: el diseñador para impresoras térmicas del cual puedes encontrar más información en su post de presentación.

El código fuente está en https://github.com/parzibyte/esc-pos-ticket-designer/, y una vez que entres a la aplicación verás que puedes cambiar entre español e inglés de manera instantánea.