# vue: <Var>
URL: https://generaltranslation.com/it/docs/vue/reference/components/var.mdx
---

title: "<Var>"
description: Renderizza un valore dinamico all'interno di una traduzione senza tradurlo. Riferimento API del componente <Var>.

---

Il componente `<Var>` tratta il contenuto del relativo slot predefinito come un unico valore di runtime opaco. La traduzione rich text circostante può spostare tale valore senza inviarne il contenuto alla traduzione.

## Panoramica [#overview]

Inserisci `<Var>` all&#39;interno di [`<T>`](/docs/vue/reference/components/t) attorno a un valore da renderizzare senza modifiche:

```vue
<T>Il tuo nome è <Var>{{ user.name }}</Var>.</T>
```

Utilizza i componenti di formattazione per numeri, valute e date conformi all&#39;impostazione regionale.

## Come funziona [#how-it-works]

* **Valore opaco.** L&#39;estrattore registra un placeholder di variabile anziché il contenuto dello slot a runtime.
* **Inserimento stabile.** La traduzione rich text attiva può posizionare il placeholder dove richiesto dalla lingua di destinazione e Vue vi reinserisce il contenuto originale dello slot.
* **Output come frammento.** Il componente non aggiunge alcun wrapper HTML e preserva zero, uno o più contenuti figlio dello slot.

`<Var>` è progettato esclusivamente come contenuto figlio. Non accetta le prop `name` o `value` e gli attributi e i listener di fallthrough non vengono applicati ai suoi contenuti figlio.

## Slot [#slots]

| Slot                       | Descrizione                                                | Tipo         | Facoltativo | Predefinito |
| -------------------------- | ---------------------------------------------------------- | ------------ | ----------- | ----------- |
| [`default`](#default-slot) | Contenuto in fase di runtime da preservare senza tradurre. | `VNodeChild` | Sì          | Vuoto       |

### Slot predefinito

**Tipo** `VNodeChild` · **Facoltativo** · **Predefinito** Vuoto

Contenuto da renderizzare senza modifiche. Può essere testo, un&#39;interpolazione, un elemento o un altro componente.

## Esempi [#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>
```

Per i valori da formattare in base all&#39;impostazione regionale attiva, utilizza invece [`<Num>`](/docs/vue/reference/components/num), [`<Currency>`](/docs/vue/reference/components/currency) o [`<DateTime>`](/docs/vue/reference/components/datetime).