Vue Academy · Lektion

useI18n-composable og funktionen t()

useI18n(), t('key'), $t i templates, skift af locale.value og registrering af locale

Lektion 2 af 413 trin

useI18n-composable og funktionen t() er en gratis Vue Academy-lektion på CoddyKit. Dette er lektion 2 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i Vue Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Vue Academy-kurset indeholder 4 lektioner i alt.

Oversættelse i script setup

I Composition API-tilstand får komponenter adgang til oversættelsesværktøjer gennem composablen useI18n(). Den returnerer blandt andet funktionen t og en reaktiv locale-ref.

Kald useI18n

Kald useI18n() inde i <script setup>, og destrukturér det, du har brug for.

import { useI18n } from "vue-i18n"

const { t, locale } = useI18n()

Funktionen t

t(key) returnerer den oversatte streng for den aktive sprogindstilling. Den svarer til $t i skabeloner, men bruges i script.

const { t } = useI18n()

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

Interpolation med t

Send et objekt med navngivne værdier som det andet argument for at udfylde pladsholdere, præcis som i skabeloner.

const { t } = useI18n()

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

Brug t til dynamiske strenge

Fordi t er en almindelig funktion, kan du bruge den overalt i scriptlogik — til at opbygge toast-beskeder, beregnede etiketter eller valideringstekst.

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

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

Ref'en locale

locale er en reaktiv ref, der indeholder den aktuelle sprogkode. Når du læser den, får du det aktive sprog.

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

Skift sprog globalt

Hvis du tildeler en værdi til locale.value, ændrer du det aktive sprog for hele appen. Alle kald til t og $t i skabeloner gengives reaktivt på det nye sprog.

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

En sprogvælger

En enkel sprogvælger binder en select til locale. Fordi den er reaktiv, skifter hele brugerfladen med det samme, når du vælger en indstilling.

<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 kontra t

De gør det samme i to forskellige sammenhænge:

$t — er automatisk tilgængelig i skabeloner uden import.
t — kommer fra useI18n() og bruges i script og reaktiv logik.

Foretræk t, når du beregner strenge i kode.

Lokale kontra globale meddelelser

useI18n() kan tage indstillinger, så du bruger komponentlokale meddelelser. Uden indstillinger bruger den den globale instans — det almindelige valg til oversættelser i hele appen.

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

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

Gem valget

Sprog er en brugerindstilling, så gem det. Læs en gemt værdi ved opstart, og skriv den, hver gang locale ændres, ved hjælp af en watcher.

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

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

Hurtigt tjek

Kontrollér din forståelse af useI18n.

Besvar den i den interaktive lektion

Opsummering

Du har lært API'et til oversættelse under kørsel:

useI18n() returnerer t og en reaktiv locale-ref.
t(key) oversætter; t(key, { name }) udfylder pladsholdere.
Brug t i scriptlogik og beregnede værdier; brug $t i skabeloner.
Angiv locale.value for at skifte sprog globalt og reaktivt.
Gem valget med en watch på locale.

Gratis at komme i gang

Lær HTML med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 42
Lektioner: 156

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “useI18n-composable og funktionen t()” gratis?

Ja — alle 3 lektioner i læringssporet Vue Academy, inklusive “useI18n-composable og funktionen t()”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Vue Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “useI18n-composable og funktionen t()”?

useI18n(), t('key'), $t i templates, skift af locale.value og registrering af locale Du øver dig i Vue Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på Vue Academy?

Der kræves ingen tidligere erfaring. Vue Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 2 af 4.

Hvor lang tid tager lektionen “useI18n-composable og funktionen t()”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne Vue Academy-lektion?

Ja. Alle Vue Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

Opsætning af vue-i18n og meddelelsesfiler
useI18n-composable og funktionen t()
Pluralisering og sammenkædede meddelelser
Formatering af tal, datoer og valuta

← Tilbage til Vue Academy