# vue: initializeGTSPA
URL: https://generaltranslation.com/fr/docs/vue/reference/functions/initialize-gt-spa.mdx
---

title: initializeGTSPA
description: Initialise et précharge le runtime Vue SPA uniquement côté navigateur pour les traductions au niveau du module. Référence d’API pour initializeGTSPA.

---

Cet initialiseur gère un runtime unique pour toute la page et met son catalogue chargé à disposition des appels synchrones à [`t()`](/docs/vue/reference/functions/t). Il complète le callback [`useGT()`](/docs/vue/reference/composables/use-gt) dans les composants ; il ne remplace pas le composable et ne prend pas en charge le rendu côté serveur.

## Vue d’ensemble [#overview]

```ts
function initializeGTSPA(
  options?: InitializeGTSPAOptions
): Promise<GTPlugin>;
```

Attendez que l’initialiseur soit terminé avant d’importer un module qui appelle [`t()`](/docs/vue/reference/functions/t), puis installez le plugin exactement tel qu’il est renvoyé :

```ts title="src/index.ts"
import { initializeGTSPA } from 'gt-vue';
import gtConfig from '../gt.config.json';
import loadTranslations from './loadTranslations';

async function bootstrap() {
  const gt = await initializeGTSPA({ ...gtConfig, loadTranslations });
  const { mount } = await import('./main');
  mount(gt);
}

void bootstrap().catch((error: unknown) => {
  console.error(error);
});
```

## Paramètres [#parameters]

| Paramètre | Description                                                                                                                                 | Type                                                                            | Facultatif | Par défaut |
| --------- | ------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------- | ---------- | ---------- |
| `options` | Configuration du loader du paramètre régional SPA, des cookies, du mapping, de la liste des paramètres régionaux autorisés et du catalogue. | [`InitializeGTSPAOptions`](/docs/vue/reference/types/initialize-gt-spa-options) | Oui        | `{}`       |

| Option             | Description                                                                                                                                            | Type                                                                  | Facultatif | Par défaut                   |
| ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------- | ---------- | ---------------------------- |
| `defaultLocale`    | Paramètre régional source et de secours.                                                                                                               | `string`                                                              | Oui        | `en`                         |
| `loadTranslations` | Loader asynchrone du catalogue cible.                                                                                                                  | [`LoadTranslations`](/docs/vue/reference/types/load-translations)     | Oui        | Catalogue vide               |
| `locale`           | Paramètre régional initial explicite. Il prévaut sur le cookie du navigateur.                                                                          | `string`                                                              | Oui        | Cookie, puis `defaultLocale` |
| `localeCookieName` | Cookie utilisé pour conserver le paramètre régional sélectionné.                                                                                       | `string`                                                              | Oui        | `generaltranslation.locale`  |
| `locales`          | Paramètres régionaux cibles acceptés depuis la configuration, les cookies et les setters.                                                              | `readonly string[]`                                                   | Oui        | Sans restriction             |
| `customMapping`    | Objet associant les valeurs `code` utilisées pour la correspondance des paramètres régionaux et la résolution du paramètre régional pour le formatage. | [`CustomMapping`](/docs/platform/core/reference/types/custom-mapping) | Oui        | Aucun                        |

`locales` contient généralement les paramètres régionaux cibles définis dans `gt.config.json` ; l’initialiseur ajoute `defaultLocale` à l’ensemble des paramètres régionaux pris en charge. Consultez [`InitializeGTSPAOptions`](/docs/vue/reference/types/initialize-gt-spa-options) pour plus de détails sur la résolution.

## Initialisation [#initialization]

Le premier appel déclenche l’initialisation de la page et en définit les options. Les appels simultanés partagent cette promesse. Une fois l’opération réussie, tous les appels ultérieurs renvoient le même [`GTPlugin`](/docs/vue/reference/types/gt-plugin) et ignorent les nouvelles options.

Avant d’aboutir, l’initialisation effectue les étapes suivantes :

1. Résout le paramètre régional explicite, le cookie enregistré ou le paramètre régional par défaut à partir de `locales` et de `customMapping`.
2. Crée un runtime dont le paramètre régional actif reste épinglé pendant toute la durée de vie de la page.
3. Charge et met en cache le catalogue cible actif. Le paramètre régional par défaut utilise le contenu source et ignore le loader.
4. Rend le runtime disponible pour les appels [`t()`](/docs/vue/reference/functions/t) au niveau du module.

Si le chargement est rejeté, l’initialisation consigne le diagnostic du loader et est rejetée. La tentative échouée ne devient pas le document unique, ce qui permet à un appel ultérieur de réessayer.

## Changements de paramètre régional [#locale-changes]

Le plugin renvoyé utilise une transition de rechargement. L’appel à `plugin.setLocale(locale)` ou à [`useSetLocale()`](/docs/vue/reference/composables/use-set-locale) résout le paramètre régional demandé, l’enregistre dans le cookie configuré et recharge le document.

La page actuelle conserve son paramètre régional épinglé jusqu’au rechargement. Lors du démarrage suivant, le nouveau cookie est résolu et ce catalogue est préchargé avant l’exécution des modules de l’application, de sorte que chaque traduction au niveau du module est réévaluée. Le setter ne charge pas le catalogue cible dans la page actuelle avant le rechargement.

Si `locales` est fourni, la correspondance est insensible à la casse et prend en charge les alias canoniques. L’orthographe définie dans `gt.config.json` est préservée pour les chemins du loader. Les paramètres régionaux enregistrés ou demandés non pris en charge sont résolus vers `defaultLocale`. Lorsque `locales` est omis, les codes de langue autres que celui par défaut restent sans restriction.

## Valeur de retour et erreurs [#return-errors]

**Renvoie** `Promise<`[`GTPlugin`](/docs/vue/reference/types/gt-plugin)`>`

La promesse se résout uniquement lorsque le paramètre régional initial est prêt. Installez ce plugin précis : la création d’une instance [`createGT()`](/docs/vue/reference/functions/create-gt) distincte fournirait aux composants un paramètre régional et un cache de catalogue différents de ceux de [`t()`](/docs/vue/reference/functions/t).

La promesse renvoyée est rejetée dans un environnement de rendu côté serveur, car l’état global du navigateur et les rechargements du document ne sont pas sûrs par requête. Pour le rendu côté serveur, utilisez un plugin [`createGT({ locale })`](/docs/vue/reference/functions/create-gt#server-rendering) par requête et [`useGT()`](/docs/vue/reference/composables/use-gt) dans les composants.

## Exemple [#example]

Conservez le point d’entrée Vue habituel dans une fonction de montage :

```ts title="src/main.ts"
import { createApp } from 'vue';
import type { GTPlugin } from 'gt-vue';
import App from './App.vue';

export function mount(gt: GTPlugin) {
  createApp(App).use(gt).mount('#app');
}
```

Tout module chargé via l’importation dynamique suivante peut alors effectuer des traductions pendant son évaluation :

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

export const navigation = [
  { label: t('Documentation'), href: '/docs' },
  { label: t('Settings'), href: '/settings' },
];
```