# Vue: Traduire du contenu
URL: https://generaltranslation.com/fr/docs/vue/guides/translating-content.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: Comment traduire sur place le contenu d’un modèle Vue à l’aide du composant `<T>`.

Le composant [`<T>`](/docs/vue/reference/components/t) traduit son slot par défaut dans le paramètre régional actif. Rédigez la phrase complète dans votre langue source et encapsulez-la afin que le texte, les éléments imbriqués et le formatage soient traduits comme une seule unité.

## Encapsuler le contenu du modèle dans `<T>` [#wrap]

Placez dans le slot par défaut le contenu statique destiné aux utilisateurs :

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

<template>
  <T>
    <section>
      <h1>Welcome back</h1>
      <p>Your order is on its way.</p>
    </section>
  </T>
</template>
```

La CLI identifie l’entrée à partir de son contenu et de sa structure. N’utilisez pas de valeurs d’exécution dans une interpolation classique au sein de la traduction. Encapsulez-les avec [`<Var>`](/docs/vue/reference/components/var), [`<Num>`](/docs/vue/reference/components/num), [`<Currency>`](/docs/vue/reference/components/currency) ou [`<DateTime>`](/docs/vue/reference/components/datetime).

N’imbriquez pas un [`<T>`](/docs/vue/reference/components/t) dans un autre. Séparez plutôt les phrases indépendantes en traductions sœurs.

## Ajouter un contexte de traduction [#context]

Utilisez la prop `context`, adaptée à Vue, lorsqu’un même texte source peut avoir plusieurs sens :

```vue
<T context="a bank beside a river">Bank</T>
```

Le contexte modifie l’identité du catalogue et fournit au système de traduction les informations nécessaires pour choisir la formulation appropriée. Il ne s’affiche pas sur la page.

Les props facultatives `max-chars` et `requires-review` ajoutent des métadonnées de traduction. Conservez ces valeurs statiques afin que la CLI puisse les extraire.

## Traduire via un composant personnalisé [#components]

Le contenu écrit statiquement dans le slot par défaut d’un composant personnalisé est inclus dans la traduction du contenu environnant :

```vue title="src/components/HelpPanel.vue"
<script setup lang="ts">
import { T } from 'gt-vue';
import DocsLink from './DocsLink.vue';
</script>

<template>
  <T>
    Read the <DocsLink href="/docs">installation guide</DocsLink> before continuing.
  </T>
</template>
```

L’instance du composant personnalisé, ses écouteurs et ses props non traduisibles sont préservés, tandis que le contenu traduit remplace son slot par défaut et les props de texte statique prises en charge. `DocsLink` n’est pas remplacé par un Fragment : son état et son comportement restent donc associés à la même limite. Le [`<T>`](/docs/vue/reference/components/t) englobant conserve une racine Fragment dans les rendus source et traduits, plutôt que de changer de type de racine lors de la mise à jour.

Seul le contenu transmis au slot par défaut est visible pour la traduction externe. Le texte créé au sein de `DocsLink.vue` ne fait pas partie de cette entrée. Encapsulez ce texte interne dans son propre [`<T>`](/docs/vue/reference/components/t).

Les balises de composants personnalisés dans une traduction doivent être résolues à l’exécution. Importez les composants locaux ou enregistrez-les normalement ; un avertissement concernant un composant non résolu indique une erreur de configuration, et non une source de traduction prise en charge.

## Gardez les limites des slots explicites [#slots]

Un [`<T>`](/docs/vue/reference/components/t) englobant peut traduire le contenu standard du slot par défaut d’un composant personnalisé. Les slots scopés, les slots nommés arbitraires et les composants sélectionnés à l’exécution reposent sur un comportement que l’extracteur ne peut pas déterminer de manière fiable.

* Placez [`<T>`](/docs/vue/reference/components/t) dans un slot scopé ou nommé lorsque ce slot porte la phrase.
* Encapsulez une limite dynamique opaque dans [`<Var>`](/docs/vue/reference/components/var) lorsque sa sortie doit rester inchangée.
* Utilisez des balises directes pour les composants personnalisés. Les formes par 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 ; placez [`<T>`](/docs/vue/reference/components/t) dans les limites de sélecteur personnalisées, sélectionnées à l’exécution ou non résolues.

Pour [`<Suspense>`](https://vuejs.org/guide/built-ins/suspense), placez des traductions distinctes dans ses slots par défaut et de contenu de secours :

```vue
<Suspense>
  <T>Your dashboard is ready.</T>
  <template #fallback>
    <T>Loading your dashboard…</T>
  </template>
</Suspense>
```

Lorsqu’un [`<Suspense>`](https://vuejs.org/guide/built-ins/suspense) apparaît à l’intérieur d’un [`<T>`](/docs/vue/reference/components/t) englobant, son contenu par défaut peut être inclus, mais son contenu de secours est préservé en dehors de cette traduction. Le fait de conserver la phrase de chaque slot dans sa propre traduction rend l’attribution claire.

## Représenter la structure à l’exécution en toute sécurité [#dynamic-structure]

Les traductions doivent connaître toutes les formulations possibles au moment de l’extraction. Utilisez [`<Plural>`](/docs/vue/reference/components/plural) pour les formulations dépendant du nombre et [`<Branch>`](/docs/vue/reference/components/branch) pour les autres alternatives finies, plutôt que de placer directement des conditionnels d’exécution dans l’arborescence traduite.

```vue
<T>
  <Branch :branch="status">
    <template #active>Votre abonnement est actif.</template>
    <template #paused>Votre abonnement est suspendu.</template>
    <template #default>L'état de votre abonnement n'est pas disponible.</template>
  </Branch>
</T>
```

Le compilateur de modèles de Vue détermine comment l’indentation et les sauts de ligne deviennent des nœuds de texte. Écrivez directement dans la mise en page les expressions qui doivent être visibles par le lecteur et conservez un paramètre d’espacement statique pour que l’extraction et l’affichage utilisent la même structure.

## Next steps

- /docs/vue/guides/formatting-variables
- /docs/vue/guides/handling-plurals-and-branches
- /docs/vue/guides/translating-strings
- /docs/vue/guides/configuring

## Sitemap

See the full [sitemap](https://generaltranslation.com/sitemap.md) for all pages.