# General Translation Knowledge Base: General Translation vs. vue-i18n: ¿cuál deberías usar?
URL: https://generaltranslation.com/es/kb/general-translation-vs-vue-i18n.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: General Translation permite a los equipos de Vue escribir el texto de origen directamente en las plantillas y generar traducciones con la CLI. Su plugin gt-vue renderiza ese contenido con formato de plurales y de números adaptado a la configuración regional. Elígelo si quieres dejar de mantener archivos de origen basados en claves; vue-i18n sigue siendo una buena opción para equipos que usan el módulo i18n de Nuxt y un flujo de trabajo de catálogos ya consolidado.
Category: Internacionalización
Last updated: 2026-10-16
Authors: Kevin Wu, Jackie Chen
Published: 2026-10-16

vue-i18n renderiza mensajes en el idioma del usuario en aplicaciones Vue. Defines los mensajes para cada configuración regional, los buscas por clave en tus plantillas y la biblioteca se encarga de dar formato a plurales, fechas y números. Pero no traduce nada: los mensajes de cada idioma los aportas tú, tus traductores o un sistema de gestión de traducciones (TMS). `gt-vue` de General Translation renderiza las traducciones del mismo modo, pero además General Translation las genera a partir del texto que escribes inline en tus plantillas.

## Lo que vue-i18n hace bien

* **Madurez.** vue-i18n está en npm desde 2014. [La versión 11 es la rama con mantenimiento activo](https://vue-i18n.intlify.dev/guide/maintenance), y la versión 12 está en fase alfa.
* **Nuxt.** El [módulo `@nuxtjs/i18n` se basa en vue-i18n 11](https://i18n.nuxtjs.org/docs/getting-started) y añade rutas con prefijo de configuración regional, rutas localizadas, detección del idioma del navegador, carga diferida de traducciones y etiquetas SEO como las versiones alternativas hreflang.
* **Formato y texto enriquecido.** `datetimeFormats` y `numberFormats` aceptan opciones de `Intl`, y el [componente `<i18n-t>`](https://vue-i18n.intlify.dev/guide/advanced/component) permite insertar elementos dentro de un mensaje traducido sin recurrir a `v-html`.
* **Mensajes junto a los componentes.** Con `@intlify/unplugin-vue-i18n`, un [bloque `<i18n>`](https://vue-i18n.intlify.dev/guide/advanced/sfc) mantiene los mensajes de un componente dentro de su propio componente de archivo único.
* **Herramientas.** El [plugin oficial de ESLint](https://eslint-plugin-vue-i18n.intlify.dev/rules/) detecta texto sin traducir en las plantillas, así como claves faltantes o sin usar.

## Lo que vue-i18n deja en tus manos

Aquí tienes una pequeña bandeja de entrada hecha con la Composition API de vue-i18n. Cada cadena tiene asignada una clave y el texto en inglés se guarda en un archivo de mensajes:

```json title="locales/en.json"
{
  "inbox": {
    "heading": "Inbox",
    "unread": "You have {n} unread message | You have {n} unread messages"
  }
}
```

```vue title="Inbox.vue"
<script setup>
import { useI18n } from 'vue-i18n'

defineProps({ count: { type: Number, required: true } })
const { t } = useI18n()
</script>

<template>
  <section>
    <h1>{{ t('inbox.heading') }}</h1>
    <p>{{ t('inbox.unread', count) }}</p>
  </section>
</template>
```

Cada idioma de destino necesita mensajes traducidos, proporcionados por tu equipo o por un servicio de traducción. Para el ejemplo, hay dos detalles de implementación importantes:

* **Reglas de pluralización.** La regla predeterminada de vue-i18n 11 selecciona las formas según su posición. El polaco usa las categorías `one`, `few`, `many` y `other`, así que configura una [función `pluralRules` personalizada](https://github.com/intlify/vue-i18n/blob/master/docs/guide/v11/essentials/pluralization.md) para asociar cada cantidad con la forma traducida correspondiente. vue-i18n 12, todavía en fase alfa, [pasa a usar `Intl.PluralRules`](https://github.com/intlify/vue-i18n/releases/tag/v12.0.0-alpha.4).
* **Números dentro de los mensajes.** El `{n}` de un mensaje plural no recibe formato según la configuración regional, por lo que 12345 se renderiza como &quot;12345&quot; en español en lugar de &quot;12.345&quot;, a menos que pases un valor ya formateado.

## Plantillas inline con traducciones generadas

`gt-vue` cumple la misma función que vue-i18n. Renderiza los mensajes de cada configuración regional, selecciona las formas plurales según las reglas CLDR de cada una y da formato a números, monedas y fechas con [`<Num>`](/docs/vue/reference/components/num), [`<Currency>`](/docs/vue/reference/components/currency) y [`<DateTime>`](/docs/vue/reference/components/datetime). Pero General Translation va más allá de vue-i18n: genera las traducciones. Esta es la misma bandeja de entrada, con el texto inline:

```vue title="Inbox.vue"
<script setup>
import { Num, Plural, T } from 'gt-vue'

defineProps({ count: { type: Number, required: true } })
</script>

<template>
  <section>
    <T><h1>Inbox</h1></T>
    <p>
      <T>
        <Plural :n="count">
          <template #singular>You have <Num :value="count" /> unread message</template>
          <template #plural>You have <Num :value="count" /> unread messages</template>
        </Plural>
      </T>
    </p>
  </section>
</template>
```

[`npx gt translate`](/docs/cli/reference/commands/translate) analiza tus plantillas, envía cada bloque [`<T>`](/docs/vue/reference/components/t) junto con su estructura a la API de General Translation y genera un catálogo para cada configuración regional de destino. Los slots `singular` y `plural` aportan el texto de origen para las formas del idioma de destino. [`<Plural>`](/docs/vue/reference/components/plural) elige entre esas formas según las reglas de la configuración regional, y [`<Num>`](/docs/vue/reference/components/num) da formato a la cantidad: 12,345 en inglés, 12.345 en español y 12 345 en polaco.

El ejemplo usa `gt-vue` 0.1.22 con Vue 3.3 o posterior; el [Inicio rápido de Vue](/docs/vue/quickstart) explica la configuración inicial del plugin y del cargador de catálogos. Tu equipo puede pulir el texto generado en el [panel de control](/docs/platform/dashboard/guides/reviewing-translations), y los [términos compartidos del glosario y los prompts personalizados](/docs/platform/dashboard/guides/defining-context-for-translations) mantienen la terminología coherente en todos los proyectos.

## vue-i18n vs. General Translation de un vistazo

| Característica          | vue-i18n                                                                                                            | General Translation (`gt-vue`)                                                                                         |
| ----------------------- | ------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------- |
| Cómo escribes el texto  | Claves en un archivo de mensajes o un bloque `<i18n>` por configuración regional                                    | Inline en las plantillas, dentro de [`<T>`](/docs/vue/reference/components/t)                                          |
| Traduce tu contenido    | No                                                                                                                  | Sí, con [`npx gt translate`](/docs/cli/reference/commands/translate)                                                   |
| Formas plurales         | Formas separadas por una barra vertical; la versión 11 requiere una regla personalizada para idiomas como el polaco | Slots de [`<Plural>`](/docs/vue/reference/components/plural) elegidos con reglas CLDR para cada configuración regional |
| Números en los mensajes | Solo se formatean si pasas un valor ya formateado                                                                   | [`<Num>`](/docs/vue/reference/components/num) da formato según cada configuración regional                             |
| Integración con la app  | Plugin de Vue; `@nuxtjs/i18n` añade enrutamiento de Nuxt, detección de idioma y etiquetas SEO                       | Plugin de Vue con cambio reactivo de configuración regional y carga del catálogo                                       |

Quédate con vue-i18n si dependes de `@nuxtjs/i18n` para el enrutamiento y el SEO en Nuxt, o si ya tienes un flujo de trabajo de catálogos que quieres conservar. Elige General Translation para mantener el texto legible en las plantillas de Vue, generar traducciones durante la compilación y permitir que los revisores las editen en el panel de control.

## Migrar desde vue-i18n

Migra los componentes de uno en uno: sustituye cada búsqueda por clave por su texto en inglés dentro de [`<T>`](/docs/vue/reference/components/t) y convierte los mensajes plurales separados por barras verticales en los slots `singular` y `plural` de [`<Plural>`](/docs/vue/reference/components/plural), como en el ejemplo anterior. Mantén vue-i18n y sus catálogos revisados para los componentes que aún no hayas migrado. Configura `gt-vue` con el [Inicio rápido de Vue](/docs/vue/quickstart) y luego ejecuta [`npx gt translate`](/docs/cli/reference/commands/translate) antes de la compilación.

## ¿Por qué vue-i18n muestra la forma plural incorrecta en polaco?

Configura en vue-i18n 11 una función `pluralRules` que asigne las categorías del polaco a las posiciones de tu mensaje. Por ejemplo, 1 selecciona `one`, 2 y 22 seleccionan `few`, y 5 selecciona `many`. Con General Translation, el ejemplo inline aporta el texto de origen, el servicio genera las formas traducidas y [`<Plural>`](/docs/vue/reference/components/plural) se encarga de seleccionar la adecuada.

## Conclusiones clave

* vue-i18n es un plugin de i18n consolidado con un sólido soporte para Nuxt, pero no traduce nada por sí mismo, y la versión 11 requiere una regla de pluralización personalizada para idiomas como el polaco.
* La CLI de General Translation genera traducciones a partir de bloques [`<T>`](/docs/vue/reference/components/t) inline; `gt-vue` las renderiza con selección de plurales y formato de números para cada configuración regional.
* Quédate con vue-i18n si ya tienes un flujo de trabajo consolidado con Nuxt o basado en catálogos. Elige `gt-vue` para dejar de mantener archivos de origen basados en claves.

## Related questions

- [General Translation vs. i18next, react-intl y next-intl: ¿qué biblioteca de i18n deberías usar?](https://generaltranslation.com/es/kb/general-translation-vs-i18n-libraries.mdx): Las bibliotecas de código abierto como i18next, react-intl y next-intl no traducen nada. Muestran las traducciones que tú proporcionas en un archivo de catálogo para cada idioma, escritas por ti, por tus traductores o por un servicio externo. Las bibliotecas de General Translation también son de código abierto y cumplen la misma función, pero además General Translation se encarga de traducir, usando tu código como contexto.
- [Alternativas a i18next: General Translation vs. i18next](https://generaltranslation.com/es/kb/general-translation-vs-i18next.mdx): Elige General Translation para mantener los textos inline en los componentes de React y generar traducciones a partir de su estructura JSX y del contexto del producto. También puedes seguir usando i18next y recurrir a General Translation para traducir los catálogos existentes. i18next se encarga de renderizar los mensajes y seleccionar los plurales, pero las traducciones las genera un servicio aparte.
- [General Translation vs. Lingui: ¿cuál deberías usar?](https://generaltranslation.com/es/kb/general-translation-vs-lingui.mdx): Elige General Translation para mantener el texto inline como en Lingui y generar las traducciones usando tu estructura JSX como contexto. Lingui extrae los mensajes inline a catálogos para que tus traductores o un servicio conectado los traduzcan. La CLI de General Translation actualiza las traducciones a medida que cambia tu código, y tu equipo las revisa en el panel de control.
- [Alternativas a react-intl: General Translation vs. react-intl](https://generaltranslation.com/es/kb/general-translation-vs-react-intl.mdx): General Translation permite a los equipos de React conservar la sintaxis de mensajes ICU y, además, añade generación de traducciones, terminología compartida y revisión en el panel de control. react-intl ofrece formato y herramientas de catálogos de FormatJS; General Translation, además, genera las traducciones.
- [¿Puedo hacer i18n sin archivos de traducción?](https://generaltranslation.com/es/kb/i18n-without-translation-files.mdx): Sí. Con gt-react o gt-next, el contenido se mantiene inline en tus componentes, dentro de un componente `<T>`, y las traducciones se generan en tiempo de compilación, por lo que no tienes que escribir claves ni archivos JSON por configuración regional ni mantenerlos sincronizados.

## Previous and next questions

- Previous question: [General Translation vs. Tolgee: ¿cuál deberías usar?](https://generaltranslation.com/es/kb/general-translation-vs-tolgee.mdx)
- Next question: [General Translation vs. Weblate: ¿cuál deberías usar?](https://generaltranslation.com/es/kb/general-translation-vs-weblate.mdx)

## Sitemap

See the [Knowledge Base sitemap](https://generaltranslation.com/es/kb/sitemap.md) for every article.