Svelte i18n: Internationalisierung einfach gemacht [Guide 2026]

Schnelle Antwort

Um Internationalisierung (i18n) zu Svelte hinzuzufügen, verwende svelte-i18n. Installiere mit npm install svelte-i18n, erstelle deine Wörterbuchdateien, initialisiere die Bibliothek in deinem Layout und verwende den $t Store, um übersetzten Text anzuzeigen. Für SvelteKit stelle sicher, dass du die Initialisierung sowohl serverseitig als auch clientseitig handhabst, um Hydration-Mismatch zu vermeiden.

---

Einführung in Svelte Internationalisierung

Die reaktive Natur von Svelte macht es hervorragend für den Bau mehrsprachiger Anwendungen. Die Handhabung von Routing, State und Laden von Übersetzungen in SvelteKit erfordert jedoch eine solide Strategie.

Warum brauchen Svelte-Entwickler i18n?

• Globale Reichweite: Apps, die mit Svelte gebaut wurden, sind oft performant und ideal für das mobile Web.
• Barrierefreiheit: Native Sprachunterstützung ist ein Schlüsselelement der Web-Barrierefreiheit.
• SvelteKit Routing: Die Nutzung von SvelteKits Dateisystem-Routing für lokalisierte URLs (z.B. /de/uber, /fr/uber) steigert SEO.

---

Wahl einer i18n-Bibliothek für Svelte

Während es mehrere Optionen gibt, bleibt svelte-i18n der Community-Standard aufgrund seiner Einfachheit und Nutzung von Svelte Stores.

svelte-i18n

• Pro: Basiert auf Svelte Stores, leichtgewichtig, unterstützt Lazy Loading.
• Contra: Erfordert manuelles Setup für SvelteKit SSR.

---

Schritt-für-Schritt Implementierung

Schritt 1: Abhängigkeiten installieren

TerminalCopy
npm install svelte-i18n

Schritt 2: Übersetzungsdateien erstellen

Organisiere deine Übersetzungen in JSON-Dateien.

JSONCopy
1// src/locales/de.json
2{
3  "greeting": "Hallo Welt!",
4  "nav": {
5    "home": "Startseite",
6    "about": "Über uns"
7  }
8}

Schritt 3: i18n Konfigurieren

JavaScriptCopy
1// src/lib/i18n.js
2import { register, init, getLocaleFromNavigator } from 'svelte-i18n';
3
4register('en', () => import('../locales/en.json'));
5register('de', () => import('../locales/de.json'));
6
7init({
8  fallbackLocale: 'en',
9  initialLocale: getLocaleFromNavigator(),
10});

Schritt 4: Verwendung in Komponenten

SVELTECopy
1<script>
2  import { t } from 'svelte-i18n';
3</script>
4
5<h1>{$t('greeting')}</h1>

---

Übersetzungsmanagement im großen Stil mit IntlPull

Wenn deine Svelte-App wächst, wird die Verwaltung mehrerer JSON-Dateien chaotisch.

IntlPull integriert sich direkt in deinen Workflow:

1. Extrahieren: Finde automatisch neue Schlüssel.
2. Pushen: Sende Schlüssel an IntlPull.
3. Übersetzen: Nutze KI oder menschliche Übersetzer.
4. Sync: Hole aktualisierte JSON-Dateien zurück.

TerminalCopy
# Beispiel Workflow
npx @intlpullhq/cli push src/locales/en.json
npx @intlpullhq/cli pull --languages de,fr,es

---

Fazit

Die Einfachheit von Svelte erstreckt sich auf sein i18n-Ökosystem. Durch die Kombination von svelte-i18n für Runtime-Übersetzung und IntlPull für Management kannst du wirklich globale Svelte-Apps ohne Reibung bauen.

Bereit, deine Svelte-App zu skalieren? Teste IntlPull kostenlos.