# vue: useGT
URL: https://generaltranslation.com/fr/docs/vue/reference/composables/use-gt.mdx
---

title: useGT
description: Obtenez une fonction permettant de traduire des chaînes inline. Référence de l’API useGT.

---

Le composable `useGT` renvoie de manière synchrone une chaîne simple issue du catalogue. Utilisez-le pour les étiquettes, les espaces réservés et d’autres chaînes autonomes dans un composant Vue.

## Vue d’ensemble [#overview]

Appelez `useGT` lors de l’initialisation du composant, puis appelez la fonction renvoyée dans le modèle ou dans un autre effet réactif :

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

const gt = useGT();
</script>

<template>
  <input :placeholder="gt('Search products')" />
</template>
```

Utilisez plutôt [`<T>`](/docs/vue/reference/components/t) lorsque le texte et le balisage imbriqué doivent former une seule traduction enrichie. Utilisez [`t()`](/docs/vue/reference/functions/t) pour les chaînes définies au niveau du module dans une SPA exécutée uniquement dans le navigateur.

## Fonctionnement [#how-it-works]

* **Simples chaînes de caractères uniquement.** La fonction renvoyée calcule le hachage de la chaîne source et du contexte facultatif, puis consulte le catalogue chargé du plugin actif.
* **Repli sur la source.** Une entrée manquante ou dont la structure ne correspond pas à celle attendue dans le catalogue renvoie la chaîne source.
* **Chaînes de caractères simples uniquement.** Les accolades restent littérales. La fonction ne prend pas en charge la syntaxe ICU, les variables d’interpolation, `$id`, `$maxChars` ni `$format`.
* **Portée du plugin.** Appelez le composable depuis un composant situé sous le plugin renvoyé par [`createGT()`](/docs/vue/reference/functions/create-gt) ou [`initializeGTSPA()`](/docs/vue/reference/functions/initialize-gt-spa). L’appeler sans plugin installé génère une erreur. Un plugin [`createGT()`](/docs/vue/reference/functions/create-gt) associé à une requête prend également en charge les composants affichés côté serveur.

L’extracteur nécessite une chaîne de caractères statiquement analysable, telle qu’un littéral de chaîne, un littéral de gabarit sans expressions ou un identifiant immuable qui se résout en une telle chaîne. Le contexte doit également être statique afin que le catalogue généré et le hachage d’exécution correspondent.

## Paramètres [#parameters]

`useGT` ne prend aucun paramètre.

## Renvoie [#returns]

**Type** `(message: string, options?: GTStringOptions) => string`

Fonction synchrone avec les paramètres suivants :

| Paramètre             | Description                                                  | Type                                                             | Facultatif | Par défaut |
| --------------------- | ------------------------------------------------------------ | ---------------------------------------------------------------- | ---------- | ---------- |
| [`message`](#message) | Chaîne source statique à traduire.                           | `string`                                                         | Non        | —          |
| [`options`](#options) | Contexte utilisé pour lever l’ambiguïté de la chaîne source. | [`GTStringOptions`](/docs/vue/reference/types/gt-string-options) | Oui        | `{}`       |

### `message`

**Type** `string` · **Obligatoire**

La chaîne source statique enregistrée par l’extracteur et recherchée à l’exécution.

### `options`

**Type** [`GTStringOptions`](/docs/vue/reference/types/gt-string-options) · **facultatif** · **Par défaut** `{}`

Le seul champ pris en charge est `$context?: string`. Il modifie l’identité du catalogue afin que des chaînes source identiques puissent avoir des traductions différentes.

```vue
<button>{{ gt('Open', { $context: 'Verb: open the settings panel' }) }}</button>
```

## Réactivité [#reactivity]

La fonction renvoyée lit l’état réactif du catalogue et du paramètre régional lorsque vous l’appelez. Une expression de modèle est automatiquement réévaluée :

```vue
<p>{{ gt('Hello World') }}</p>
```

Pour une valeur créée lors de l’initialisation, encapsulez l’appel dans `computed` :

```ts
import { computed } from 'vue';

const gt = useGT();
const message = computed(() => gt('Hello World'));
```

L’appeler une seule fois crée un instantané sous forme de simple chaîne de caractères :

```ts
const gt = useGT();
const message = gt('Hello World');
```

Avec un plugin [`createGT()`](/docs/vue/reference/functions/create-gt), cet instantané ne se met pas à jour une fois le catalogue initial chargé ni lorsque le paramètre régional change. Une SPA exécutée dans le navigateur et initialisée avec [`initializeGTSPA()`](/docs/vue/reference/functions/initialize-gt-spa) précharge les données avant l’exécution des composants et recharge la page lorsque le paramètre régional change ; les instantanés créés lors de l’initialisation sont donc recréés avec le paramètre régional chargé.

## Exemple [#example]

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

const gt = useGT();
const emptyMessage = computed(() =>
  gt('No results', { $context: 'Empty search results' })
);
</script>

<template>
  <form>
    <input :placeholder="gt('Search products')" />
    <p>{{ emptyMessage }}</p>
  </form>
</template>
```