Vue i18n es la solución estándar para internacionalización (i18n) en aplicaciones Vue.js. En esta guía, te mostraré cómo configurar Vue i18n en Vue 3, Nuxt 3 y con diversas herramientas de compilación. ## ¿Qué es Vue i18n? Vue i18n es un plugin desarrollado por [Intlify](https://intlify.dev) que te permite hacer tu aplicación Vue multilingüe. Soporta: - Vue 2 y Vue 3 - Composition API y Options API - Pluralización - Formateo de fechas y números - Carga diferida de traducciones ## Instalación de Vue 3 i18n ### Instalar con npm/yarn ```bash npm install vue-i18n@9 # o yarn add vue-i18n@9 ``` ### Configuración básica en Vue 3 ```javascript // src/i18n/index.js import { createI18n } from 'vue-i18n' const messages = { es: { welcome: 'Bienvenido', greeting: '¡Hola, {name}!' }, en: { welcome: 'Welcome', greeting: 'Hello, {name}!' } } const i18n = createI18n({ locale: 'es', fallbackLocale: 'en', messages }) export default i18n ``` ```javascript // main.js import { createApp } from 'vue' import App from './App.vue' import i18n from './i18n' const app = createApp(App) app.use(i18n) app.mount('#app') ``` ## Usar Vue i18n en plantillas ### La función $t ```vue ``` ### Con Composition API (useI18n) ```vue ``` ## Vue i18n cambiar idioma Hay varios enfoques para cambiar el idioma dinámicamente: ### Global ```javascript import i18n from '@/i18n' // Cambiar idioma i18n.global.locale.value = 'en' ``` ### En un componente ```vue ``` ## Nuxt i18n / Nuxt 3 i18n Para proyectos Nuxt, existe el módulo oficial `@nuxtjs/i18n`. ### Instalación ```bash npm install @nuxtjs/i18n ``` ### Configuración de Nuxt 3 ```typescript // nuxt.config.ts export default defineNuxtConfig({ modules: ['@nuxtjs/i18n'], i18n: { locales: [ { code: 'es', iso: 'es-ES', file: 'es.json' }, { code: 'en', iso: 'en-US', file: 'en.json' } ], defaultLocale: 'es', lazy: true, langDir: 'locales/', strategy: 'prefix_except_default' } }) ``` ## Vue i18n con Vite ### Plugin Vite Vue i18n Para mejor rendimiento y optimización de compilación: ```bash npm install @intlify/unplugin-vue-i18n ``` ```javascript // vite.config.js import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import VueI18nPlugin from '@intlify/unplugin-vue-i18n/vite' import { resolve } from 'path' export default defineConfig({ plugins: [ vue(), VueI18nPlugin({ include: resolve(__dirname, './src/locales/**') }) ] }) ``` ## Estructurar archivos de traducción ### Archivos JSON separados por idioma ``` src/ locales/ es.json en.json fr.json ``` ```json // locales/es.json { "nav": { "home": "Inicio", "products": "Productos", "contact": "Contacto" }, "auth": { "login": "Iniciar sesión", "logout": "Cerrar sesión", "register": "Registrarse" } } ``` ### Carga diferida (para proyectos grandes) ```javascript // i18n/index.js import { createI18n } from 'vue-i18n' const i18n = createI18n({ locale: 'es', fallbackLocale: 'en', messages: {} }) export async function loadLocaleMessages(locale) { const messages = await import(`./locales/${'${locale}'}.json`) i18n.global.setLocaleMessage(locale, messages.default) return messages } export default i18n ``` ## Pluralización en Vue i18n ```json { "items": "sin artículos | un artículo | {count} artículos" } ``` ```vue ``` ## Preguntas frecuentes (FAQ) ### ¿Cómo cambio el idioma en Vue i18n? Usa `locale.value = 'en'` en la Composition API o `i18n.global.locale.value = 'en'` globalmente. Ambos métodos actualizan reactivamente el idioma en toda la aplicación. ### ¿Cuál es la diferencia entre Vue i18n e i18next? Vue i18n está diseñado específicamente para Vue y ofrece integración profunda con características de Vue como Composition API y Reactividad. i18next es agnóstico al framework y puede usarse en React, Angular o Vanilla JS. ### ¿Vue i18n soporta TypeScript? Sí, Vue i18n ofrece soporte completo de TypeScript. Con la interfaz `DefineLocaleMessage`, puedes definir claves de traducción tipadas que permiten autocompletado y verificación de tipos. ### ¿Cómo cargo traducciones dinámicamente (Lazy Loading)? Usa imports dinámicos: `const messages = await import('./locales/' + locale + '.json')` y luego `i18n.global.setLocaleMessage(locale, messages.default)`. ## Conclusión Vue i18n es la mejor opción para internacionalización en proyectos Vue.js. Con Vue 3 y la Composition API, la configuración se ha vuelto aún más sencilla. Para proyectos Nuxt, `@nuxtjs/i18n` ofrece integración perfecta con características adicionales como enrutamiento automático. Al traducir tus archivos JSON de Vue i18n, es importante que los marcadores de posición como `{name}` y el formato ICU se conserven. [shipglobal.dev](https://shipglobal.dev) maneja automáticamente los formatos de archivo Vue i18n y preserva toda la sintaxis de variables. ## Artículos relacionados - [Vue i18n en JavaScript - Traducir fuera de plantillas](/blog/vue-i18n-javascript) - [Guía de Placeholder React i18next](/blog/react-i18next-placeholder) - [Guía Android i18n JSON](/blog/android-i18n-json-guide) ## Recursos adicionales - [Documentación Vue i18n](https://vue-i18n.intlify.dev/) - [Módulo Nuxt i18n](https://i18n.nuxtjs.org/) - [Intlify](https://intlify.dev/)

{{ $t('welcome') }}

{{ t('welcome') }}