# vue: Gestion des paramètres régionaux
URL: https://generaltranslation.com/fr/docs/vue/guides/managing-locales.mdx
---

title: Gestion des paramètres régionaux
description: Comment déclarer des paramètres régionaux dans Vue, créer un sélecteur de langue et gérer les changements réactifs ou par rechargement.
related:
  links:
    - /docs/vue/guides/configuring
    - /docs/vue/guides/storing-translations
    - /docs/vue/guides/developing-spa-translations
    - /docs/vue/guides/translating-content

---

Les codes de langue tels que `en-US` et `fr` associent le choix de langue d’un utilisateur au bon catalogue et aux règles de formatage appropriées. Configurez les paramètres régionaux source et cible, puis utilisez les composables de paramètre régional dans vos composants Vue.

## Déclarer les paramètres régionaux disponibles [#declare]

Définissez le paramètre régional source et les paramètres régionaux cibles dans `gt.config.json` :

```json title="gt.config.json"
{
  "defaultLocale": "en",
  "locales": ["es", "fr", "de"]
}
```

`defaultLocale` correspond à la langue de votre contenu source. `locales` répertorie les langues que la CLI doit générer.

Transmettez `defaultLocale` à [`createGT()`](/docs/vue/reference/functions/create-gt). Conservez la liste des langues cibles pour votre sélecteur de langue :

```ts
const gt = createGT({
  defaultLocale: gtConfig.defaultLocale,
  loadTranslations,
});

const availableLocales = [gtConfig.defaultLocale, ...gtConfig.locales];
```

Un plugin créé avec [`createGT()`](/docs/vue/reference/functions/create-gt) ne restreint pas les codes de langue à cette liste. Ne proposez dans votre interface que des valeurs prises en charge, et faites en sorte que le loader renvoie un catalogue vide ou rejette délibérément les requêtes non prises en charge.

## Lire le paramètre régional actif [#read]

[`useLocale()`](/docs/vue/reference/composables/use-locale) renvoie une ref Vue en lecture seule. Les modèles la déballent automatiquement :

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

const locale = useLocale();

watch(locale, (nextLocale) => {
  document.documentElement.lang = nextLocale;
});
</script>

<template>
  <p>Active locale: {{ locale }}</p>
</template>
```

Lisez `locale.value` dans des expressions de script ordinaires. Les composants, les valeurs calculées et les effets de rendu qui lisent la ref sont mis à jour une fois le changement réactif de paramètre régional terminé.

## Créer un sélecteur de langue [#switcher]

[`useSetLocale()`](/docs/vue/reference/composables/use-set-locale) renvoie un setter async. Utilisez `await` afin que l’interface puisse indiquer un chargement en cours ou gérer une erreur :

```vue title="src/components/LocaleSwitcher.vue"
<script setup lang="ts">
import { ref } from 'vue';
import { useLocale, useSetLocale } from 'gt-vue';

const props = defineProps<{ locales: readonly string[] }>();
const locale = useLocale();
const setLocale = useSetLocale();
const changing = ref(false);

async function changeLocale(event: Event) {
  const target = event.target as HTMLSelectElement;
  changing.value = true;

  try {
    await setLocale(target.value);
  } finally {
    changing.value = false;
  }
}
</script>

<template>
  <select :value="locale" :disabled="changing" @change="changeLocale">
    <option v-for="code in props.locales" :key="code" :value="code">
      {{ code }}
    </option>
  </select>
</template>
```

Avec un plugin [`createGT()`](/docs/vue/reference/functions/create-gt), le setter charge un catalogue qui n’est pas en cache avant de modifier le paramètre régional. Les chargements réussis sont mis en cache. Si des requêtes se chevauchent, seule la plus récente modifie le paramètre régional actif.

Un catalogue vide constitue un chargement réussi : le paramètre régional change et le contenu source s’affiche comme contenu de secours. Si le loader échoue, le paramètre régional actif et son cookie restent inchangés.

## Conserver le paramètre régional [#persistence]

Dans un navigateur, le paramètre régional actif est enregistré dans un cookie de session valable pour tous les chemins, nommé `generaltranslation.locale`. Lorsque `locale` est omis de [`createGT()`](/docs/vue/reference/functions/create-gt), ce cookie prévaut sur `defaultLocale`.

Définissez `localeCookieName` lorsque l’application doit partager un autre cookie avec un routeur ou un serveur :

```ts
createGT({
  defaultLocale: 'en',
  localeCookieName: 'my-app.locale',
  loadTranslations,
});
```

Utilisez [`useSetLocale()`](/docs/vue/reference/composables/use-set-locale) plutôt que d’écrire directement dans le cookie. Les navigateurs n’émettent pas d’événement réactif lors de la modification d’un cookie ; une écriture externe ne déclenche donc pas à elle seule un rendu Vue.

## Choisir un changement réactif ou avec rechargement [#runtime-mode]

Le mode d’initialisation détermine ce qui se produit après la modification du cookie :

* [`createGT()`](/docs/vue/reference/functions/create-gt) charge le catalogue et met à jour les consommateurs réactifs sans recharger la page.
* [`initializeGTSPA()`](/docs/vue/reference/functions/initialize-gt-spa) écrit le cookie et recharge le document afin que les appels à [`t()`](/docs/vue/reference/functions/t) au niveau du module soient de nouveau exécutés après le préchargement du nouveau paramètre régional.

L’initialiseur SPA accepte `locales` et se replie sur `defaultLocale` lorsqu’un paramètre régional enregistré ou demandé n’est pas pris en charge. Suivez le guide [Développer avec les traductions SPA](/docs/vue/guides/developing-spa-translations) lorsque la traduction au niveau du module nécessite ce comportement.

Pour le rendu côté serveur, résolvez le paramètre régional de la requête sur le serveur et transmettez-le explicitement à [`createGT()`](/docs/vue/reference/functions/create-gt). Cette valeur explicite prévaut sur un cookie de navigateur obsolète et garantit l’alignement entre le paramètre régional du rendu côté serveur et celui de l’hydratation.
## Next steps

- /docs/vue/guides/configuring
- /docs/vue/guides/storing-translations
- /docs/vue/guides/developing-spa-translations
- /docs/vue/guides/translating-content