# vue: <Var>
URL: https://generaltranslation.com/es/docs/vue/reference/components/var.mdx
---
title: "<Var>"
description: Renderiza un valor dinámico dentro de una traducción sin traducirlo. Referencia de la API del componente <Var>.

---

El componente `<Var>` marca el contenido de su ranura predeterminada como un único valor opaco en tiempo de ejecución. La traducción enriquecida circundante puede mover ese valor sin enviar su contenido a traducir.

## Descripción general [#overview]

Coloca `<Var>` dentro de [`<T>`](/docs/vue/reference/components/t) para envolver un valor que debe renderizarse sin cambios:

```vue
<T>Tu nombre es <Var>{{ user.name }}</Var>.</T>
```

Use los componentes de formato para números, monedas y fechas adaptados a la configuración regional.

## Cómo funciona [#how-it-works]

* **Valor opaco.** El extractor registra un marcador de posición de variable en lugar del contenido de la ranura en tiempo de ejecución.
* **Inserción estable.** La traducción enriquecida activa puede colocar el marcador de posición donde lo requiera el idioma de destino, y Vue vuelve a insertar allí el contenido original de la ranura.
* **Salida de fragmento.** El componente no añade ningún contenedor HTML y conserva cero, uno o varios elementos secundarios de la ranura.

`<Var>` está diseñado intencionadamente para usarse solo como elemento secundario. No acepta las props `name` ni `value`, y los atributos y detectores de eventos transferidos no se aplican a sus elementos secundarios.

## Ranuras [#slots]

| Ranura                     | Descripción                                                    | Tipo         | Opcional | predeterminado |
| -------------------------- | -------------------------------------------------------------- | ------------ | -------- | -------------- |
| [`default`](#default-slot) | Contenido en tiempo de ejecución que se conserva sin traducir. | `VNodeChild` | Sí       | Vacío          |

### Ranura predeterminada

**Tipo** `VNodeChild` · **Opcional** · **Predeterminado** Vacío

Contenido que se renderiza sin cambios. Puede ser texto, una interpolación, un elemento u otro componente.

## Ejemplos [#examples]

```vue title="AccountSummary.vue"
<script setup lang="ts">
import { T, Var } from 'gt-vue';

defineProps<{ accountName: string; apiKey: string }>();
</script>

<template>
  <T>
    Account: <Var>{{ accountName }}</Var>
    <br />
    API key: <Var><code>{{ apiKey }}</code></Var>
  </T>
</template>
```

Para los valores que deban formatearse según la configuración regional activa, usa [`<Num>`](/docs/vue/reference/components/num), [`<Currency>`](/docs/vue/reference/components/currency) o [`<DateTime>`](/docs/vue/reference/components/datetime).