# Vue: Configurazione
URL: https://generaltranslation.com/it/docs/vue/reference/config.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: Configura la generazione dei cataloghi e l'inizializzazione a runtime per un'applicazione Vue. Riferimento per la configurazione di Vue.

La configurazione ha due componenti indipendenti che la utilizzano. La CLI `gt` legge `gt.config.json` per individuare i contenuti sorgente e scrivere i cataloghi, mentre l'applicazione passa le opzioni di runtime a [`createGT()`](/docs/vue/reference/functions/create-gt) o [`initializeGTSPA()`](/docs/vue/reference/functions/initialize-gt-spa).

`gt-vue` non individua né legge automaticamente `gt.config.json`. Importa esplicitamente i valori condivisi e fornisci funzioni come [`loadTranslations`](/docs/vue/reference/types/load-translations) nel codice dell'applicazione.

## Panoramica [#overview]

| Superficie                                                             | Scopo                                                                                                                      | Configurazione                                                                                                     |
| ---------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------ |
| `gt.config.json`                                                       | Estrae il contenuto sorgente e genera cataloghi di traduzione.                                                             | Campi CLI serializzabili in JSON, quali `projectId`, `defaultLocale`, `locales`, `src`, `files` e `customMapping`. |
| [`createGT()`](/docs/vue/reference/functions/create-gt)                | Crea un plugin isolato per il rendering reattivo lato client o il rendering lato server nell'ambito di una richiesta.  | [`CreateGTOptions`](/docs/vue/reference/types/create-gt-options)                                                   |
| [`initializeGTSPA()`](/docs/vue/reference/functions/initialize-gt-spa) | Crea e precarica il plugin globale del browser utilizzato da [`t()`](/docs/vue/reference/functions/t) a livello di modulo. | [`InitializeGTSPAOptions`](/docs/vue/reference/types/initialize-gt-spa-options)                                    |

I campi esclusivi della CLI `projectId`, `src` e `files` vengono ignorati dal runtime. I campi esclusivi del runtime `locale`, `localeCookieName` e `loadTranslations` non possono essere rappresentati completamente in JSON. `defaultLocale` e `customMapping` sono condivisi da tutte le superfici, mentre `locales` è accettato dall'inizializzatore SPA.

## `gt.config.json` [#config-file]

Colloca `gt.config.json` nella radice del progetto. Questa configurazione Vue esegue la scansione dei glob sorgente espliciti e genera un catalogo per ogni impostazione regionale di destinazione:

```json title="gt.config.json"
{
  "$schema": "https://assets.gtx.dev/config-schema.json",
  "defaultLocale": "en",
  "locales": ["es", "fr"],
  "src": ["src/**/*.{vue,js,jsx,mjs,cjs,ts,tsx,mts,cts}"],
  "files": {
    "gt": {
      "output": "src/_gt/[locale].json"
    }
  }
}
```

Le voci `src` sono pattern glob. Una directory indicata senza altri elementi, come `"src"`, non include i file in modo ricorsivo; specifica i file e le estensioni che la CLI deve analizzare. Quando `src` viene omesso, le impostazioni predefinite di Vue coprono i componenti a file singolo nella directory radice e le directory Vue e Nuxt convenzionali.

| Campo                                                        | Utilizzo con Vue                                                                        | Utilizzo a runtime                                                                                                                                                                                                                                                                                                                          |
| ------------------------------------------------------------ | --------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `$schema`                                                    | Aggiunge la convalida e il completamento nell'editor.                               | Nessuno                                                                                                                                                                                                                                                                                                                                     |
| `projectId`                                                  | Seleziona il progetto General Translation usato dalla CLI.                              | Nessuno                                                                                                                                                                                                                                                                                                                                     |
| [`defaultLocale`](/docs/cli/reference/config#default-locale) | Dichiara l'impostazione regionale sorgente.                                         | Passalo a uno dei due inizializzatori runtime.                                                                                                                                                                                                                                                                                              |
| [`locales`](/docs/cli/reference/config#locales)              | Dichiara le impostazioni regionali di destinazione generate dalla CLI.                  | Passalo a [`initializeGTSPA()`](/docs/vue/reference/functions/initialize-gt-spa) per rifiutare impostazioni regionali salvate o richieste non supportate. Un plugin [`createGT()`](/docs/vue/reference/functions/create-gt) non limita i codici locale.                                                                                     |
| [`src`](/docs/cli/reference/config#src)                      | Seleziona i file sorgente Vue, JavaScript e TypeScript da estrarre.                     | Nessuno                                                                                                                                                                                                                                                                                                                                     |
| [`files.gt.output`](/docs/cli/reference/config#files)        | Imposta il percorso del catalogo generato. Mantieni il placeholder `[locale]`.          | Assicurati che il loader importi dalla stessa directory.                                                                                                                                                                                                                                                                                    |
| [`customMapping`](/docs/cli/reference/config#custom-mapping) | Applica gli alias delle impostazioni regionali durante la generazione delle traduzioni. | Passalo a entrambi i runtime. [`createGT()`](/docs/vue/reference/functions/create-gt) usa i mapping di oggetti con un `code` valido per la formattazione e le regole di pluralizzazione; [`initializeGTSPA()`](/docs/vue/reference/functions/initialize-gt-spa) li usa anche per la corrispondenza delle impostazioni regionali supportate. |

Consulta il [riferimento della configurazione CLI](/docs/cli/reference/config) per tutti i campi relativi a progetto, file, pubblicazione, review e branch. Mantieni `GT_API_KEY` nell'ambiente della CLI; non inserire credenziali di produzione in `gt.config.json` o nel codice del browser.

## Estrazione Vue [#vue-extraction]

Le impostazioni del compiler dei template Vue influiscono sul contenuto estratto e sul relativo translation hash. Per impostazione predefinita, l'extractor rileva queste impostazioni dalla configurazione Vite o Nuxt attiva. Configurale esplicitamente quando il rilevamento automatico risulta ambiguo o quando la tua applicazione utilizza valori personalizzati:

| Opzione                                               | Descrizione                                                                | Tipo                       | Facoltativo | Predefinito                                          |
| ----------------------------------------------------- | -------------------------------------------------------------------------- | -------------------------- | ----------- | ---------------------------------------------------- |
| `files.gt.parsingFlags.vueCompilerOptions.whitespace` | Corrisponde alla gestione degli spazi nei template di Vue.                 | `'condense' \| 'preserve'` | Sì          | Impostazione rilevata, poi valore predefinito di Vue |
| `files.gt.parsingFlags.vueCompilerOptions.delimiters` | Corrisponde ai delimitatori personalizzati di interpolazione nei template. | `[string, string]`         | Sì          | Impostazione rilevata, poi `['{{', '}}']`            |
| `files.gt.parsingFlags.viteConfigPath`                | Seleziona una configurazione Vite relativa alla radice del progetto.       | `string`                   | Sì          | Rilevamento automatico                               |

```json title="gt.config.json"
{
  "files": {
    "gt": {
      "parsingFlags": {
        "vueCompilerOptions": {
          "whitespace": "preserve",
          "delimiters": ["${", "}"]
        },
        "viteConfigPath": "config/vite.app.ts"
      }
    }
  }
}
```

Mantieni questi valori identici a quelli del compiler dell'applicazione. Modificare spazi o delimitatori può alterare il contenuto sorgente e invalidare i translation hash esistenti.

Per gli alias di percorso di TypeScript o JavaScript, passa il config file alla CLI:

```bash
npx gt translate --tsconfig config/tsconfig.app.json
```

`--tsconfig` e il suo alias `--jsconfig` sono opzioni da riga di comando, non campi di `gt.config.json`. Se omessi, l'estrazione individua il config disponibile più vicino.

## Opzioni Runtime [#runtime-options]

| Opzione            | [`createGT()`](/docs/vue/reference/functions/create-gt) | [`initializeGTSPA()`](/docs/vue/reference/functions/initialize-gt-spa) | Predefinito                                |
| ------------------ | ------------------------------------------------------- | ---------------------------------------------------------------------- | ------------------------------------------ |
| `defaultLocale`    | [`createGT()`](/docs/vue/reference/functions/create-gt) | [`initializeGTSPA()`](/docs/vue/reference/functions/initialize-gt-spa) | `en`                                       |
| `loadTranslations` | [`createGT()`](/docs/vue/reference/functions/create-gt) | [`initializeGTSPA()`](/docs/vue/reference/functions/initialize-gt-spa) | Catalogo vuoto                             |
| `locale`           | [`createGT()`](/docs/vue/reference/functions/create-gt) | [`initializeGTSPA()`](/docs/vue/reference/functions/initialize-gt-spa) | Cookie del browser, quindi `defaultLocale` |
| `localeCookieName` | [`createGT()`](/docs/vue/reference/functions/create-gt) | [`initializeGTSPA()`](/docs/vue/reference/functions/initialize-gt-spa) | `generaltranslation.locale`                |
| `locales`          | No                                                      | [`initializeGTSPA()`](/docs/vue/reference/functions/initialize-gt-spa) | Senza restrizioni                          |
| `customMapping`    | [`createGT()`](/docs/vue/reference/functions/create-gt) | [`initializeGTSPA()`](/docs/vue/reference/functions/initialize-gt-spa) | Nessuno                                    |

Consulta [`CreateGTOptions`](/docs/vue/reference/types/create-gt-options) e [`InitializeGTSPAOptions`](/docs/vue/reference/types/initialize-gt-spa-options) per i contratti completi delle opzioni. Puoi passare `{ ...gtConfig, loadTranslations }` all'inizializzatore SPA: utilizzerà i campi in comune e ignorerà gli altri campi della CLI in fase di Runtime.

## Caricamento del catalogo [#catalog-loading]

Il percorso di output e quello del loader devono riferirsi agli stessi file:

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

L'impostazione regionale predefinita usa il testo sorgente e non invoca mai il loader. I cataloghi di destinazione caricati correttamente vengono memorizzati nella cache per ogni plugin e le richieste simultanee per una stessa impostazione regionale condividono una promise. Una chiamata al loader rifiutata viene registrata e rilanciata; non viene memorizzata nella cache, quindi una chiamata successiva può ritentare.

L'installazione di un plugin [`createGT()`](/docs/vue/reference/functions/create-gt) avvia il caricamento iniziale in background e renderizza il contenuto sorgente finché il catalogo non è disponibile. [`initializeGTSPA()`](/docs/vue/reference/functions/initialize-gt-spa) attende invece il completamento del caricamento iniziale prima di restituire.

## Configurazione reattiva [#reactive-setup]

Usa [`createGT()`](/docs/vue/reference/functions/create-gt) per una normale applicazione client. Passa esplicitamente i campi runtime, poiché `locales`, `src` e `files` non fanno parte di [`CreateGTOptions`](/docs/vue/reference/types/create-gt-options):

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

Per il rendering lato server, crea un nuovo plugin per ogni richiesta, passa esplicitamente l'impostazione regionale della richiesta e pre-caricala 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;
}
```

Usa la stessa impostazione regionale esplicita e un catalogo precaricato prima dell'idratazione del client. Un plugin server condiviso può far trapelare lo stato dell'impostazione regionale e del catalogo tra una richiesta e l'altra.

## SPA per browser [#browser-spa]

Usa [`initializeGTSPA()`](/docs/vue/reference/functions/initialize-gt-spa) solo in una single-page app eseguita esclusivamente nel browser che chiama [`t()`](/docs/vue/reference/functions/t) a livello di modulo. Attendi l'inizializzazione prima di importare dinamicamente i moduli dell'applicazione, quindi installa esattamente il plugin restituito:

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

La prima chiamata gestisce il runtime dell'intera pagina. Le modifiche all'impostazione regionale aggiornano il cookie e ricaricano il documento, consentendo di eseguire nuovamente le traduzioni a livello di modulo con il catalogo appena precaricato. Per modifiche reattive dell'impostazione regionale senza ricaricare la pagina, usa [`createGT()`](/docs/vue/reference/functions/create-gt) e traduci le stringhe dei componenti con [`useGT()`](/docs/vue/reference/composables/use-gt).

## Sitemap

See the full [sitemap](https://generaltranslation.com/sitemap.md) for all pages.