preloader
Mi Tienda
0

Carrito

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

Paso

Usando las traducciones

Para usar las traducciones en los componentes o vistas, se realiza de la siguiente forma: Archivo de ejemplo: proyecto\src\App.vue
      <HelloWorld :msg="$t('titulo_app')" />

      {{ $t('titulo_app') }}

Resultado:

Para usar las traducciones en el código JS:

console.log(this.$t('titulo_app'))

0
Would love your thoughts, please comment.x
()
x