0Pricing
Vue Academy · Lezione

Configurazione di vue-i18n e file dei messaggi

createI18n(), file JSON delle locale, sintassi dei messaggi {name}, chiavi nidificate, locale di fallback.

Configurazione di vue-i18n e file dei messaggi è una lezione Vue Academy gratuita su CoddyKit. Questa è la lezione 1 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.

Che cos'è i18n?

Internazionalizzazione (i18n) significa costruire l'app in modo che possa presentare il testo in più lingue. Vue I18n è la libreria ufficiale per tradurre le app Vue.

Anziché inserire stringhe inglesi direttamente nel codice, si cercano chiavi che vengono risolte nella lingua attiva.

Installare Vue I18n

Aggiunga il pacchetto. Per Vue 3 utilizzi la versione 9 o una successiva, basata sulla Composition API.

// terminal
// npm install vue-i18n

File dei messaggi

Le traduzioni risiedono in oggetti dei messaggi, uno per ogni locale. Le chiavi vengono associate alle stringhe tradotte. Inizi dall'inglese.

const en = {
  greeting: "Hello",
  nav: {
    home: "Home",
    about: "About",
  },
}

Aggiungere il locale turco

Ogni locale riproduce la stessa struttura di chiavi, così ogni chiave è presente in tutte le lingue.

const tr = {
  greeting: "Merhaba",
  nav: {
    home: "Ana Sayfa",
    about: "Hakkinda",
  },
}

Creare l'istanza i18n

createI18n crea l'istanza. Imposti locale (la lingua attiva), fallbackLocale (utilizzato quando manca una chiave) e la mappa messages.

import { createI18n } from "vue-i18n"

const i18n = createI18n({
  legacy: false,
  locale: "en",
  fallbackLocale: "en",
  messages: { en, tr },
})

Perché legacy: false

Impostare legacy: false abilita la modalità Composition API, utilizzata dalle moderne app Vue 3. In questo modo è disponibile il composable useI18n, che incontrerà nella prossima lezione.

const i18n = createI18n({
  legacy: false, // Composition API mode
  locale: "en",
  messages: { en, tr },
})

Registrare l'istanza nell'app

Installi l'istanza come plugin con app.use(i18n). In questo modo gli helper per le traduzioni sono disponibili in tutto l'albero dei componenti.

import { createApp } from "vue"
import App from "./App.vue"

const app = createApp(App)
app.use(i18n)
app.mount("#app")

Usare $t nei template

Dopo l'installazione, ogni template può chiamare $t(key) per cercare una traduzione nel locale attivo.

<template>
  <h1>{{ $t("greeting") }}</h1>
  <a>{{ $t("nav.home") }}</a>
</template>

Come funziona fallbackLocale

Se manca una chiave nel locale attivo, Vue I18n utilizza fallbackLocale invece di mostrare la chiave non elaborata. In questo modo l'interfaccia rimane sensata mentre le traduzioni sono in corso.

// tr is missing "tagline" -> falls back to en
// {{ $t("tagline") }} renders the English text

Interpolazione con i segnaposto

I messaggi possono contenere segnaposto denominati tra parentesi graffe. Passi i valori come secondo argomento per inserirli nel testo.

const en = {
  welcome: "Welcome, {name}!",
}

// template:
// {{ $t("welcome", { name: "Ada" }) }}
// => "Welcome, Ada!"

Organizzare i file dei messaggi

Nelle app reali, inserisca ogni locale in un file separato (en.json, tr.json) e li importi. In questo modo le traduzioni sono più facili da gestire e i traduttori possono lavorare in modo indipendente.

// locales/en.json, locales/tr.json
import en from "./locales/en.json"
import tr from "./locales/tr.json"

createI18n({ locale: "en", messages: { en, tr } })

Verifica rapida

Verifichi la sua comprensione della configurazione di Vue I18n.

Riepilogo

Ha configurato Vue I18n:

  • i18n significa presentare il testo in più lingue cercando le chiavi.
  • Definisca un oggetto dei messaggi per ogni locale, con la stessa struttura di chiavi.
  • createI18n accetta locale, fallbackLocale e messages; utilizzi legacy: false per la modalità Composition.
  • Installi i18n con app.use(i18n) e traduca nei template con $t(key).
  • I segnaposto come {name} vengono riempiti tramite un secondo argomento.

Domande Frequenti

La lezione «Configurazione di vue-i18n e file dei messaggi» è gratuita?

Sì — il testo completo di «Configurazione di vue-i18n e file dei messaggi» è 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 «Configurazione di vue-i18n e file dei messaggi»?

createI18n(), file JSON delle locale, sintassi dei messaggi {name}, chiavi nidificate, locale di fallback. 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 1 di 4.

Quanto tempo richiede la lezione «Configurazione di vue-i18n e file dei messaggi»?

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