0Pricing
Vue Academy · Lektion

vue-i18n einrichten und Nachrichtendateien

createI18n(), locale-JSON-Dateien, Nachrichtensyntax {name}, verschachtelte Schlüssel und Fallback-Locale

vue-i18n einrichten und Nachrichtendateien ist eine kostenlose Vue Academy-Lektion auf CoddyKit. Dies ist Lektion 1 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.

Was ist i18n?

Internationalisierung (i18n) bedeutet, Ihre App so zu entwickeln, dass sie Texte in mehreren Sprachen anzeigen kann. Vue I18n ist eine Bibliothek im offiziellen Vue-Stil zum Übersetzen von Vue-Apps.

Statt englische Zeichenfolgen fest zu codieren, greifen Sie auf Schlüssel zu, die zur aktiven Sprache aufgelöst werden.

Vue I18n installieren

Fügen Sie das Paket hinzu. Für Vue 3 verwenden Sie Version 9 oder höher, die auf der Composition API aufbaut.

// terminal
// npm install vue-i18n

Nachrichtendateien

Übersetzungen werden in Nachrichtenobjekten gespeichert, jeweils einem pro Locale. Schlüssel verweisen auf übersetzte Zeichenfolgen. Beginnen Sie mit Englisch.

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

Eine türkische Locale hinzufügen

Jede Locale verwendet dieselbe Schlüsselstruktur, damit jeder Schlüssel in jeder Sprache vorhanden ist.

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

Die i18n-Instanz erstellen

createI18n erstellt die Instanz. Legen Sie locale (die aktive Sprache), fallbackLocale (wird verwendet, wenn ein Schlüssel fehlt) und die messages-Map fest.

import { createI18n } from "vue-i18n"

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

Warum legacy: false?

Die Einstellung legacy: false aktiviert den Composition-API-Modus, den moderne Vue-3-Apps verwenden. Dadurch wird das Composable useI18n verfügbar, das Sie in der nächsten Lektion kennenlernen.

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

Bei der App registrieren

Installieren Sie die Instanz mit app.use(i18n) als Plugin. Dadurch stehen Übersetzungshilfen im gesamten Komponentenbaum zur Verfügung.

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

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

$t in Templates verwenden

Nach der Installation kann jedes Template mit $t(key) eine Übersetzung in der aktiven Locale nachschlagen.

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

So funktioniert fallbackLocale

Wenn ein Schlüssel in der aktiven Locale fehlt, verwendet Vue I18n fallbackLocale, statt den unveränderten Schlüssel anzuzeigen. So bleibt die Benutzeroberfläche sinnvoll, während die Übersetzungen erstellt werden.

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

Interpolation mit Platzhaltern

Nachrichten können benannte Platzhalter in geschweiften Klammern enthalten. Übergeben Sie Werte als zweites Argument, um sie einzusetzen.

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

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

Nachrichtendateien organisieren

In echten Apps speichern Sie jede Locale in einer eigenen Datei (en.json, tr.json) und importieren sie. So bleiben Übersetzungen überschaubar und Übersetzer können unabhängig voneinander arbeiten.

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

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

Kurze Überprüfung

Überprüfen Sie Ihr Verständnis der Einrichtung von Vue I18n.

Zusammenfassung

Sie haben Vue I18n eingerichtet:

  • i18n bedeutet, Texte durch das Nachschlagen von Schlüsseln in mehreren Sprachen anzuzeigen.
  • Definieren Sie pro Locale ein Nachrichtenobjekt mit derselben Schlüsselstruktur.
  • createI18n verwendet locale, fallbackLocale und messages. Verwenden Sie legacy: false für den Composition-Modus.
  • Installieren Sie Vue I18n mit app.use(i18n) und übersetzen Sie in Templates mit $t(key).
  • Platzhalter wie {name} werden über ein zweites Argument eingesetzt.

Häufig gestellte Fragen

Ist die Lektion „vue-i18n einrichten und Nachrichtendateien“ kostenlos?

Ja — der vollständige Text von „vue-i18n einrichten und Nachrichtendateien“ 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 „vue-i18n einrichten und Nachrichtendateien“?

createI18n(), locale-JSON-Dateien, Nachrichtensyntax {name}, verschachtelte Schlüssel und Fallback-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 1 von 4.

Wie lange dauert die Lektion „vue-i18n einrichten und Nachrichtendateien“?

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

  1. vue-i18n einrichten und Nachrichtendateien
  2. useI18n-Composable und t()-Funktion
  3. Pluralisierung und verknüpfte Nachrichten
  4. Formatierung von Zahlen, Datumsangaben und Währungen
← Zurück zu Vue Academy