Vue Academy · Lección

Configuración de vue-i18n y archivos de mensajes

createI18n(), archivos JSON de locales, sintaxis de mensajes {name}, claves anidadas y locale de reserva

Configuración de vue-i18n y archivos de mensajes es una lección gratuita de Vue Academy en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Vue Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Vue Academy incluye 4 lecciones en total.

¿Qué es i18n?

La internacionalización (i18n) consiste en crear la aplicación para que pueda mostrar texto en varios idiomas. Vue I18n es la biblioteca de estilo oficial para traducir aplicaciones Vue.

En lugar de escribir cadenas en inglés directamente, se buscan claves que se resuelven en el idioma activo.

Instalar Vue I18n

Añada el paquete. Para Vue 3 se usa la versión 9 o posterior, que está diseñada en torno a la Composition API.

// terminal
// npm install vue-i18n

Archivos de mensajes

Las traducciones se encuentran en objetos de mensajes, uno por locale. Las claves se corresponden con cadenas traducidas. Comience con el inglés.

const en = {
  greeting: "Hello",
  nav: {
    home: "Home",
    about: "About",
  },
}

Añadir un locale turco

Cada locale refleja la misma estructura de claves para que todas las claves existan en todos los idiomas.

const tr = {
  greeting: "Merhaba",
  nav: {
    home: "Ana Sayfa",
    about: "Hakkinda",
  },
}

Crear la instancia de i18n

createI18n crea la instancia. Configure locale (el idioma activo), fallbackLocale (se usa cuando falta una clave) y el mapa de messages.

import { createI18n } from "vue-i18n"

const i18n = createI18n({
  legacy: false,
  locale: "en",
  fallbackLocale: "en",
  messages: { en, tr },
})

Por qué legacy: false

Configurar legacy: false activa el modo Composition API, que es el que usan las aplicaciones modernas de Vue 3. Esto habilita el composable useI18n que conocerá en la siguiente lección.

const i18n = createI18n({
  legacy: false, // Composition API mode
  locale: "en",
  messages: { en, tr },
})

Registrar la instancia en la aplicación

Instale la instancia como plugin con app.use(i18n). Esto hace que los helpers de traducción estén disponibles en todo el árbol de componentes.

import { createApp } from "vue"
import App from "./App.vue"

const app = createApp(App)
app.use(i18n)
app.mount("#app")

Usar $t en las plantillas

Una vez instalada, cualquier plantilla puede llamar a $t(key) para buscar una traducción en el locale activo.

<template>
  <h1>{{ $t("greeting") }}</h1>
  <a>{{ $t("nav.home") }}</a>
</template>

Cómo funciona fallbackLocale

Si falta una clave en el locale activo, Vue I18n recurre a fallbackLocale en lugar de mostrar la clave sin traducir. Esto mantiene la interfaz coherente mientras se completan las traducciones.

// tr is missing "tagline" -> falls back to en
// {{ $t("tagline") }} renders the English text

Interpolación con marcadores de posición

Los mensajes pueden contener marcadores de posición con nombre entre llaves. Pase los valores como segundo argumento para completarlos.

const en = {
  welcome: "Welcome, {name}!",
}

// template:
// {{ $t("welcome", { name: "Ada" }) }}
// => "Welcome, Ada!"

Organizar los archivos de mensajes

En aplicaciones reales, coloque cada locale en su propio archivo (en.json, tr.json) e impórtelos. Esto facilita la gestión de las traducciones y permite que los traductores trabajen de forma independiente.

// locales/en.json, locales/tr.json
import en from "./locales/en.json"
import tr from "./locales/tr.json"

createI18n({ locale: "en", messages: { en, tr } })

Comprobación rápida

Compruebe su comprensión de la configuración de Vue I18n.

Resumen

Ha configurado Vue I18n:

i18n significa mostrar texto en varios idiomas mediante la búsqueda de claves.
Defina un objeto de mensajes por locale con la misma estructura de claves.
createI18n recibe locale, fallbackLocale y messages; use legacy: false para el modo Composition.
Instale la instancia con app.use(i18n) y traduzca en las plantillas con $t(key).
Los marcadores de posición como {name} se completan mediante un segundo argumento.

Preguntas frecuentes

¿La lección «Configuración de vue-i18n y archivos de mensajes» es gratis?

Sí — el texto completo de «Configuración de vue-i18n y archivos de mensajes» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Vue Academy, actualiza a CoddyKit PRO. El curso de Vue Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Configuración de vue-i18n y archivos de mensajes»?

createI18n(), archivos JSON de locales, sintaxis de mensajes {name}, claves anidadas y locale de reserva Practicas Vue Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar Vue Academy?

No se requiere experiencia previa. Vue Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 4.

¿Cuánto tiempo toma la lección «Configuración de vue-i18n y archivos de mensajes»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de Vue Academy?

Sí. Cada lección de Vue Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

Configuración de vue-i18n y archivos de mensajes
Composable useI18n y función t()
Pluralización y mensajes vinculados
Formato de números, fechas y divisas

← Volver a Vue Academy