# Vue: Quickstart
URL: https://generaltranslation.com/it/docs/vue/quickstart.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: Aggiungi più lingue a un'applicazione Vue in meno di 10 minuti.

Al termine di questa guida, la tua app Vue visualizzerà contenuti in più lingue e consentirà agli utenti di cambiare l'impostazione regionale attiva senza ricaricare la pagina.

`gt-vue` funziona come plugin Vue. Il plugin carica ciascun catalogo di traduzione una sola volta, lo memorizza nella cache e renderizza nuovamente in modo reattivo i contenuti tradotti quando cambia l'impostazione regionale.

**Prerequisiti:**

* Un'applicazione Vue 3, versione 3.3 o successiva
* Node.js `^20.19.0 || >=22.12.0` per l'attuale toolchain Vite

<Callout type="info">
  **Pacchetto 0.x:** `gt-vue` è instabile. La sua API e il suo comportamento possono cambiare tra un rilascio e l&#39;altro, indipendentemente dai pacchetti React stabili.
</Callout>

## Quickstart [#quickstart]

### 1. Installa i pacchetti

`gt-vue` gestisce le traduzioni nella tua app. [`gt`](/docs/cli/quickstart) estrae i contenuti sorgente e genera cataloghi di traduzione.

<Tabs items={['npm', 'yarn', 'bun', 'pnpm']}>
  <Tab value="npm">
    ```bash
    npm install gt-vue
    npm install --save-dev gt
    ```
  </Tab>

  <Tab value="yarn">
    ```bash
    yarn add gt-vue
    yarn add --dev gt
    ```
  </Tab>

  <Tab value="bun">
    ```bash
    bun add gt-vue
    bun add --dev gt
    ```
  </Tab>

  <Tab value="pnpm">
    ```bash
    pnpm add gt-vue
    pnpm add --save-dev gt
    ```
  </Tab>
</Tabs>

### 2. Crea un file di configurazione per la traduzione

Crea `gt.config.json` nella radice del progetto. Imposta l&#39;impostazione regionale del contenuto sorgente, le impostazioni regionali in cui tradurre e il percorso di output dei cataloghi generati.

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

* `defaultLocale` è la lingua dei contenuti sorgente.
* `locales` elenca le lingue di destinazione. Scegli qualsiasi impostazione regionale dall&#39;[elenco delle impostazioni regionali supportate](/docs/platform/dashboard/reference/supported-locales).
* `files.gt.output` indica alla CLI dove scrivere ciascun catalogo. Mantieni il placeholder `[locale]` nel percorso.

### 3. Crea un loader delle traduzioni

Crea un loader che restituisca il catalogo generato per l&#39;impostazione regionale richiesta:

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

Il loader non viene chiamato per l&#39;impostazione regionale predefinita perché il contenuto sorgente funge già da catalogo. Restituendo un oggetto vuoto, l&#39;app può renderizzare il contenuto sorgente quando il catalogo di destinazione non è disponibile.

### 4. Registra il plugin

Crea un plugin [`createGT()`](/docs/vue/reference/functions/create-gt) e installalo prima di montare l&#39;app:

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

Il plugin utilizza il cookie salvato dell&#39;impostazione regionale, se disponibile; altrimenti usa `defaultLocale`. Viene montato immediatamente con il contenuto sorgente, quindi si aggiorna reattivamente al termine del caricamento del catalogo richiesto.

### 5. Contrassegna i contenuti da tradurre

Usa [`<T>`](/docs/vue/reference/components/t) per contenuti di template formattati e [`useGT()`](/docs/vue/reference/composables/use-gt) per stringhe autonome, come gli attributi degli input:

```vue title="src/App.vue"
<script setup lang="ts">
import { T, useGT } from 'gt-vue';

const gt = useGT();
</script>

<template>
  <main>
    <T>
      <h1>Welcome to my app</h1>
      <p>This content will be translated automatically.</p>
    </T>

    <input :placeholder="gt('Search products')" />
  </main>
</template>
```

Mantieni statico il contenuto all&#39;interno di [`<T>`](/docs/vue/reference/components/t). Usa [variabili e componenti di diramazione](/docs/vue/guides/formatting-variables) per i valori a runtime e le alternative condizionali.

### 6. Aggiungi un selettore di lingua

Leggi l&#39;impostazione regionale attuale con [`useLocale()`](/docs/vue/reference/composables/use-locale) e modificala con [`useSetLocale()`](/docs/vue/reference/composables/use-set-locale):

```vue title="src/App.vue"
<script setup lang="ts">
import { T, useGT, useLocale, useSetLocale } from 'gt-vue';
import gtConfig from '../gt.config.json';

const gt = useGT();
const locale = useLocale();
const setLocale = useSetLocale();
const locales = [gtConfig.defaultLocale, ...gtConfig.locales];

async function changeLocale(event: Event) {
  const target = event.target as HTMLSelectElement;
  await setLocale(target.value);
}
</script>

<template>
  <main>
    <label>
      Language
      <select :value="locale" @change="changeLocale">
        <option v-for="code in locales" :key="code" :value="code">
          {{ code }}
        </option>
      </select>
    </label>

    <T>
      <h1>Welcome to my app</h1>
      <p>This content will be translated automatically.</p>
    </T>

    <input :placeholder="gt('Search products')" />
  </main>
</template>
```

[`useSetLocale()`](/docs/vue/reference/composables/use-set-locale) carica un catalogo mancante prima di salvare il cookie dell&#39;impostazione regionale e di rieseguire il rendering dei consumer reattivi. Con il loader mostrato sopra, un file mancante restituisce un catalogo vuoto, modifica l&#39;impostazione regionale e renderizza il contenuto sorgente. Se invece il loader genera un errore, l&#39;impostazione regionale attuale rimane attiva.

### 7. Autenticati e traduci

Autenticati con General Translation:

```bash
npx gt auth
```

Il comando ti guida nell&#39;accesso e nella creazione delle credenziali. Conserva la chiave API di produzione generata nel file delle variabili d&#39;ambiente locale, fuori dal codice eseguito nel browser e dal controllo di versione.

Quindi genera i cataloghi di traduzione:

```bash
npx gt translate
```

La CLI analizza il codice sorgente Vue, traduce il contenuto estratto e scrive un file JSON per ogni impostazione regionale di destinazione in `src/_gt/`. Esegui nuovamente il comando ogni volta che il contenuto sorgente cambia.

### 8. Esecuzione e verifica

Avvia l&#39;applicazione:

<Tabs items={['npm', 'yarn', 'bun', 'pnpm']}>
  <Tab value="npm">
    ```bash
    npm run dev
    ```
  </Tab>

  <Tab value="yarn">
    ```bash
    yarn dev
    ```
  </Tab>

  <Tab value="bun">
    ```bash
    bun run dev
    ```
  </Tab>

  <Tab value="pnpm">
    ```bash
    pnpm dev
    ```
  </Tab>
</Tabs>

Apri l&#39;URL locale mostrato dal server di sviluppo. Seleziona `es`, `fr` o `ja` dal selettore della lingua e verifica che il titolo e il placeholder del campo di ricerca mostrino il testo tradotto.

## Risoluzione dei problemi [#troubleshooting]

<Accordions>
  <Accordion title="L'app rimane nell'impostazione regionale sorgente">
    L&#39;impostazione regionale attiva viene memorizzata nel cookie `generaltranslation.locale`. Elimina eventuali cookie obsoleti, quindi seleziona nuovamente un&#39;impostazione regionale di destinazione. Verifica inoltre che il relativo file JSON esista in `src/_gt/` e che il loader restituisca l&#39;esportazione predefinita.
  </Accordion>

  <Accordion title="Una stringa tradotta non si aggiorna dopo aver cambiato impostazione regionale">
    Chiama la funzione restituita da [`useGT()`](/docs/vue/reference/composables/use-gt) nel template o in un valore calcolato di Vue. Una stringa tradotta una volta durante il setup è uno snapshot e non viene ricalcolata quando cambia lo stato reattivo dell&#39;impostazione regionale.
  </Accordion>
</Accordions>

## Next steps

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

## Sitemap

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