Konfigurera vue-i18n och meddelandefiler
createI18n(), lokala JSON-filer, meddelandesyntaxen {name}, nästlade nycklar och reservlocale.
Konfigurera vue-i18n och meddelandefiler är en gratis lektion i Vue Academy på CoddyKit. Detta är lektion 1 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för Vue Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Vue Academy innehåller totalt 4 lektioner.
Vad är i18n?
Internationalisering (i18n) innebär att bygga appen så att den kan visa text på flera språk. Vue I18n är biblioteket enligt Vue:s officiella stil för att översätta Vue-appar.
I stället för att hårdkoda engelska strängar slår du upp nycklar som löses till det aktiva språket.
Installera Vue I18n
Lägg till paketet. För Vue 3 använder du version 9 eller senare, som bygger på Composition API.
// terminal
// npm install vue-i18nMeddelandefiler
Översättningarna finns i meddelandeobjekt, ett per locale. Nycklar kopplas till översatta strängar. Börja med engelska.
const en = {
greeting: "Hello",
nav: {
home: "Home",
about: "About",
},
}Lägga till en turkisk locale
Varje locale har samma nyckelstruktur, så att varje nyckel finns på alla språk.
const tr = {
greeting: "Merhaba",
nav: {
home: "Ana Sayfa",
about: "Hakkinda",
},
}Skapa i18n-instansen
createI18n bygger instansen. Ange locale (det aktiva språket), fallbackLocale (används när en nyckel saknas) och mappningen messages.
import { createI18n } from "vue-i18n"
const i18n = createI18n({
legacy: false,
locale: "en",
fallbackLocale: "en",
messages: { en, tr },
})Varför legacy: false
Genom att ange legacy: false aktiverar du Composition API-läget, som moderna Vue 3-appar använder. Det aktiverar composablen useI18n som du möter i nästa lektion.
const i18n = createI18n({
legacy: false, // Composition API mode
locale: "en",
messages: { en, tr },
})Registrera med appen
Installera instansen som ett plugin med app.use(i18n). Då blir hjälpfunktioner för översättning tillgängliga i hela komponentträdet.
import { createApp } from "vue"
import App from "./App.vue"
const app = createApp(App)
app.use(i18n)
app.mount("#app")Använda $t i mallar
När instansen har installerats kan varje mall anropa $t(key) för att slå upp en översättning i den aktiva lokalen.
<template>
<h1>{{ $t("greeting") }}</h1>
<a>{{ $t("nav.home") }}</a>
</template>Så fungerar fallbackLocale
Om en nyckel saknas i den aktiva lokalen använder Vue I18n fallbackLocale i stället för att visa den råa nyckeln. Det håller gränssnittet begripligt medan översättningarna färdigställs.
// tr is missing "tagline" -> falls back to en
// {{ $t("tagline") }} renders the English textInterpolering med platshållare
Meddelanden kan innehålla namngivna platshållare inom klammerparenteser. Skicka värden som det andra argumentet för att fylla i dem.
const en = {
welcome: "Welcome, {name}!",
}
// template:
// {{ $t("welcome", { name: "Ada" }) }}
// => "Welcome, Ada!"Organisera meddelandefiler
I riktiga appar lägger du varje locale i en egen fil (en.json, tr.json) och importerar dem. Då blir översättningarna lättare att hantera och översättare kan arbeta självständigt.
// locales/en.json, locales/tr.json
import en from "./locales/en.json"
import tr from "./locales/tr.json"
createI18n({ locale: "en", messages: { en, tr } })Snabbkontroll
Kontrollera din förståelse av hur Vue I18n konfigureras.
Sammanfattning
Du har konfigurerat Vue I18n:
- i18n innebär att visa text på flera språk genom att slå upp nycklar.
- Definiera ett meddelandeobjekt per locale med samma nyckelstruktur.
createI18ntar emotlocale,fallbackLocaleochmessages; användlegacy: falseför Composition-läget.- Installera med
app.use(i18n)och översätt i mallar med$t(key). - Platshållare som
{name}fylls i via ett andra argument.
Lär dig HTML med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 42
- Lektioner
- 156
Vanliga frågor
Är lektionen ”Konfigurera vue-i18n och meddelandefiler” gratis?
Ja – du kan läsa vilka 3 lektioner som helst i lärvägen Vue Academy, inklusive ”Konfigurera vue-i18n och meddelandefiler”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i Vue Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”Konfigurera vue-i18n och meddelandefiler”?
createI18n(), lokala JSON-filer, meddelandesyntaxen {name}, nästlade nycklar och reservlocale. Ni övar på Vue Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig Vue Academy?
Du behöver inga förkunskaper. Utbildningen i Vue Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 1 av 4.
Hur lång tid tar lektionen ”Konfigurera vue-i18n och meddelandefiler”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här Vue Academy-lektionen?
Ja. Varje Vue Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- Konfigurera vue-i18n och meddelandefiler
- useI18n-composable och funktionen t()
- Pluralisering och länkade meddelanden
- Formatering av tal, datum och valutor