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

title: Traducción de cadenas
description: Cómo traducir etiquetas, atributos y cadenas compartidas de Vue con useGT y useMessages.
related:
  links:
    - /docs/vue/guides/translating-content
    - /docs/vue/guides/developing-spa-translations
    - /docs/vue/guides/formatting-variables
    - /docs/vue/guides/configuring

---

Usa [`useGT()`](/docs/vue/reference/composables/use-gt) para cadenas que no pueden expresarse como contenido de plantilla, como marcadores de posición, etiquetas accesibles y valores que se pasan a otro componente. Usa [`msg()`](/docs/vue/reference/functions/msg) con [`useMessages()`](/docs/vue/reference/composables/use-messages) cuando un mensaje estático se declara en un módulo y se renderiza en otro.

## Traduce con `useGT` [#use-gt]

Llama a [`useGT()`](/docs/vue/reference/composables/use-gt) durante la configuración del componente y, a continuación, llama a la función que devuelve desde la plantilla:

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

const gt = useGT();
</script>

<template>
  <input
    type="search"
    :placeholder="gt('Search products')"
    :aria-label="gt('Search')"
  />
</template>
```

Usa un literal de cadena para que la CLI pueda extraerlo. Las entradas de catálogo inexistentes devuelven la cadena de origen.

La única opción admitida es un `$context` estático:

```vue
<button>{{ gt('Archive', { $context: 'verb on a project action' }) }}</button>
```

Las llaves se tratan como texto literal. [`useGT()`](/docs/vue/reference/composables/use-gt) no procesa la sintaxis ICU, no interpola variables ni acepta opciones de string de React como `$id`, `$maxChars` y `$format`.

## Mantén actualizados los resultados traducidos [#reactivity]

La función que devuelve [`useGT()`](/docs/vue/reference/composables/use-gt) lee el catálogo activo cuando se invoca. Llámala desde una plantilla, un valor calculado o un efecto reactivo si el resultado debe actualizarse tras un cambio de configuración regional o de catálogo:

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

const gt = useGT();
const pageTitle = computed(() => gt('Account settings'));
</script>

<template>
  <h1>{{ pageTitle }}</h1>
</template>
```

`const pageTitle = gt('Account settings')` se traduce una vez durante la configuración y almacena una instantánea. No vuelve a ejecutarse cuando un plugin de [`createGT()`](/docs/vue/reference/functions/create-gt) cambia la configuración regional.

## Registrar mensajes compartidos [#messages]

Usa [`msg()`](/docs/vue/reference/functions/msg) para registrar cadenas estáticas en un módulo compartido. Marca el contenido para su extracción; no busca traducciones.

```ts title="src/messages.ts"
import { msg } from 'gt-vue';

export const statusMessages = {
  active: msg('Active', { $context: 'account status' }),
  paused: msg('Paused', { $context: 'account status' }),
};
```

Resuelve el mensaje seleccionado con [`useMessages()`](/docs/vue/reference/composables/use-messages) en el lugar donde se renderiza:

```vue title="src/components/StatusBadge.vue"
<script setup lang="ts">
import { computed } from 'vue';
import { useMessages } from 'gt-vue';
import { statusMessages } from '../messages';

const props = defineProps<{ status: keyof typeof statusMessages }>();
const m = useMessages();
const label = computed(() => m(statusMessages[props.status]));
</script>

<template>
  <span>{{ label }}</span>
</template>
```

Sin opciones, [`msg()`](/docs/vue/reference/functions/msg) devuelve la cadena original sin modificar. Con `$context`, añade metadatos opacos de búsqueda que [`useMessages()`](/docs/vue/reference/composables/use-messages) lee. No analices ni almacenes supuestos sobre esa representación codificada.

## Traduce contenido con valores en Runtime [#variables]

Las búsquedas de cadenas simples no interpolan datos en Runtime. Coloca la frase completa en [`<T>`](/docs/vue/reference/components/t) y marca el valor variable con [`<Var>`](/docs/vue/reference/components/var):

```vue
<T>¡Bienvenido de nuevo, <Var>{{ accountName }}</Var>!</T>
```

Usa [`<Num>`](/docs/vue/reference/components/num), [`<Currency>`](/docs/vue/reference/components/currency) y [`<DateTime>`](/docs/vue/reference/components/datetime) cuando el valor también requiera un formato adaptado a la configuración regional.

Las SPA que se ejecutan solo en el navegador y necesitan una búsqueda estática durante la evaluación de los módulos pueden usar [`t()`](/docs/vue/reference/functions/t) después de esperar a que se complete [`initializeGTSPA()`](/docs/vue/reference/functions/initialize-gt-spa). Sigue la guía [Desarrollo con traducciones para SPA](/docs/vue/guides/developing-spa-translations) para mantener el orden de importación obligatorio.
## Next steps

- /docs/vue/guides/translating-content
- /docs/vue/guides/developing-spa-translations
- /docs/vue/guides/formatting-variables
- /docs/vue/guides/configuring