# vue: Gestione delle impostazioni regionali
URL: https://generaltranslation.com/it/docs/vue/guides/managing-locales.mdx
---

title: Gestione delle impostazioni regionali
description: Come dichiarare le impostazioni regionali in Vue, creare un selettore della lingua e gestire modifiche reattive o basate sul ricaricamento.
related:
  links:
    - /docs/vue/guides/configuring
    - /docs/vue/guides/storing-translations
    - /docs/vue/guides/developing-spa-translations
    - /docs/vue/guides/translating-content

---

I codici locale come `en-US` e `fr` collegano la scelta della lingua dell'utente al catalogo e alle regole di formattazione appropriate. Configura le impostazioni regionali sorgente e di destinazione, quindi usa i composable per le impostazioni regionali nei tuoi componenti Vue.

## Dichiarare le impostazioni regionali disponibili [#declare]

Imposta l'impostazione regionale di sorgente e quelle di destinazione in `gt.config.json`:

```json title="gt.config.json"
{
  "defaultLocale": "en",
  "locales": ["es", "fr", "de"]
}
```

`defaultLocale` è la lingua dei contenuti sorgente. `locales` elenca le lingue che la CLI deve generare.

Passa `defaultLocale` a [`createGT()`](/docs/vue/reference/functions/create-gt). Conserva l'elenco delle lingue di destinazione per il selettore della lingua:

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

const availableLocales = [gtConfig.defaultLocale, ...gtConfig.locales];
```

Un plugin creato con [`createGT()`](/docs/vue/reference/functions/create-gt) non limita i codici locale a questo elenco. Nell'interfaccia, offri solo valori supportati e fai in modo che il loader restituisca un catalogo vuoto o rifiuti intenzionalmente le richieste non supportate.

## Leggere l'impostazione regionale attiva [#read]

[`useLocale()`](/docs/vue/reference/composables/use-locale) restituisce un ref Vue di sola lettura. Nei template viene dereferenziato automaticamente:

```vue
<script setup lang="ts">
import { watch } from 'vue';
import { useLocale } from 'gt-vue';

const locale = useLocale();

watch(locale, (nextLocale) => {
  document.documentElement.lang = nextLocale;
});
</script>

<template>
  <p>Active locale: {{ locale }}</p>
</template>
```

Leggi `locale.value` nelle normali espressioni di script. I componenti, i valori calcolati e gli effetti di rendering che leggono il ref si aggiornano al termine del cambio reattivo dell&#39;impostazione regionale.

## Crea un selettore della lingua [#switcher]

[`useSetLocale()`](/docs/vue/reference/composables/use-set-locale) restituisce un setter async. Attendi il suo completamento affinché l&#39;interfaccia possa indicare un caricamento in corso o gestire un errore:

```vue title="src/components/LocaleSwitcher.vue"
<script setup lang="ts">
import { ref } from 'vue';
import { useLocale, useSetLocale } from 'gt-vue';

const props = defineProps<{ locales: readonly string[] }>();
const locale = useLocale();
const setLocale = useSetLocale();
const changing = ref(false);

async function changeLocale(event: Event) {
  const target = event.target as HTMLSelectElement;
  changing.value = true;

  try {
    await setLocale(target.value);
  } finally {
    changing.value = false;
  }
}
</script>

<template>
  <select :value="locale" :disabled="changing" @change="changeLocale">
    <option v-for="code in props.locales" :key="code" :value="code">
      {{ code }}
    </option>
  </select>
</template>
```

Con un plugin [`createGT()`](/docs/vue/reference/functions/create-gt), il setter carica un catalogo non memorizzato nella cache prima di modificare l&#39;impostazione regionale. I risultati ottenuti correttamente vengono memorizzati nella cache. Se le richieste si sovrappongono, solo l&#39;ultima modifica l&#39;impostazione regionale attiva.

Un catalogo vuoto corrisponde a un caricamento riuscito: l&#39;impostazione regionale cambia e il contenuto sorgente viene renderizzato come fallback. Se il loader restituisce un errore, l&#39;impostazione regionale attiva e il relativo cookie rimangono invariati.

## Mantieni l&#39;impostazione regionale [#persistence]

Nel browser, l&#39;impostazione regionale attiva viene memorizzata in un cookie di sessione valido per l&#39;intero percorso denominato `generaltranslation.locale`. Quando `locale` viene omesso da [`createGT()`](/docs/vue/reference/functions/create-gt), questo cookie ha la precedenza su `defaultLocale`.

Imposta `localeCookieName` quando l&#39;app deve condividere un altro cookie con un router o un server:

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

Usa [`useSetLocale()`](/docs/vue/reference/composables/use-set-locale) anziché scrivere direttamente il cookie. I browser non generano un evento reattivo quando i cookie cambiano, quindi una scrittura esterna non attiva automaticamente il rendering di Vue.

## Scegli il cambio reattivo o con ricaricamento [#runtime-mode]

La modalità di inizializzazione determina cosa accade dopo la modifica del cookie:

* [`createGT()`](/docs/vue/reference/functions/create-gt) carica il catalogo e aggiorna i consumer reattivi senza ricaricare la pagina.
* [`initializeGTSPA()`](/docs/vue/reference/functions/initialize-gt-spa) scrive il cookie e ricarica il documento, in modo che le chiamate a [`t()`](/docs/vue/reference/functions/t) a livello di modulo vengano eseguite nuovamente dopo il precaricamento della nuova impostazione regionale.

L&#39;inizializzatore SPA accetta `locales` e ricorre a `defaultLocale` quando un&#39;impostazione regionale salvata o richiesta non è supportata. Segui [Sviluppare con le traduzioni per SPA](/docs/vue/guides/developing-spa-translations) quando la traduzione a livello di modulo richiede questo comportamento.

Per il rendering lato server, determina l&#39;impostazione regionale della richiesta sul server e passala esplicitamente a [`createGT()`](/docs/vue/reference/functions/create-gt). Il valore esplicito prevale su un cookie del browser obsoleto e mantiene allineate l&#39;impostazione regionale del rendering lato server e quella dell&#39;idratazione.
## Next steps

- /docs/vue/guides/configuring
- /docs/vue/guides/storing-translations
- /docs/vue/guides/developing-spa-translations
- /docs/vue/guides/translating-content