# Vue: Traduzione delle stringhe
URL: https://generaltranslation.com/it/docs/vue/guides/translating-strings.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: Come tradurre etichette, attributi e stringhe condivise in Vue con useGT e useMessages.

Usa [`useGT()`](/docs/vue/reference/composables/use-gt) per le stringhe che non possono essere espresse come contenuto del template, ad esempio placeholder, etichette accessibili e valori passati a un altro componente. Usa [`msg()`](/docs/vue/reference/functions/msg) con [`useMessages()`](/docs/vue/reference/composables/use-messages) quando un messaggio statico viene dichiarato in un modulo e renderizzato in un altro.

## Traduzione con `useGT` [#use-gt]

Richiama [`useGT()`](/docs/vue/reference/composables/use-gt) durante la configurazione del componente, quindi richiama la funzione restituita nel template:

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

const gt = useGT();
</script>

<template>
  <input
    type="search"
    :placeholder="gt('Search products')"
    :aria-label="gt('Search')"
  />
</template>
```

Usa un letterale stringa affinché la CLI possa estrarlo. Se mancano voci nel catalogo, viene restituita la stringa sorgente.

L&#39;unica opzione supportata è un `$context` statico:

```vue
<button>{{ gt('Archive', { $context: 'verb on a project action' }) }}</button>
```

Le parentesi graffe sono considerate testo letterale. [`useGT()`](/docs/vue/reference/composables/use-gt) non elabora la sintassi ICU, non interpola variabili né accetta opzioni per stringhe React come `$id`, `$maxChars` e `$format`.

## Mantieni reattivi i risultati tradotti [#reactivity]

La funzione restituita da [`useGT()`](/docs/vue/reference/composables/use-gt) legge il catalogo attivo quando viene chiamata. Chiamala da un template, un valore calcolato o un effetto reattivo se il risultato deve aggiornarsi in seguito a una modifica dell&#39;impostazione regionale o del catalogo:

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

const gt = useGT();
const pageTitle = computed(() => gt('Account settings'));
</script>

<template>
  <h1>{{ pageTitle }}</h1>
</template>
```

`const pageTitle = gt('Account settings')` viene tradotto una sola volta durante la configurazione e memorizza uno snapshot. Non viene eseguito nuovamente quando un plugin [`createGT()`](/docs/vue/reference/functions/create-gt) cambia l&#39;impostazione regionale.

## Registra messaggi condivisi [#messages]

Usa [`msg()`](/docs/vue/reference/functions/msg) per registrare stringhe statiche in un modulo condiviso. Contrassegna il contenuto per l&#39;estrazione; non esegue alcuna ricerca di traduzione.

```ts title="src/messages.ts"
import { msg } from 'gt-vue';

export const statusMessages = {
  active: msg('Active', { $context: 'account status' }),
  paused: msg('Paused', { $context: 'account status' }),
};
```

Risolvi il messaggio selezionato con [`useMessages()`](/docs/vue/reference/composables/use-messages) nel punto in cui viene renderizzato:

```vue title="src/components/StatusBadge.vue"
<script setup lang="ts">
import { computed } from 'vue';
import { useMessages } from 'gt-vue';
import { statusMessages } from '../messages';

const props = defineProps<{ status: keyof typeof statusMessages }>();
const m = useMessages();
const label = computed(() => m(statusMessages[props.status]));
</script>

<template>
  <span>{{ label }}</span>
</template>
```

Senza opzioni, [`msg()`](/docs/vue/reference/functions/msg) restituisce la stringa originale invariata. Con `$context`, aggiunge metadati opachi per il lookup, che [`useMessages()`](/docs/vue/reference/composables/use-messages) legge. Non analizzare né fare affidamento su tale rappresentazione codificata.

## Traduci contenuti con valori di runtime [#variables]

Le lookup di semplici stringhe non interpolano i dati di runtime. Inserisci la frase completa in [`<T>`](/docs/vue/reference/components/t) e contrassegna il valore variabile con [`<Var>`](/docs/vue/reference/components/var):

```vue
<T>Welcome back, <Var>{{ accountName }}</Var>!</T>
```

Usa [`<Num>`](/docs/vue/reference/components/num), [`<Currency>`](/docs/vue/reference/components/currency) e [`<DateTime>`](/docs/vue/reference/components/datetime) quando il valore richiede anche una formattazione specifica per l&#39;impostazione regionale.

Le SPA eseguite solo nel browser che richiedono un lookup statico durante la valutazione dei moduli possono usare [`t()`](/docs/vue/reference/functions/t) dopo aver atteso [`initializeGTSPA()`](/docs/vue/reference/functions/initialize-gt-spa). Segui [Sviluppo con le traduzioni per SPA](/docs/vue/guides/developing-spa-translations) per mantenere l&#39;ordine di importazione richiesto.

## Next steps

- /docs/vue/guides/translating-content
- /docs/vue/guides/developing-spa-translations
- /docs/vue/guides/formatting-variables
- /docs/vue/guides/configuring

## Sitemap

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