Como Integrar traducciones en VueJs con Vite
1
Paso
Configuración del proyecto con Vue3
Instalación de vue-i18n. Una vez instalado el paquete. Modificar el archivo: proyecto\src\main.js
/**
* Importamos las traducciones
*/
import es from './locales/es.json'
import en from './locales/en.json'
/**
* Importación de la libreria
*/
import { createI18n } from 'vue-i18n'
/**
* Instanciamos la libreria en donde especificamos el idioma
* Configurando los lenguajes como "es" y "en", en la clave "messages"
*/
const i18n = createI18n({
locale: "es", //en
globalInjection: true,
messages: {
es,
en
}
})
let app = createApp(App)
/**
* Instalamos el plugin
*/
app.use(i18n)
app.mount('#app')
2
Paso
Estructura de datos de las traducciones
En el directorio : proyecto\src\locales, se encuentran dos archivos "en.json (Ingles)" y "es.json (Español)".
Ambos archivos, contienen un json, con la estructura que definan para sus traducciones como por ejemplo:
{
"titulo_app" : "Titulo de la App"
}
3



