# vue: <T>
URL: https://generaltranslation.com/fr/docs/vue/reference/components/t.mdx
---

title: "<T>"
description: Traduit sur place le contenu des modèles Vue. Référence de l’API du composant <T>.

---

Le composant `<T>` lit le contenu rédigé statiquement dans son slot par défaut et affiche l’entrée correspondante du catalogue de contenu enrichi. Si aucune entrée ne correspond, il affiche le slot d’origine et n’ajoute aucun conteneur HTML.

## Vue d’ensemble [#overview]

Encapsulez le texte et le balisage devant constituer une seule traduction :

```vue
<T>
  Aujourd'hui, je suis allé au <strong>magasin</strong>.
</T>
```

Utilisez [`<Var>`](/docs/vue/reference/components/var), [`<Num>`](/docs/vue/reference/components/num), [`<Currency>`](/docs/vue/reference/components/currency) et [`<DateTime>`](/docs/vue/reference/components/datetime) pour les valeurs au moment de l’exécution. Utilisez [`<Plural>`](/docs/vue/reference/components/plural) ou [`<Branch>`](/docs/vue/reference/components/branch) pour les variantes.

## Fonctionnement [#how-it-works]

* **Extraction statique.** La CLI extrait la structure littérale du modèle, les métadonnées de traduction, les props textuelles prises en charge et toutes les branches prises en charge. Les expressions d’exécution qui contribuent au contenu traduit doivent être encapsulées dans un composant variable ; les props et écouteurs ordinaires des composants restent des valeurs d’exécution.
* **Recherche dans le catalogue.** Le composant calcule le hachage de sa structure source et de ses métadonnées, puis lit cette entrée dans le catalogue du plugin actif. En l’absence d’entrée ou si celle-ci est incompatible, il se replie sur le slot source.
* **Affichage réactif.** Avec un plugin [`createGT()`](/docs/vue/reference/functions/create-gt), le chargement d’un nouveau catalogue ou un changement de paramètre régional relance la recherche. Un plugin renvoyé par [`initializeGTSPA()`](/docs/vue/reference/functions/initialize-gt-spa) précharge le catalogue avant le montage et change de paramètre régional en rechargeant la page.
* **Racine Fragment.** Le composant renvoie toujours une frontière Fragment Vue. Il n’insère aucun élément DOM, et la sortie traduite peut contenir zéro, un ou plusieurs éléments enfants sans modifier cette frontière de composant.

`<T>` ne traite pas la syntaxe ICU et n’interpole pas les espaces réservés. Placez chaque valeur dynamique dans le composant variable approprié.

## Props et slots [#props]

| Nom                                 | Description                                                       | Type         | Facultatif | Par défaut |
| ----------------------------------- | ----------------------------------------------------------------- | ------------ | ---------- | ---------- |
| [`default`](#default-slot)          | Contenu statique du modèle à traduire.                            | `VNodeChild` | Oui        | Vide       |
| [`context`](#context)               | Contexte permettant de distinguer des contenus source identiques. | `string`     | Oui        | —          |
| [`id`](#id)                         | Métadonnées de compatibilité dépréciées.                          | `string`     | Oui        | —          |
| [`maxChars`](#maxchars)             | Longueur maximale demandée pour la traduction.                    | `number`     | Oui        | —          |
| [`requiresReview`](#requiresreview) | Indique que l’entrée nécessite une révision humaine.              | `boolean`    | Oui        | `false`    |

### Slot par défaut

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

Le texte, les éléments, les composants et les branches pris en charge qui composent la traduction. Le contenu rédigé doit être statique, sauf pour les valeurs encapsulées dans des composants variables.

### `context`

**Type** `string` · **Facultatif**

Contexte statique utilisé pour calculer le hachage du contenu. Utilisez-le lorsque le même texte source doit avoir des traductions différentes, par exemple `"Open"` employé comme verbe ou comme adjectif.

```vue
<T context="Button that opens the settings panel">Open</T>
```

### `id`

**Type** `string` · **Facultatif** · **Déprécié**

Métadonnées de compatibilité destinées au code adapté de l’API React. Elles ne remplacent pas le hachage du catalogue de Vue basé sur le contenu et ne doivent pas être utilisées comme identifiant de traduction stable.

### `maxChars`

**Type** `number` · **Facultatif**

Nombre maximal de caractères demandé aux outils de traduction. Il s’agit de métadonnées de traduction ; le runtime Vue ne tronque pas le contenu affiché.

Utilisez un entier lié statiquement dans un modèle :

```vue
<T :max-chars="80">Save your changes</T>
```

### `requiresReview`

**Type** `boolean` · **Facultatif** · **Par défaut** `false`

Indique que l’entrée de traduction nécessite une révision humaine. Il s’agit de métadonnées de traduction qui ne modifient pas l’affichage à elles seules.

```vue
<T requires-review>Terms and conditions apply.</T>
```

## Règles des modèles [#template-rules]

Conservez une structure source déterministe afin que l’extraction et l’affichage à l’exécution soient cohérents :

* N’imbriquez pas un `<T>` dans un autre.
* Encapsulez chaque interpolation et toute autre valeur d’exécution affichée comme contenu traduit dans un composant variable.
* Déplacez `v-if`, `v-else-if`, `v-else` et `v-for` hors de la traduction, ou représentez les alternatives avec [`<Branch>`](/docs/vue/reference/components/branch) ou [`<Plural>`](/docs/vue/reference/components/plural).
* N’utilisez pas `v-html`, `v-text` ou `<slot>` dans la traduction.
* Utilisez des balises directes pour les composants personnalisés. Les formes de sélecteur telles que `<component :is="...">` et `is="vue:..."` ne sont prises en charge que pour les composants GT reconnus ou les composants intégrés de Vue pris en charge que l’extracteur résout explicitement ; les sélecteurs arbitraires, personnalisés, sélectionnés à l’exécution ou non résolus ne sont pas pris en charge.
* Conservez `context` et `id` sous forme de chaînes statiques, `maxChars` sous forme d’entier lié statiquement et `requiresReview` sous forme de booléen statique ou d’attribut seul.

Les props statiques `placeholder`, `title`, `alt`, `aria-label`, `aria-labelledby` et `aria-describedby` des éléments HTML et des composants personnalisés participent à la traduction lorsque les valeurs enfants source et traduites passent toutes deux le contrôle de véracité à l’exécution. Les éléments sans enfants tels que `<img>` et les nœuds dont la valeur enfant source ou traduite est falsy conservent leurs props source. Traduisez séparément les props textuelles de ces éléments avec [`useGT()`](/docs/vue/reference/composables/use-gt). Les versions dynamiques de ces props textuelles ne sont pas prises en charge dans `<T>`.

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

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

<template>
  <T>
    Hello, <Var>{{ name }}</Var>!
  </T>
</template>
```

## Limites des composants [#components]

Le contenu statique rédigé dans le slot par défaut d’un composant personnalisé reste intégré à la traduction environnante. Vue conserve le composant, les props d’exécution non traduisibles, les écouteurs et l’identité, tout en remplaçant le contenu de son slot par défaut et les props de texte statique prises en charge :

```vue
<T>
  <DocsLink to="/docs">Lire la documentation</DocsLink>
</T>
```

Le contenu créé dans l’implémentation de `DocsLink` n’est pas visible par la traduction englobante. Utilisez une balise directe pour un composant personnalisé. Les formes de sélecteur sont limitées aux composants GT reconnus et aux composants intégrés de Vue pris en charge que l’extracteur résout explicitement ; les sélecteurs personnalisés arbitraires, sélectionnés à l’exécution ou non résolus ne constituent pas des sources de traduction.

Pour les slots de composants personnalisés nommés, qu’ils soient scopés ou arbitraires, placez plutôt `<T>` à l’intérieur du slot. Vous pouvez également encapsuler une frontière opaque de composant dynamique dans [`<Var>`](/docs/vue/reference/components/var).

Les frontières littérales `<Suspense>` prennent en charge un slot par défaut statique avec une seule racine. Ce contenu par défaut participe à la traduction englobante, tandis que le slot de contenu de secours est préservé mais exclu. Placez des composants `<T>` distincts dans les slots par défaut et de contenu de secours lorsque la frontière est dynamique ou aliasée d’une manière que l’extracteur ne peut pas résoudre.

## Espaces [#whitespace]

Le compilateur de modèles Vue détermine si les espaces du texte source sont condensés ou préservés. L’extracteur utilise les paramètres du compilateur Vue de l’application appelante ; modifier l’option `whitespace` du compilateur peut donc changer le contenu source et son hachage.

Conservez les espaces significatifs de manière explicite et inline :

```vue
<T>Hello <strong>world</strong>!</T>
```

Évitez les commentaires qui scindent le texte ou sont placés à côté d’espaces significatifs à l’intérieur de `<T>`. Vue peut préserver les commentaires différemment selon les builds, et l’extracteur rejette les cas où cela rendrait le hachage de traduction dépendant du build.