Cómo configurar i18n + Vue3 + Vite
En este artículo, te mostraremos cómo configurar la internacionalización (i18n) en una aplicación Vue3 utilizando Vite como el bundler.
Pasos para configurar i18n + Vue3 + Vite
- Instalar los paquetes necesarios. Para ello, ejecuta el siguiente comando en tu terminal:
- Crea un archivo de configuración para i18n. Puedes llamarlo “i18n.js” y agregar el siguiente código:
- En el archivo main.js, importa la configuración de i18n y úsalo para inicializar la app:
- En el archivo App.vue, usa la instancia de i18n para mostrar los textos en el idioma correspondiente:
npm install vue-i18n@9
import { createI18n } from 'vue-i18n'
const messages = {
en: {
message: {
hello: 'Hello, World!'
}
},
es: {
message: {
hello: '¡Hola, Mundo!'
}
}
}
const i18n = createI18n({
legacy: false,
locale: 'en',
fallbackLocale: 'en',
messages
})
export default i18n
import { createApp } from 'vue'
import App from './App.vue'
import i18n from './i18n'
createApp(App).use(i18n).mount('#app')
{{ $t('message.hello') }}
Conclusión
En resumen, configurar la internacionalización en una aplicación Vue3 con Vite es un proceso sencillo que requiere la instalación de la librería vue-i18n y la creación de un archivo de configuración. Una vez hecho esto, puedes utilizar la instancia de i18n para mostrar los textos en el idioma correspondiente.
Link al repositorio ⬇️
https://github.com/pablosirera/vue-i18n-example
Hay un error con el resolve dentro de la configuración del plugin en el archivo de vite.config.js. La solución:
VueI18nPlugin({
include: fileURLToPath(new URL('./src/locales/**', import.meta.url))
})
thanks
Muy buen video Pablo. Breve pero explicativo. Una duda, siguiendo los mismos pasos, en mi proyecto aparece el error 'Unresolved function or method $t() ' en las vistas vue cuando uso la variable global. En la ejecución funciona todo perfectamente. Comparando con tu repo, lo único diferente que puedo apreciar es que en el import 'import { createI18n } from 'vue-i18n';' a mi me aparece más de una opción. ¿Podría ser eso?
Muchas gracias por el aporte. Aunque me surge una duda, como podría usar la variable $t o el useI18n en el router de mi aplicación? Lo he intentado de las dos maneras sin éxito, me sale mensaje de error en la consola de que tiene que usarse en setup(). Saludos
Muy grande, tienes nueva suscriptora
Muy buen trabajo Pablo. Clara diferencia a tener en cuenta al configurar i18n + vite
Gracias Pablo, me ayudó mucho cómo montarlo bien y evitar errores que me daba vite, gracias al plugin.