0Pricing
Vue Academy · Lezione

Composable useI18n e funzione t()

useI18n(), t('key'), $t nei template, cambio di locale.value, rilevamento della locale.

Composable useI18n e funzione t() è una lezione Vue Academy gratuita su CoddyKit. Questa è la lezione 2 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Vue Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Vue Academy include 4 lezioni in totale.

Tradurre in script setup

Nella modalità Composition API, i componenti accedono agli strumenti di traduzione tramite il composable useI18n(). Questo restituisce, tra gli altri elementi, la funzione t e un ref reattivo locale.

Chiamare useI18n

Chiami useI18n() all'interno di <script setup> e destrutturi ciò che le serve.

import { useI18n } from "vue-i18n"

const { t, locale } = useI18n()

La funzione t

t(key) restituisce la stringa tradotta per il locale attivo. È l'equivalente, nello script, di $t nei template.

const { t } = useI18n()

const title = t("greeting") // "Hello" when locale is en

Interpolazione con t

Passi un oggetto di valori denominati come secondo argomento per riempire i segnaposto, esattamente come nei template.

const { t } = useI18n()

const msg = t("welcome", { name: "Alice" })
// message "Welcome, {name}!" => "Welcome, Alice!"

Usare t per le stringhe dinamiche

Poiché t è una funzione semplice, può essere utilizzata in qualsiasi punto della logica dello script: per creare messaggi toast, etichette calcolate o testi di convalida.

import { computed } from "vue"
const { t } = useI18n()

const label = computed(() => t("nav.home"))

Il ref locale

locale è un ref reattivo che contiene il codice della lingua corrente. Leggendolo si identifica la lingua attiva.

const { locale } = useI18n()
console.log(locale.value) // "en"

Cambiare globalmente la lingua

Assegnare un valore a locale.value modifica la lingua attiva per l'intera app. Ogni chiamata a t e ogni $t nei template vengono nuovamente renderizzati in modo reattivo nella nuova lingua.

function switchToTurkish() {
  locale.value = "tr"
}
// All translated text updates automatically.

Un selettore della lingua

Un selettore semplice collega un select a locale. Poiché è reattivo, la scelta di un'opzione cambia immediatamente l'intera interfaccia.

<template>
  <select v-model="locale">
    <option value="en">English</option>
    <option value="tr">Turkce</option>
  </select>
</template>

<script setup>
import { useI18n } from "vue-i18n"
const { locale } = useI18n()
</script>

$t e t a confronto

Fanno la stessa cosa in due contesti:

  • $t — disponibile automaticamente nei template, senza importarlo.
  • t — proviene da useI18n() e viene utilizzato nello script e nella logica reattiva.

Preferisca t quando calcola stringhe nel codice.

Messaggi con ambito e globali

useI18n() può accettare opzioni per utilizzare messaggi locali al componente. Senza opzioni, utilizza l'istanza globale, la scelta più comune per le traduzioni dell'intera app.

const { t } = useI18n() // global messages

// component-scoped (advanced):
// const { t } = useI18n({
//   messages: { en: { ok: "OK" }, tr: { ok: "Tamam" } }
// })

Rendere persistente la scelta

La lingua è una preferenza dell'utente, quindi la renda persistente. Legga il valore salvato all'avvio e lo riscriva ogni volta che locale cambia, utilizzando un watcher.

import { watch } from "vue"
const { locale } = useI18n()

watch(locale, (val) => localStorage.setItem("lang", val))

Verifica rapida

Verifichi la sua comprensione di useI18n.

Riepilogo

Ha imparato a usare l'API di traduzione a runtime:

  • useI18n() restituisce t e un ref reattivo locale.
  • t(key) traduce; t(key, { name }) inserisce i segnaposto.
  • Utilizzi t nella logica dello script e nei valori calcolati; utilizzi $t nei template.
  • Imposti locale.value per cambiare la lingua globalmente e in modo reattivo.
  • Renda persistente la scelta con un watch su locale.

Domande Frequenti

La lezione «Composable useI18n e funzione t()» è gratuita?

Sì — il testo completo di «Composable useI18n e funzione t()» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Vue Academy, passa a CoddyKit PRO. Il corso Vue Academy include 4 lezioni in totale.

Cosa imparerò in «Composable useI18n e funzione t()»?

useI18n(), t('key'), $t nei template, cambio di locale.value, rilevamento della locale. Eserciti Vue Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Vue Academy?

Non è richiesta alcuna esperienza precedente. Vue Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 4.

Quanto tempo richiede la lezione «Composable useI18n e funzione t()»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Vue Academy?

Sì. Ogni lezione Vue Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

  1. Configurazione di vue-i18n e file dei messaggi
  2. Composable useI18n e funzione t()
  3. Pluralizzazione e messaggi collegati
  4. Formattazione di numeri, date e valute
← Torna a Vue Academy