Il componente <T>

Inserisci i tuoi contenuti nel componente <T> per tradurli. Il contenuto originale viene mostrato fino al caricamento della traduzione.

<T>This content will be translated</T>

Anche il testo con associazioni funziona. Il contenuto viene tradotto nuovamente ogni volta che cambia, ad esempio quando cambia name:

<T>Hello {{ name }}</T>

Per valori che cambiano spesso, come nomi e conteggi, usa invece le variabili, in modo che il testo venga tradotto una sola volta.

Tutte le traduzioni richieste contemporaneamente vengono inviate all'API in un'unica richiesta e le traduzioni vengono memorizzate nella cache. Puoi usare tutti i componenti <T> che desideri.

Il plugin registra <T> a livello globale. Puoi anche importarlo: import { T } from '@magic-translate/vue'. Translate è lo stesso componente di T.

Props

<T lang="fr" formality="formal">How are you?</T>

Variabili

Inserisci valori che cambiano, come un nome o un conteggio, in v e fai riferimento ad essi come $name nel contenuto:

<T :v="{ name: user.name, count }">Hi $name, you have $count new messages</T>

Magic Translate traduce il testo attorno ai valori una volta, come Hi {0}, you have {1} new messages, e reinserisce i valori nella tua app. La traduzione è memorizzata nella cache e funziona per ogni nome e conteggio, e i valori stessi non vengono mai inviati a Magic Translate. Quando cambiano solo i valori, non viene fatta alcuna nuova richiesta.

I valori sono numerati nell'ordine in cui appaiono per la prima volta. La traduzione può spostarli ovunque la lingua ne abbia bisogno, ad esempio {1} neue Nachrichten für {0}. Il testo attorno ai valori può contenere HTML:

<T :v="{ count: cart.items.length }">You have <b>$count items</b> in your cart.</T>

Alcune regole:

• Vengono sostituite solo le chiavi v, quindi un testo come $5 rimane così com'è. Se due tasti iniziano nello stesso modo, ad esempio count e counts, vince quello più lungo.
• Lo stesso nome può apparire più di una volta.
• I valori vengono inseriti come testo, mai come HTML. Inserisci invece un markup nel testo che li circonda: Hi <b>$name</b>.
• Le variabili vengono sostituite solo nel testo, non in attributi come href o title.
• Una chiave che non appare nel testo registra un avviso, che rileva errori di battitura.
• Con il rendering lato server, ad esempio con Nuxt, un <T> con v viene visualizzato vuoto sul server e viene visualizzato una volta che l'app viene eseguita nel browser.

Limitazioni

1. Non puoi inserire componenti Vue all'interno del componente <T>. Gli elementi HTML semplici vanno bene (vedi l'esempio seguente) e gli stili con ambito continuano a funzionare su di essi.
2. Il contenuto all'interno di un componente <T> non può superare i 10 KB, ovvero circa 5.000 caratteri.

<!-- this is OK, since <a> is a plain HTML element -->
<T>
  <a href="mailto:info@i42.ch">Please send us an email</a>
</T>

<!-- this does NOT work, since <MyButton> is a Vue component -->
<T>
  <MyButton>Click me</MyButton>
</T>

Per tradurre attributi e altre stringhe, usa useTranslate composable.