# vue: Sviluppare con la traduzione per SPA
URL: https://generaltranslation.com/it/docs/vue/guides/developing-spa-translations.mdx
---

title: Sviluppare con la traduzione per SPA
description: Come precaricare una SPA Vue e tradurre stringhe statiche a livello di modulo con t().
related:
  links:
    - /docs/vue/guides/translating-strings
    - /docs/vue/guides/managing-locales
    - /docs/vue/guides/storing-translations
    - /docs/vue/guides/configuring

---

Le single-page app eseguite solo nel browser possono precaricare il catalogo attivo prima dell'esecuzione dei moduli dell'applicazione. Ciò consente chiamate sincrone a [`t()`](/docs/vue/reference/functions/t) a livello di modulo per costanti, definizioni di navigazione e altre stringhe esterne ai componenti Vue.

[`initializeGTSPA()`](/docs/vue/reference/functions/initialize-gt-spa) integra [`useGT()`](/docs/vue/reference/composables/use-gt), senza sostituirlo. Usa il composable per i normali contenuti dei componenti e per le applicazioni Vue o renderizzate sul server che richiedono il cambio reattivo dell'impostazione regionale.

## Scegli il runtime SPA [#choose]

Usa [`initializeGTSPA()`](/docs/vue/reference/functions/initialize-gt-spa) solo se tutte le seguenti condizioni sono soddisfatte:

* L'applicazione viene eseguita interamente nel browser.
* I moduli devono tradurre le stringhe durante la valutazione.
* È accettabile ricaricare la pagina quando cambia l'impostazione regionale.

Usa [`createGT()`](/docs/vue/reference/functions/create-gt) quando l'app viene renderizzata sul server o deve cambiare impostazione regionale in modo reattivo senza ricaricare la pagina.

## Bootstrap prima di importare l'app [#bootstrap]

Il punto di inizializzazione deve essere eseguito prima di qualsiasi modulo che chiami [`t()`](/docs/vue/reference/functions/t). Un piccolo bootstrap asincrono funziona con il target di build predefinito di Vite 6 e non richiede `await` di primo livello né `build.target: 'esnext'`.

### 1. Esporta una funzione di montaggio

Modifica il normale modulo di ingresso di Vite affinché esporti una funzione che accetti [`GTPlugin`](/docs/vue/reference/types/gt-plugin) inizializzato:

```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. Inizializza e importa dinamicamente

Crea un modulo di bootstrap che attenda [`initializeGTSPA()`](/docs/vue/reference/functions/initialize-gt-spa), importi quindi l'applicazione e installi il plugin esatto restituito dall'inizializzazione:

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

La prima chiamata gestisce il runtime SPA a livello di pagina. Le chiamate concorrenti ne condividono l'inizializzazione e quelle successive restituiscono lo stesso plugin. Non chiamare [`createGT()`](/docs/vue/reference/functions/create-gt) per l'app montata, altrimenti i lookup dei componenti e quelli a livello di modulo useranno stati diversi.

### 3. Configura Vite in modo che punti al bootstrap

Aggiorna lo script del modulo in `index.html` per caricare `src/index.ts` anziché `src/main.ts`:

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

## Tradurre le stringhe a livello di modulo [#translate]

I moduli caricati tramite l&#39;importazione dinamica dell&#39;applicazione possono chiamare [`t()`](/docs/vue/reference/functions/t) in modo sincrono:

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

Le chiamate devono usare una stringa sorgente statica e possono includere un `$context` statico. L&#39;estrattore registra queste stringhe e il catalogo precaricato rende sincrono il lookup quando il modulo viene eseguito.

[`t()`](/docs/vue/reference/functions/t) non supporta i tagged template, la sintassi ICU, l&#39;interpolazione, `$format` o `$maxChars`. Usa [`<T>`](/docs/vue/reference/components/t) con [`<Var>`](/docs/vue/reference/components/var) per contenuti che includono valori a runtime.

## Modifica le impostazioni regionali in una SPA inizializzata [#locales]

Passa `defaultLocale` e `locales` da `gt.config.json` a [`initializeGTSPA()`](/docs/vue/reference/functions/initialize-gt-spa). Un&#39;impostazione regionale salvata ma non supportata torna a quella predefinita durante l&#39;inizializzazione successiva.

Quando [`useSetLocale()`](/docs/vue/reference/composables/use-set-locale) modifica l&#39;impostazione regionale, il runtime della SPA scrive il relativo cookie e ricarica il documento. Fino a quel ricaricamento, mantiene intenzionalmente la pagina corrente nell&#39;impostazione regionale con cui è stata inizializzata. Il bootstrap precarica quindi il nuovo catalogo prima che vengano nuovamente eseguite le chiamate a livello di modulo.

Questo comportamento di ricaricamento rende sicure le costanti a livello di modulo. Se le modifiche dell&#39;impostazione regionale devono avvenire senza navigazione, usa [`createGT()`](/docs/vue/reference/functions/create-gt) e richiama [`useGT()`](/docs/vue/reference/composables/use-gt) da un template o da un valore calcolato.
## Next steps

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