# vue: Traducción de contenido
URL: https://generaltranslation.com/es/docs/vue/guides/translating-content.mdx
---

title: Traducción de contenido
description: Cómo traducir contenido de plantillas Vue en el mismo documento con el componente <T>.
related:
  links:
    - /docs/vue/guides/formatting-variables
    - /docs/vue/guides/handling-plurals-and-branches
    - /docs/vue/guides/translating-strings
    - /docs/vue/guides/configuring

---

El componente [`<T>`](/docs/vue/reference/components/t) traduce su slot predeterminado a la configuración regional activa. Escribe la frase completa en el idioma de origen y envuélvela para que el texto, los elementos anidados y el formato se traduzcan como una sola unidad.

## Envuelve el contenido de la plantilla con `<T>` [#wrap]

Coloca el contenido estático dirigido al usuario en el slot predeterminado:

```vue
<script setup lang="ts">
import { T } from 'gt-vue';
</script>

<template>
  <T>
    <section>
      <h1>Welcome back</h1>
      <p>Your order is on its way.</p>
    </section>
  </T>
</template>
```

La CLI identifica la entrada por su contenido y estructura. Mantén los valores de tiempo de ejecución fuera de la interpolación habitual de la traducción. Envuélvelos con [`<Var>`](/docs/vue/reference/components/var), [`<Num>`](/docs/vue/reference/components/num), [`<Currency>`](/docs/vue/reference/components/currency) o [`<DateTime>`](/docs/vue/reference/components/datetime).

No anides un [`<T>`](/docs/vue/reference/components/t) dentro de otro. En su lugar, divide las frases independientes en traducciones del mismo nivel.

## Añade contexto de traducción [#context]

Usa la prop `context`, compatible con Vue, cuando un mismo texto de origen pueda tener distintos significados:

```vue
<T context="a bank beside a river">Bank</T>
```

El contexto cambia la identidad del catálogo y proporciona al sistema de traducción la información necesaria para elegir la redacción adecuada. No se muestra en la página.

Las props opcionales `max-chars` y `requires-review` añaden metadatos de traducción. Mantén estos valores estáticos para que la CLI pueda extraerlos.

## Traducir mediante un componente personalizado [#components]

El contenido creado estáticamente en el slot predeterminado de un componente personalizado se incluye en la traducción circundante:

```vue title="src/components/HelpPanel.vue"
<script setup lang="ts">
import { T } from 'gt-vue';
import DocsLink from './DocsLink.vue';
</script>

<template>
  <T>
    Read the <DocsLink href="/docs">installation guide</DocsLink> before continuing.
  </T>
</template>
```

La instancia del componente personalizado, sus listeners y sus props no traducibles se conservan, mientras que el contenido traducido reemplaza su slot predeterminado y las props de texto estático compatibles. `DocsLink` no se reemplaza por un Fragment, por lo que su estado y comportamiento permanecen asociados al mismo límite. El [`<T>`](/docs/vue/reference/components/t) circundante mantiene una raíz Fragment tanto en los renderizados de origen como en los traducidos, en lugar de cambiar el tipo de raíz durante la actualización.

Solo el contenido pasado al slot predeterminado es visible para la traducción externa. El texto creado dentro de `DocsLink.vue` no forma parte de esa entrada. Envuelve ese texto interno en su propio [`<T>`](/docs/vue/reference/components/t).

Las etiquetas de componentes personalizados dentro de una traducción deben resolverse en tiempo de ejecución. Importa los componentes locales o regístralos de forma habitual; una advertencia sobre un componente sin resolver es un error de configuración, no una fuente de traducción compatible.

## Mantén explícitos los límites de los slots [#slots]

Un [`<T>`](/docs/vue/reference/components/t) externo puede traducir el contenido normal del slot predeterminado de un componente personalizado. Los slots con ámbito, los slots con nombres arbitrarios y los componentes seleccionados en tiempo de ejecución dependen de comportamientos que la extracción no puede determinar de forma segura.

* Coloca [`<T>`](/docs/vue/reference/components/t) dentro de un slot con ámbito o con nombre cuando ese slot contenga la frase.
* Envuelve un límite dinámico opaco con [`<Var>`](/docs/vue/reference/components/var) cuando su salida deba permanecer sin cambios.
* Usa etiquetas directas para los componentes personalizados. Las formas de selector se limitan a los componentes de GT reconocidos y a los elementos integrados de Vue compatibles que el extractor resuelve explícitamente; coloca [`<T>`](/docs/vue/reference/components/t) dentro de límites de selector personalizados, seleccionados en tiempo de ejecución o sin resolver.

Para [`<Suspense>`](https://vuejs.org/guide/built-ins/suspense), coloca traducciones independientes en sus slots predeterminado y de contenido alternativo:

```vue
<Suspense>
  <T>Your dashboard is ready.</T>
  <template #fallback>
    <T>Loading your dashboard…</T>
  </template>
</Suspense>
```

Cuando [`<Suspense>`](https://vuejs.org/guide/built-ins/suspense) aparece dentro de un [`<T>`](/docs/vue/reference/components/t) externo, su contenido predeterminado puede incluirse, pero su contenido alternativo se conserva fuera de esa traducción. Mantener la frase de cada ranura en su propia traducción deja clara su pertenencia.

## Representa de forma segura la estructura en tiempo de ejecución [#dynamic-structure]

Las traducciones deben conocer todas las frases posibles en el momento de la extracción. Usa [`<Plural>`](/docs/vue/reference/components/plural) para textos que dependan del conteo y [`<Branch>`](/docs/vue/reference/components/branch) para otras alternativas finitas, en lugar de incluir condicionales en tiempo de ejecución directamente en el árbol traducido.

```vue
<T>
  <Branch :branch="status">
    <template #active>Tu suscripción está activa.</template>
    <template #paused>Tu suscripción está en pausa.</template>
    <template #default>El estado de tu suscripción no está disponible.</template>
  </Branch>
</T>
```

El compilador de plantillas de Vue controla cómo la sangría y los saltos de línea se convierten en nodos de texto. Escribe en el layout las frases inline que deban mostrarse al lector y mantén fija la configuración de espacios en blanco del compilador para que la extracción y el renderizado utilicen la misma estructura.
## Next steps

- /docs/vue/guides/formatting-variables
- /docs/vue/guides/handling-plurals-and-branches
- /docs/vue/guides/translating-strings
- /docs/vue/guides/configuring