useI18n-Composable und t()-Funktion
useI18n(), t('key'), $t in Templates, Wechsel mit locale.value und Erkennung der Locale
useI18n-Composable und t()-Funktion ist eine kostenlose Vue Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Vue Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Vue Academy-Kurs umfasst insgesamt 4 Lektionen.
In script setup übersetzen
Im Composition-API-Modus greifen Komponenten über das Composable useI18n() auf Übersetzungsfunktionen zu. Es gibt unter anderem die Funktion t und ein reaktives locale-Ref zurück.
useI18n aufrufen
Rufen Sie useI18n() innerhalb von <script setup> auf und destrukturieren Sie die benötigten Werte.
import { useI18n } from "vue-i18n"
const { t, locale } = useI18n()Die Funktion t
t(key) gibt die übersetzte Zeichenfolge für die aktive Locale zurück. In Skripten entspricht sie dem $t aus Templates.
const { t } = useI18n()
const title = t("greeting") // "Hello" when locale is enInterpolation mit t
Übergeben Sie als zweites Argument ein Objekt mit benannten Werten, um Platzhalter einzusetzen, genau wie in Templates.
const { t } = useI18n()
const msg = t("welcome", { name: "Alice" })
// message "Welcome, {name}!" => "Welcome, Alice!"t für dynamische Zeichenfolgen verwenden
Da t eine gewöhnliche Funktion ist, können Sie sie überall in der Skriptlogik verwenden, etwa zum Erstellen von Toast-Nachrichten, berechneten Beschriftungen oder Validierungstexten.
import { computed } from "vue"
const { t } = useI18n()
const label = computed(() => t("nav.home"))Das locale-Ref
locale ist ein reaktives Ref, das den aktuellen Sprachcode enthält. Beim Lesen erfahren Sie, welche Sprache aktiv ist.
const { locale } = useI18n()
console.log(locale.value) // "en"Die Sprache global wechseln
Wenn Sie locale.value einen Wert zuweisen, ändern Sie die aktive Sprache für die gesamte App. Jeder t-Aufruf und jedes $t in Templates wird reaktiv in der neuen Sprache gerendert.
function switchToTurkish() {
locale.value = "tr"
}
// All translated text updates automatically.Ein Sprachumschalter
Ein einfacher Sprachumschalter bindet ein Select-Element an locale. Da die Bindung reaktiv ist, wechselt die gesamte Benutzeroberfläche sofort, wenn Sie eine Option auswählen.
<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 oder t
Beide Funktionen tun in unterschiedlichen Kontexten dasselbe:
$t– automatisch in Templates verfügbar, ohne Import.t– stammt aususeI18n()und wird in Skripten sowie reaktiver Logik verwendet.
Verwenden Sie t bevorzugt, wenn Sie Zeichenfolgen im Code berechnen.
Lokale oder globale Nachrichten
useI18n() kann Optionen entgegennehmen, um komponentenlokale Nachrichten zu verwenden. Ohne Optionen wird die globale Instanz verwendet – die übliche Wahl für appweite Übersetzungen.
const { t } = useI18n() // global messages
// component-scoped (advanced):
// const { t } = useI18n({
// messages: { en: { ok: "OK" }, tr: { ok: "Tamam" } }
// })Die Auswahl speichern
Die Sprache ist eine Benutzereinstellung und sollte daher gespeichert werden. Lesen Sie beim Start einen gespeicherten Wert ein und schreiben Sie ihn jedes Mal, wenn sich locale ändert, mit einem Watcher.
import { watch } from "vue"
const { locale } = useI18n()
watch(locale, (val) => localStorage.setItem("lang", val))Kurze Überprüfung
Überprüfen Sie Ihr Verständnis von useI18n.
Zusammenfassung
Sie haben die Laufzeit-API für Übersetzungen kennengelernt:
useI18n()gibttund ein reaktiveslocale-Ref zurück.t(key)übersetzt;t(key, { name })setzt Platzhalter ein.- Verwenden Sie
tin Skriptlogik und berechneten Werten sowie$tin Templates. - Setzen Sie
locale.value, um die Sprache global und reaktiv zu wechseln. - Speichern Sie die Auswahl mit einem
watchauflocale.
Lerne HTML mit einem KI-Tutor — kostenlos
Schreibe und führe echten Code in deinem Browser aus, bekomme sofortige Hilfe von einem 24/7 KI-Tutor und setze dein Lernen im Web oder in der App fort.
- Kurse
- 42
- Lektionen
- 156
Häufig gestellte Fragen
Ist die Lektion „useI18n-Composable und t()-Funktion“ kostenlos?
Ja — der vollständige Text von „useI18n-Composable und t()-Funktion“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Vue Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Vue Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „useI18n-Composable und t()-Funktion“?
useI18n(), t('key'), $t in Templates, Wechsel mit locale.value und Erkennung der Locale Du übst Vue Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Vue Academy zu starten?
Keine Vorkenntnisse erforderlich. Vue Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 4.
Wie lange dauert die Lektion „useI18n-Composable und t()-Funktion“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Vue Academy-Lektion Code schreiben und ausführen?
Ja. Jede Vue Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- vue-i18n einrichten und Nachrichtendateien
- useI18n-Composable und t()-Funktion
- Pluralisierung und verknüpfte Nachrichten
- Formatierung von Zahlen, Datumsangaben und Währungen