# vue: traduzione dei contenuti
URL: https://generaltranslation.com/it/docs/vue/guides/translating-content.mdx
---

title: traduzione dei contenuti
description: Come tradurre in-place i contenuti dei template Vue con il componente <T>.
related:
  links:
    - /docs/vue/guides/formatting-variables
    - /docs/vue/guides/handling-plurals-and-branches
    - /docs/vue/guides/translating-strings
    - /docs/vue/guides/configuring

---

Il componente [`<T>`](/docs/vue/reference/components/t) traduce il relativo slot predefinito nell&#39;impostazione regionale attiva. Scrivi l&#39;intera frase nella lingua sorgente e racchiudila nel componente, affinché testo, elementi annidati e formattazione vengano tradotti come un&#39;unica unità.

## Racchiudi il contenuto del template in `<T>` [#wrap]

Inserisci nello slot predefinito i contenuti statici destinati agli utenti:

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

<template>
  <T>
    <section>
      <h1>Welcome back</h1>
      <p>Your order is on its way.</p>
    </section>
  </T>
</template>
```

La CLI identifica la voce in base al contenuto e alla struttura. Mantieni i valori di runtime fuori dalla normale interpolazione nella traduzione. Racchiudili con [`<Var>`](/docs/vue/reference/components/var), [`<Num>`](/docs/vue/reference/components/num), [`<Currency>`](/docs/vue/reference/components/currency) o [`<DateTime>`](/docs/vue/reference/components/datetime).

Non annidare un [`<T>`](/docs/vue/reference/components/t) dentro un altro. Separa le frasi indipendenti in traduzioni affiancate.

## Aggiungi il contesto di traduzione [#context]

Usa la prop `context`, compatibile con Vue, quando lo stesso testo sorgente può avere significati diversi:

```vue
<T context="a bank beside a river">Bank</T>
```

Il contesto modifica l&#39;identità del catalogo e fornisce al sistema di traduzione le informazioni necessarie per scegliere la formulazione corretta. Non viene renderizzato nella pagina.

Le props facoltative `max-chars` e `requires-review` aggiungono metadati alla traduzione. Mantieni questi valori statici affinché la CLI possa estrarli.

## Traduzione tramite un componente personalizzato [#components]

Il contenuto definito staticamente nello slot predefinito di un componente personalizzato viene tradotto insieme al contenuto circostante:

```vue title="src/components/HelpPanel.vue"
<script setup lang="ts">
import { T } from 'gt-vue';
import DocsLink from './DocsLink.vue';
</script>

<template>
  <T>
    Read the <DocsLink href="/docs">installation guide</DocsLink> before continuing.
  </T>
</template>
```

L&#39;istanza del componente personalizzato, i relativi listener e le props non traducibili vengono mantenuti, mentre il contenuto tradotto sostituisce lo slot predefinito e le props di testo statico supportate. `DocsLink` non viene sostituito da un Fragment, quindi stato e comportamento restano associati allo stesso confine. Il [`<T>`](/docs/vue/reference/components/t) circostante mantiene una radice Fragment sia nel rendering sorgente sia in quello tradotto, anziché modificare il tipo di radice durante l&#39;aggiornamento.

Solo il contenuto passato nello slot predefinito è visibile alla traduzione esterna. Il testo creato all&#39;interno di `DocsLink.vue` non fa parte di quella voce. Racchiudi il testo interno nel suo [`<T>`](/docs/vue/reference/components/t).

I tag dei componenti personalizzati all&#39;interno di una traduzione devono essere risolti a runtime. Importa i componenti locali o registrali normalmente; un avviso relativo a un componente non risolto indica un errore di configurazione, non una sorgente di traduzione supportata.

## Mantieni espliciti i confini degli slot [#slots]

Un [`<T>`](/docs/vue/reference/components/t) esterno può tradurre il normale contenuto dello slot predefinito di un componente personalizzato. Gli slot con scope, gli slot denominati arbitrari e i componenti selezionati a runtime si basano su comportamenti che l&#39;estrattore non può determinare in modo sicuro.

* Inserisci [`<T>`](/docs/vue/reference/components/t) all&#39;interno di uno slot con scope o denominato quando è lo slot a contenere la frase.
* Racchiudi un confine dinamico opaco con [`<Var>`](/docs/vue/reference/components/var) quando il relativo output deve rimanere invariato.
* Usa tag diretti per i componenti personalizzati. Le forme con selettore sono limitate ai componenti GT riconosciuti e ai built-in Vue supportati che l&#39;estrattore risolve esplicitamente; inserisci [`<T>`](/docs/vue/reference/components/t) all&#39;interno di confini di selettori personalizzati arbitrari, selezionati a runtime o non risolti.

Per [`<Suspense>`](https://vuejs.org/guide/built-ins/suspense), inserisci traduzioni separate negli slot predefinito e di fallback:

```vue
<Suspense>
  <T>La tua dashboard è pronta.</T>
  <template #fallback>
    <T>Caricamento della dashboard…</T>
  </template>
</Suspense>
```

Quando [`<Suspense>`](https://vuejs.org/guide/built-ins/suspense) si trova all&#39;interno di un [`<T>`](/docs/vue/reference/components/t) esterno, il suo contenuto predefinito può essere incluso nella traduzione, mentre il fallback rimane escluso. Mantenere la frase di ogni slot nella propria traduzione rende chiaro a chi appartiene.

## Rappresenta in modo sicuro la struttura a runtime [#dynamic-structure]

Le traduzioni devono conoscere tutte le possibili formulazioni al momento dell&#39;estrazione. Usa [`<Plural>`](/docs/vue/reference/components/plural) per le formulazioni che dipendono da `count` e [`<Branch>`](/docs/vue/reference/components/branch) per altre alternative finite, anziché inserire condizionali a runtime direttamente nell&#39;albero tradotto.

```vue
<T>
  <Branch :branch="status">
    <template #active>Il tuo abbonamento è attivo.</template>
    <template #paused>Il tuo abbonamento è sospeso.</template>
    <template #default>Lo stato del tuo abbonamento non è disponibile.</template>
  </Branch>
</T>
```

Il compiler dei template di Vue determina come rientri e interruzioni di riga vengono trasformati in nodi di testo. Inserisci nel layout le frasi inline che devono essere visibili al lettore e mantieni invariata l&#39;impostazione degli spazi bianchi del compiler, affinché l&#39;estrazione e il rendering usino la stessa struttura.
## Next steps

- /docs/vue/guides/formatting-variables
- /docs/vue/guides/handling-plurals-and-branches
- /docs/vue/guides/translating-strings
- /docs/vue/guides/configuring