# Vue: Traduction de chaînes de caractères
URL: https://generaltranslation.com/fr/docs/vue/guides/translating-strings.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: Comment traduire les étiquettes, attributs et chaînes de caractères partagées dans Vue avec useGT et useMessages.

Utilisez [`useGT()`](/docs/vue/reference/composables/use-gt) pour les chaînes de caractères qui ne peuvent pas être exprimées dans le contenu d’un modèle, comme les espaces réservés, les étiquettes accessibles et les valeurs transmises à un autre composant. Utilisez [`msg()`](/docs/vue/reference/functions/msg) avec [`useMessages()`](/docs/vue/reference/composables/use-messages) lorsqu’un message statique est déclaré dans un module et affiché dans un autre.

## Traduire avec `useGT` [#use-gt]

Appelez [`useGT()`](/docs/vue/reference/composables/use-gt) lors de l’initialisation du composant, puis appelez la fonction renvoyée dans le modèle :

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

const gt = useGT();
</script>

<template>
  <input
    type="search"
    :placeholder="gt('Search products')"
    :aria-label="gt('Search')"
  />
</template>
```

Utilisez un littéral de chaîne pour que la CLI puisse l’extraire. Les entrées de catalogue manquantes renvoient la chaîne source.

La seule option prise en charge est un `$context` statique :

```vue
<button>{{ gt('Archive', { $context: 'verb on a project action' }) }}</button>
```

Les accolades sont interprétées comme du texte littéral. [`useGT()`](/docs/vue/reference/composables/use-gt) ne traite pas la syntaxe ICU, n’interpole pas les variables et n’accepte pas les options de chaîne React telles que `$id`, `$maxChars` et `$format`.

## Garder les résultats traduits réactifs [#reactivity]

La fonction renvoyée par [`useGT()`](/docs/vue/reference/composables/use-gt) lit le catalogue actif lorsqu’elle est appelée. Appelez-la dans un modèle, une valeur calculée ou un effet réactif si le résultat doit être mis à jour après un changement de paramètre régional ou de catalogue :

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

const gt = useGT();
const pageTitle = computed(() => gt('Account settings'));
</script>

<template>
  <h1>{{ pageTitle }}</h1>
</template>
```

`const pageTitle = gt('Account settings')` est traduit une seule fois lors de la configuration et stocke un instantané. Il ne s’exécute pas de nouveau lorsqu’un plugin [`createGT()`](/docs/vue/reference/functions/create-gt) change de paramètre régional.

## Enregistrer des messages partagés [#messages]

Utilisez [`msg()`](/docs/vue/reference/functions/msg) pour enregistrer des chaînes statiques dans un module partagé. Cette fonction marque le contenu pour l’extraction ; elle n’effectue aucune recherche de traduction.

```ts title="src/messages.ts"
import { msg } from 'gt-vue';

export const statusMessages = {
  active: msg('Active', { $context: 'account status' }),
  paused: msg('Paused', { $context: 'account status' }),
};
```

Résolvez le message sélectionné avec [`useMessages()`](/docs/vue/reference/composables/use-messages) à l’endroit où il est affiché :

```vue title="src/components/StatusBadge.vue"
<script setup lang="ts">
import { computed } from 'vue';
import { useMessages } from 'gt-vue';
import { statusMessages } from '../messages';

const props = defineProps<{ status: keyof typeof statusMessages }>();
const m = useMessages();
const label = computed(() => m(statusMessages[props.status]));
</script>

<template>
  <span>{{ label }}</span>
</template>
```

Sans options, [`msg()`](/docs/vue/reference/functions/msg) renvoie la chaîne source inchangée. Avec `$context`, elle ajoute des métadonnées opaques de recherche que [`useMessages()`](/docs/vue/reference/composables/use-messages) lit. N’analysez pas cette représentation encodée et ne présumez pas de son contenu.

## Traduire du contenu avec des valeurs d’exécution [#variables]

Les recherches de simples chaînes de caractères n’interpolent pas les données d’exécution. Placez la phrase complète dans [`<T>`](/docs/vue/reference/components/t) et marquez la valeur variable avec [`<Var>`](/docs/vue/reference/components/var) :

```vue
<T>Welcome back, <Var>{{ accountName }}</Var>!</T>
```

Utilisez [`<Num>`](/docs/vue/reference/components/num), [`<Currency>`](/docs/vue/reference/components/currency) et [`<DateTime>`](/docs/vue/reference/components/datetime) lorsque la valeur doit également être formatée selon le paramètre régional.

Les SPA exécutées uniquement dans le navigateur qui nécessitent une recherche statique lors de l’évaluation des modules peuvent utiliser [`t()`](/docs/vue/reference/functions/t) après avoir attendu [`initializeGTSPA()`](/docs/vue/reference/functions/initialize-gt-spa). Consultez [Développer avec les traductions SPA](/docs/vue/guides/developing-spa-translations) pour respecter l’ordre d’importation requis.

## Next steps

- /docs/vue/guides/translating-content
- /docs/vue/guides/developing-spa-translations
- /docs/vue/guides/formatting-variables
- /docs/vue/guides/configuring

## Sitemap

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