Vue Academy · Lektion

useI18n-composable och funktionen t()

useI18n(), t('key'), $t i mallar, byte av locale med locale.value och identifiering av locale.

Lektion 2 av 413 steg

useI18n-composable och funktionen t() är en gratis lektion i Vue Academy på CoddyKit. Detta är lektion 2 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.

Översätta i script setup

I Composition API-läget får komponenter tillgång till översättningsverktyg genom composablen useI18n(). Den returnerar bland annat funktionen t och en reaktiv locale-ref.

Anropa useI18n

Anropa useI18n() inuti <script setup> och destrukturera det du behöver.

import { useI18n } from "vue-i18n"

const { t, locale } = useI18n()

Funktionen t

t(key) returnerar den översatta strängen för den aktiva lokalen. Den motsvarar $t i mallar, fast på scriptsidan.

const { t } = useI18n()

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

Interpolering med t

Skicka ett objekt med namngivna värden som det andra argumentet för att fylla i platshållare, precis som i mallar.

const { t } = useI18n()

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

Använda t för dynamiska strängar

Eftersom t är en vanlig funktion kan du använda den var som helst i scriptlogik — för att bygga toast-meddelanden, beräknade etiketter eller valideringstext.

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

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

locale-refen

locale är en reaktiv ref som innehåller den aktuella språkkoden. När du läser den får du veta vilket språk som är aktivt.

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

Byta språk globalt

Om du tilldelar ett värde till locale.value ändras det aktiva språket för hela appen. Alla anrop till t och $t i mallar renderas om reaktivt med det nya språket.

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

En språkväxlare

En enkel språkväxlare binder en select till locale. Eftersom den är reaktiv ändras hela gränssnittet direkt när du väljer ett alternativ.

<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 jämfört med t

De gör samma sak i två olika sammanhang:

$t — tillgänglig automatiskt i mallar, utan import.
t — från useI18n(), används i script och reaktiv logik.

Föredra t när du beräknar strängar i kod.

Lokala jämfört med globala meddelanden

useI18n() kan ta emot alternativ för att använda komponentlokala meddelanden. Utan alternativ används den globala instansen — det vanligaste valet för översättningar som gäller hela appen.

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

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

Spara valet

Språk är en användarinställning, så spara den. Läs in ett sparat värde vid start och skriv det varje gång locale ändras med en watcher.

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

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

Snabbkontroll

Kontrollera din förståelse av useI18n.

Besvara frågan i den interaktiva lektionen

Sammanfattning

Du har lärt dig API:t för översättning under körning:

useI18n() returnerar t och en reaktiv locale-ref.
t(key) översätter; t(key, { name }) interpolerar platshållare.
Använd t i scriptlogik och beräknade värden; använd $t i mallar.
Ange locale.value för att byta språk globalt och reaktivt.
Spara valet genom att använda en watch på locale.

Gratis att börja

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

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”useI18n-composable och funktionen t()” gratis?

Ja – du kan läsa vilka 3 lektioner som helst i lärvägen Vue Academy, inklusive ”useI18n-composable och funktionen t()”, 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 ”useI18n-composable och funktionen t()”?

useI18n(), t('key'), $t i mallar, byte av locale med locale.value och identifiering av locale. 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 2 av 4.

Hur lång tid tar lektionen ”useI18n-composable och funktionen t()”?

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

← Tillbaka till Vue Academy