0Pricing
Vue Academy · Lección

Composable useI18n y función t()

useI18n(), t('key'), $t en plantillas, cambio con locale.value y detección del locale

Composable useI18n y función t() es una lección gratuita de Vue Academy en CoddyKit. Esta es la lección 2 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.

Traducir en script setup

En el modo Composition API, los componentes acceden a las herramientas de traducción mediante el composable useI18n(). Este devuelve la función t y un ref reactivo locale, entre otros elementos.

Llamar a useI18n

Llame a useI18n() dentro de <script setup> y extraiga lo que necesite.

import { useI18n } from "vue-i18n"

const { t, locale } = useI18n()

La función t

t(key) devuelve la cadena traducida para el locale activo. Es el equivalente del lado del script de $t en las plantillas.

const { t } = useI18n()

const title = t("greeting") // "Hello" when locale is en

Interpolación con t

Pase un objeto de valores con nombre como segundo argumento para completar los marcadores de posición, exactamente igual que en las plantillas.

const { t } = useI18n()

const msg = t("welcome", { name: "Alice" })
// message "Welcome, {name}!" => "Welcome, Alice!"

Usar t para cadenas dinámicas

Como t es una función normal, puede usarla en cualquier parte de la lógica del script: para crear mensajes de toast, etiquetas calculadas o textos de validación.

import { computed } from "vue"
const { t } = useI18n()

const label = computed(() => t("nav.home"))

El ref locale

locale es un ref reactivo que contiene el código del idioma actual. Al leerlo, obtiene el idioma activo.

const { locale } = useI18n()
console.log(locale.value) // "en"

Cambiar el idioma globalmente

Asignar un valor a locale.value cambia el idioma activo en toda la aplicación. Cada llamada a t y cada $t de las plantillas se vuelve a renderizar de forma reactiva con el nuevo idioma.

function switchToTurkish() {
  locale.value = "tr"
}
// All translated text updates automatically.

Un selector de idioma

Un selector sencillo enlaza un elemento select con locale. Como es reactivo, al elegir una opción toda la interfaz cambia al instante.

<template>
  <select v-model="locale">
    <option value="en">English</option>
    <option value="tr">Turkce</option>
  </select>
</template>

<script setup>
import { useI18n } from "vue-i18n"
const { locale } = useI18n()
</script>

$t frente a t

Hacen lo mismo en dos contextos:

  • $t — está disponible automáticamente en las plantillas, sin necesidad de importarlo.
  • t — procede de useI18n() y se usa en el script y en la lógica reactiva.

Prefiera t al calcular cadenas en el código.

Mensajes con ámbito frente a globales

useI18n() puede recibir opciones para usar mensajes locales del componente. Sin opciones, utiliza la instancia global, que es la opción habitual para las traducciones de toda la aplicación.

const { t } = useI18n() // global messages

// component-scoped (advanced):
// const { t } = useI18n({
//   messages: { en: { ok: "OK" }, tr: { ok: "Tamam" } }
// })

Conservar la elección

El idioma es una preferencia del usuario, así que debe conservarlo. Lea el valor guardado al iniciar la aplicación y escríbalo cada vez que cambie locale mediante un watcher.

import { watch } from "vue"
const { locale } = useI18n()

watch(locale, (val) => localStorage.setItem("lang", val))

Comprobación rápida

Compruebe su comprensión de useI18n.

Resumen

Ha aprendido la API de traducción en tiempo de ejecución:

  • useI18n() devuelve t y un ref reactivo locale.
  • t(key) traduce; t(key, { name }) interpola los marcadores de posición.
  • Use t en la lógica del script y en los valores calculados; use $t en las plantillas.
  • Establezca locale.value para cambiar el idioma globalmente y de forma reactiva.
  • Conserve la elección observando locale con watch.

Preguntas frecuentes

¿La lección «Composable useI18n y función t()» es gratis?

Sí — el texto completo de «Composable useI18n y función t()» 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 «Composable useI18n y función t()»?

useI18n(), t('key'), $t en plantillas, cambio con locale.value y detección del locale 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 2 de 4.

¿Cuánto tiempo toma la lección «Composable useI18n y función t()»?

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

  1. Configuración de vue-i18n y archivos de mensajes
  2. Composable useI18n y función t()
  3. Pluralización y mensajes vinculados
  4. Formato de números, fechas y divisas
← Volver a Vue Academy