# vue: <Var>
URL: https://generaltranslation.com/fr/docs/vue/reference/components/var.mdx
---
title: "<Var>"
description: Affiche une valeur dynamique dans une traduction sans la traduire. Référence API du composant <Var>.

---

Le composant `<Var>` traite le contenu de son slot par défaut comme une unique valeur opaque à l’exécution. La traduction enrichie environnante peut déplacer cette valeur sans envoyer son contenu à la traduction.

## Vue d’ensemble [#overview]

Placez `<Var>` à l’intérieur de [`<T>`](/docs/vue/reference/components/t), autour d’une valeur qui doit s’afficher sans modification :

```vue
<T>Votre nom est <Var>{{ user.name }}</Var>.</T>
```

Utilisez les composants de formatage pour afficher les nombres, les devises et les dates selon le paramètre régional.

## Fonctionnement [#how-it-works]

* **Valeur opaque.** L’extracteur enregistre un placeholder de variable au lieu du contenu du slot au moment de l’exécution.
* **Insertion stable.** La traduction enrichie active peut placer le placeholder à l’emplacement requis par la langue cible, et Vue y réinsère le contenu d’origine du slot.
* **Sortie sous forme de fragment.** Le composant n’ajoute aucun conteneur HTML et préserve zéro, un ou plusieurs éléments enfants du slot.

`<Var>` est volontairement réservé aux éléments enfants. Il n’accepte pas les props `name` ou `value`, et les attributs et écouteurs transmis ne sont pas appliqués à ses éléments enfants.

## Slots [#slots]

| Slot                       | Description                                       | Type         | Facultatif | Par défaut |
| -------------------------- | ------------------------------------------------- | ------------ | ---------- | ---------- |
| [`default`](#default-slot) | Contenu d’exécution à préserver sans le traduire. | `VNodeChild` | Oui        | Vide       |

### Slot par défaut

**Type** `VNodeChild` · **Facultatif** · **Par défaut** Vide

Contenu à afficher tel quel. Il peut s’agir de texte, d’une interpolation, d’un élément ou d’un autre composant.

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

Pour les valeurs à formater selon le paramètre régional actif, utilisez plutôt [`<Num>`](/docs/vue/reference/components/num), [`<Currency>`](/docs/vue/reference/components/currency) ou [`<DateTime>`](/docs/vue/reference/components/datetime).