# vue: Configurazione di gt-vue
URL: https://generaltranslation.com/it/docs/vue/guides/configuring.mdx
---

title: Configurazione di gt-vue
description: Come creare un plugin di traduzione Vue, caricare i cataloghi e configurare il rendering nel browser o sul server.
related:
  links:
    - /docs/vue/guides/translating-content
    - /docs/vue/guides/translating-strings
    - /docs/vue/guides/managing-locales
    - /docs/vue/guides/storing-translations

---

Crea un plugin per ogni applicazione Vue isolata. Il plugin gestisce la propria impostazione regionale attiva, i cataloghi caricati e lo stato di traduzione reattivo.

Usa [`createGT()`](/docs/vue/reference/functions/create-gt) per le normali applicazioni Vue, incluse quelle che cambiano impostazione regionale senza ricaricare la pagina e quelle che eseguono il rendering sul server. Le SPA eseguite solo nel browser che richiedono [`t()`](/docs/vue/reference/functions/t) a livello di modulo seguono un percorso di avvio diverso, descritto in [Sviluppo con la traduzione per SPA](/docs/vue/guides/developing-spa-translations).

## Crea il plugin [#create]

Passa l'impostazione regionale sorgente e una funzione di callback [`loadTranslations`](/docs/vue/reference/types/load-translations) a [`createGT()`](/docs/vue/reference/functions/create-gt), quindi installa il plugin restituito con `app.use()`:

```ts title="src/main.ts"
import { createApp } from 'vue';
import { createGT } from 'gt-vue';
import App from './App.vue';
import gtConfig from '../gt.config.json';
import loadTranslations from './loadTranslations';

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

createApp(App).use(gt).mount('#app');
```

Installa quel plugin una sola volta. La creazione di un'altra istanza le assegna una cache separata per impostazione regionale e catalogo.

## Determinare l'impostazione regionale iniziale [#initial-locale]

[`createGT()`](/docs/vue/reference/functions/create-gt) determina l'impostazione regionale iniziale nel seguente ordine:

1. Un'opzione `locale` esplicita.
2. Il valore del cookie dell'impostazione regionale configurata nel browser.
3. `defaultLocale`.

Un'impostazione regionale esplicita ha la precedenza durante il rendering lato server e l'idratazione. Nel browser, sostituisce un cookie obsoleto affinché il client utilizzi la stessa impostazione regionale del server.

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

Il nome predefinito del cookie è `generaltranslation.locale`. Modifica `localeCookieName` solo se il router o il server devono condividere un cookie diverso.

## Caricare i cataloghi di traduzione [#load]

L'impostazione regionale predefinita esegue il rendering direttamente dal contenuto sorgente, quindi il relativo loader non viene mai chiamato. Le altre impostazioni regionali vengono caricate tramite [`loadTranslations`](/docs/vue/reference/types/load-translations):

```ts title="src/loadTranslations.ts"
import type { LoadTranslations } from 'gt-vue';

const loadTranslations: LoadTranslations = async (locale) => {
  try {
    return (await import(`./_gt/${locale}.json`)).default;
  } catch {
    return {};
  }
};

export default loadTranslations;
```

I cataloghi caricati correttamente vengono memorizzati nella cache per l'intera durata del plugin e le richieste simultanee per la stessa impostazione regionale condividono un unico caricamento. Sul client, l'app può essere montata con il contenuto sorgente mentre viene caricato il primo catalogo; i componenti tradotti vengono nuovamente renderizzati quando il catalogo diventa disponibile.

Restituire un oggetto vuoto usa il contenuto sorgente come fallback. Se il callback genera un errore, le modifiche dell'impostazione regionale non vengono applicate e quella attuale rimane attiva.

## Mantieni allineate le configurazioni della CLI e di runtime [#shared-config]

Usa `gt.config.json` come riferimento condiviso per l'impostazione regionale sorgente, le impostazioni regionali di destinazione e il percorso dei file generati:

```json title="gt.config.json"
{
  "defaultLocale": "en",
  "locales": ["es", "fr"],
  "files": {
    "gt": {
      "output": "src/_gt/[locale].json"
    }
  }
}
```

La CLI legge direttamente questo file. [`createGT()`](/docs/vue/reference/functions/create-gt) accetta le proprie opzioni di runtime, quindi passa esplicitamente `defaultLocale` e il tuo loader. L'elenco `locales` resta utile per il selettore della lingua e per la CLI, ma un plugin reattivo non rifiuta altri codici locale; la UI e il loader determinano quali impostazioni regionali sono disponibili.

Le credenziali API di produzione sono associate al processo CLI che genera le traduzioni. Non esporre `GT_API_KEY` nel codice eseguito nel browser.

## Configura il rendering lato server [#ssr]

Crea una nuova istanza del plugin per ogni richiesta, in modo che lo stato dell'impostazione regionale e del catalogo non venga condiviso tra utenti. Determina l'impostazione regionale della richiesta, passala esplicitamente e precarica il relativo catalogo prima del rendering:

```ts title="src/gt-server.ts"
import { createGT } from 'gt-vue';
import loadTranslations from './loadTranslations';

export async function createRequestGT(locale: string) {
  const gt = createGT({
    defaultLocale: 'en',
    locale,
    loadTranslations,
  });

  await gt.loadTranslations(locale);
  return gt;
}
```

Installa il plugin restituito nell'app Vue della richiesta. Prima dell'idratazione nel browser, crea e precarica un plugin client con la stessa impostazione regionale esplicita. Se esegui l'idratazione prima che il catalogo di destinazione sia pronto, il contenuto sorgente potrebbe essere visualizzato brevemente e causare una mancata corrispondenza.
## Next steps

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