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