# vue: Développer avec les traductions SPA
URL: https://generaltranslation.com/fr/docs/vue/guides/developing-spa-translations.mdx
---

title: Développer avec les traductions SPA
description: Comment précharger une SPA Vue et traduire des chaînes statiques au niveau du module avec t().
related:
  links:
    - /docs/vue/guides/translating-strings
    - /docs/vue/guides/managing-locales
    - /docs/vue/guides/storing-translations
    - /docs/vue/guides/configuring

---

Les applications monopages exécutées uniquement dans le navigateur peuvent précharger le catalogue actif avant l’exécution des modules de l’application. Cela permet d’effectuer des appels synchrones à [`t()`](/docs/vue/reference/functions/t) au niveau du module pour les constantes, les définitions de navigation et d’autres chaînes en dehors des composants Vue.

[`initializeGTSPA()`](/docs/vue/reference/functions/initialize-gt-spa) complète [`useGT()`](/docs/vue/reference/composables/use-gt) ; elle ne le remplace pas. Utilisez le composable pour le contenu habituel des composants ainsi que pour les applications Vue ou affichées côté serveur qui nécessitent un changement réactif de paramètre régional.

## Choisissez le runtime SPA [#choose]

Utilisez [`initializeGTSPA()`](/docs/vue/reference/functions/initialize-gt-spa) uniquement si toutes les conditions suivantes sont remplies :

* L’application s’exécute entièrement dans le navigateur.
* Les modules doivent traduire les chaînes lors de leur évaluation.
* Il est acceptable de recharger la page lorsque le paramètre régional change.

Utilisez [`createGT()`](/docs/vue/reference/functions/create-gt) lorsque l’application s’affiche côté serveur ou doit changer de paramètre régional de manière réactive sans recharger la page.

## Initialiser avant d’importer l’application [#bootstrap]

Le point d’initialisation doit s’exécuter avant tout module qui appelle [`t()`](/docs/vue/reference/functions/t). Un petit amorçage `async` fonctionne avec la cible de build par défaut de Vite 6 et ne nécessite ni `await` au niveau supérieur ni `build.target: 'esnext'`.

### 1. Exporter une fonction de montage

Modifiez le module d’entrée Vite habituel afin qu’il exporte une fonction qui accepte le [`GTPlugin`](/docs/vue/reference/types/gt-plugin) initialisé :

```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');
}
```

### 2. Initialiser et importer dynamiquement

Créez un module d’amorçage qui attend [`initializeGTSPA()`](/docs/vue/reference/functions/initialize-gt-spa), importe ensuite l’application et installe le plugin exact renvoyé par l’initialisation :

```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);
}

bootstrap().catch((error) => {
  console.error('Failed to initialize translations', error);
});
```

Le premier appel est propriétaire du runtime SPA à l’échelle de la page. Les appels simultanés partagent son initialisation, et les appels ultérieurs renvoient le même plugin. N’appelez pas [`createGT()`](/docs/vue/reference/functions/create-gt) pour l’application montée, sinon les recherches de composants et au niveau du module utiliseront des états différents.

### 3. Configurez Vite pour utiliser l’amorçage

Mettez à jour le script de module dans `index.html` pour charger `src/index.ts` au lieu de `src/main.ts` :

```html title="index.html"
<script type="module" src="/src/index.ts"></script>
```

## Traduire les chaînes définies au niveau du module [#translate]

Les modules chargés par l’importation dynamique de l’application peuvent appeler [`t()`](/docs/vue/reference/functions/t) de façon synchrone :

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

export const message = t('Hello World');

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

Les appels doivent utiliser une chaîne source statique et peuvent recevoir un `$context` statique. L’extracteur enregistre ces chaînes, et le catalogue préchargé rend la recherche synchrone lors de l’exécution du module.

[`t()`](/docs/vue/reference/functions/t) ne prend pas en charge les tagged templates, la syntaxe ICU, l’interpolation, `$format` ni `$maxChars`. Utilisez [`<T>`](/docs/vue/reference/components/t) avec [`<Var>`](/docs/vue/reference/components/var) pour le contenu contenant des valeurs au moment de l’exécution.

## Changer de paramètre régional dans une SPA initialisée [#locales]

Transmettez `defaultLocale` et `locales` depuis `gt.config.json` à [`initializeGTSPA()`](/docs/vue/reference/functions/initialize-gt-spa). Lors de l&#39;initialisation suivante, un paramètre régional enregistré mais non pris en charge se replie sur le paramètre régional par défaut.

Lorsque [`useSetLocale()`](/docs/vue/reference/composables/use-set-locale) modifie le paramètre régional, le runtime de la SPA écrit le cookie correspondant et recharge le document. Il conserve volontairement la page actuelle dans son paramètre régional initialisé jusqu&#39;à ce rechargement. L&#39;amorçage précharge alors le nouveau catalogue avant que les appels au niveau du module ne s&#39;exécutent de nouveau.

Ce mécanisme de rechargement garantit la sécurité des constantes au niveau du module. Si le paramètre régional doit changer sans navigation, utilisez plutôt [`createGT()`](/docs/vue/reference/functions/create-gt) et appelez [`useGT()`](/docs/vue/reference/composables/use-gt) depuis un modèle ou une valeur calculée.
## Next steps

- /docs/vue/guides/translating-strings
- /docs/vue/guides/managing-locales
- /docs/vue/guides/storing-translations
- /docs/vue/guides/configuring