Configuración Inicial

Para comenzar, necesitamos un proyecto Vue base. Utilizaremos Vue CLI para la creación, ya que simplifica el proceso inicial:

npm install -g @vue/cli
vue create mi-proyecto-multilingüe
cd mi-proyecto-multilingüe

Instalación de Vue-i18n

Una vez con el proyecto base, procedemos a instalar el paquete de internacionalización:

npm install vue-i18n

Estructura de Archivos

Organizareoms los archivos de idioma en una carpeta dedicada. Dentro del directorio src, creamos una carpeta locales con los archivos de traducción:

• src/locales/es.js (Español)
• src/locales/en.js (Inglés)

Creación de Archivos de Traducción

En cada archivo, definimos las traducciones como objetos JavaScript:

// src/locales/es.js
export default {
  mensaje: '¡Hola Mundo!',
  boton: 'Cambiar Idioma',
  titulo: 'Sitio Web Multilingüe'
}

// src/locales/en.js
export default {
  mensaje: 'Hello World!',
  boton: 'Switch Language',
  titulo: 'Multilingual Website'
}

Configuración Principal

Modificamos el archivo main.js para inicializar Vue-i18n:

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import App from './App.vue'

Vue.use(VueI18n)

const i18n = new VueI18n({
  locale: 'es', // idioma por defecto
  fallbackLocale: 'en', // idioma alternativo
  messages: {
    es: require('./locales/es.js'),
    en: require('./locales/en.js')
  }
})

new Vue({
  i18n,
  render: h => h(App)
}).$mount('#app')

Implementación en Componentes

En nuestros componentes Vue, utilizamos el método $t para acceder a las traducciones:

<template>
  <div>
    <h1>{{ $t('titulo') }}</h1>
    <p>{{ $t('mensaje') }}</p>
    <button @click="alternarIdioma">{{ $t('boton') }}</button>
  </div>
</template>

<script>
export default {
  methods: {
    alternarIdioma() {
      const nuevoIdioma = this.$i18n.locale === 'es' ? 'en' : 'es';
      this.$i18n.locale = nuevoIdioma;
      // Guardar preferencia en localStorage
      localStorage.setItem('idioma', nuevoIdioma);
    }
  },
  created() {
    // Restaurar idioma guardado
    const idiomaGuardado = localStorage.getItem('idioma');
    if (idiomaGuardado) {
      this.$i18n.locale = idiomaGuardado;
    }
  }
}
</script>

Consideraciones Técnicas

Al implementar Vue-i18n, es importante tener en cuenta:

• Consistencia en las claves de traducción entre idiomas
• Manejo de contenido dinámico con parámetros
• Adaptación de diseños para diferentes longitudes de texto
• Persistencia de la preferencia de idioma del usuario

Avanzado: Formateo de Fechas y Números

Vue-i18n permite extender la funcionalidad para formatear fechas y números según la configuración regional:

// En main.js
import { createI18n } from 'vue-i18n'
import { createDateFormat } from '@intlify/vue-i18n-bridge'

const i18n = createI18n({
  legacy: false,
  locale: 'es',
  messages: {
    es: {
      formatoFecha: new Intl.DateTimeFormat('es-ES', { 
        year: 'numeric', 
        month: 'long', 
        day: 'numeric' 
      })
    },
    en: {
      formatoFecha: new Intl.DateTimeFormat('en-US', { 
        year: 'numeric', 
        month: 'long', 
        day: 'numeric' 
      })
    }
  }
})

// En componente
const fecha = new Date()
console.log(this.$i18n.formatoFecha.format(fecha))

Conclusión

Vue-i18n ofrece una solución robusta y flexible para la internacionalización en aplicaciones Vue. Con una configuración inicial sencilla y una API intuitiva, los desarrolladores pueden implementar soporte multilingüe de manera eficiente, mejorando la accesibilidad y alcance de sus proyecots.