Autor:
    Aymeric PINEAU
    Erstellung:2026-03-31Letzte Aktualisierung:2026-08-30

    Übersetzen Sie Ihre Vanilla JS Website mit Intlayer | Internationalisierung (i18n)

    ide.intlayer.org
    intlayer-vanilla-template.vercel.app

    Inhaltsverzeichnis

    Warum Intlayer gegenüber Alternativen?

    Im Vergleich zu Hauptlösungen wie „i18next“ oder „i18n.js“ ist Intlayer eine Lösung, die über integrierte Optimierungen verfügt wie:

    Intlayer ist für die perfekte Zusammenarbeit mit Vanilla JavaScript optimiert, indem es Framework-unabhängiges Content-Management, TypeScript-Unterstützung und alle für die Skalierung der Internationalisierung (i18n) erforderlichen Funktionen bietet.

    Anstatt riesige JSON-Dateien in Ihre Seiten zu laden, laden Sie nur den erforderlichen Inhalt. Intlayer hilft Ihre Bundle- und Seitengröße um bis zu 50 % zu reduzieren.

    Durch die Festlegung des Inhaltsbereichs Ihrer Anwendung wird die Wartung für umfangreiche Anwendungen erleichtert. Sie können einen einzelnen Feature-Ordner duplizieren oder löschen, ohne die mentale Belastung durch die Überprüfung Ihrer gesamten Inhaltscodebasis auf sich nehmen zu müssen. Darüber hinaus ist Intlayer vollständig typisiert (fully typed), um die Genauigkeit Ihrer Inhalte sicherzustellen.

    Durch die gemeinsame Platzierung von Inhalten reduziert sich der von Large Language Models (LLMs) benötigte Kontext. Intlayer verfügt außerdem über eine Reihe von Tools, wie zum Beispiel eine CLI zum Testen auf fehlende Übersetzungen,LSP, MCP und agent skills, um die Entwicklererfahrung (DX) für KI-Agenten noch reibungsloser zu gestalten.

    Nutzen Sie die Automatisierung, um Ihre CI/CD-Pipeline mit dem LLM Ihrer Wahl auf Kosten Ihres KI-Anbieters zu übersetzen. Intlayer bietet außerdem einen Compiler zur Automatisierung der Inhaltsextraktion sowie eine Webplattform zur Unterstützung der Übersetzung im Hintergrund.

    Das Verbinden großer JSON-Dateien mit Komponenten kann zu Leistungs- und Reaktivitätsproblemen führen. Intlayer optimiert das Laden Ihrer Inhalte zur Erstellungszeit.

    Intlayer ist mehr als nur eine i18n-Lösung. Es bietet einen selbstgehosteten visuellen Editor und ein vollständiges CMS, um Ihnen zu helfen Verwalten Sie Ihre mehrsprachigen Inhalte in Echtzeit und gestalten Sie die Zusammenarbeit mit Übersetzern, Textern und anderen Teammitgliedern reibungslos. Inhalte können lokal und/oder remote gespeichert werden.

    Schritt-für-Schritt-Anleitung zur Einrichtung von Intlayer in einer Vanilla JS Anwendung

    1. Abhängigkeiten installieren

      Installieren Sie die erforderlichen Pakete mit npm:

      bash
      # Generieren Sie ein Standalone-Bundle von intlayer und vanilla-intlayer
# Diese Datei wird in Ihre HTML-Datei importiert
npx intlayer standalone --packages intlayer vanilla-intlayer --outfile intlayer.js

# Intlayer mit Konfigurationsdatei initialisieren
npx intlayer init --no-gitignore

# Wörterbücher erstellen
npx intlayer build

      • intlayer Das Kernpaket, das Internationalisierungswerkzeuge für Konfigurationsmanagement, Übersetzung, Inhaltsdeklaration, Transpilierung und CLI-Befehle bereitstellt.

      • vanilla-intlayer Das Paket, das Intlayer in reine JavaScript- / TypeScript-Anwendungen integriert. Es bietet ein Pub/Sub-Singleton (IntlayerClient) und Callback-basierte Hilfsfunktionen (useIntlayer, useLocale usw.), damit jeder Teil Ihrer App auf Sprachänderungen reagieren kann, ohne von einem UI-Framework abhängig zu sein.

      Der Bundling-Export des CLI-Befehls intlayer standalone erzeugt ein optimiertes Build durch Tree-Shaking ungenutzter Pakete, Locales und nicht essenzieller Logik (wie Weiterleitungen oder Präfixe), die spezifisch für Ihre Konfiguration sind.

    2. Konfiguration Ihres Projekts

      Architektur

      In dieser Architektur stellt der intlayer-Kern JavaScript-APIs bereit, um Wörterbücher in Standard-JavaScript- oder TypeScript-Umgebungen ohne Frontend-Framework zu deklarieren und zu nutzen.

      bash
      .
├── src
│   ├── app.content.mjs
│   └── main.js
├── index.html
├── intlayer.config.mjs
└── package.json

      Konfiguration

      Erstellen Sie eine Konfigurationsdatei, um die Sprachen Ihrer Anwendung zu konfigurieren:

      intlayer.config.ts
      import { Locales, type IntlayerConfig } from "intlayer";

const config: IntlayerConfig = {
  internationalization: {
    locales: [
      Locales.ENGLISH,
      Locales.FRENCH,
      Locales.SPANISH,
      // Ihre anderen Sprachen
    ],
    defaultLocale: Locales.ENGLISH,
  },
};

export default config;
      Über diese Konfigurationsdatei können Sie lokalisierte URLs, Middleware-Weiterleitungen, Cookie-Namen, den Speicherort und die Erweiterung Ihrer Inhaltsdeklarationen festlegen, Intlayer-Protokolle in der Konsole deaktivieren und vieles mehr. Eine vollständige Liste der verfügbaren Parameter finden Sie in der Konfigurationsdokumentation.

    3. Das Bundle in Ihr HTML importieren

      Sobald Sie das intlayer.js-Bundle erstellt haben, können Sie es in Ihre HTML-Datei importieren:

      index.html
      <!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="UTF-8" />

    <!-- Bundle importieren -->
    <script src="./intlayer.js" defer></script>
    <!-- Hauptskript importieren -->
    <script src="./src/main.js" defer></script>
  </head>
  <body>
    <h1 id="title"></h1>
    <p class="read-the-docs"></p>
  </body>
</html>

      Das Bundle stellt Intlayer und VanillaIntlayer als globale Objekte auf window zur Verfügung.

    4. Intlayer in Ihrem Einstiegspunkt initialisieren

      Rufen Sie in Ihrer src/main.js die Funktion installIntlayer() auf, bevor irgendwelche Inhalte gerendert werden, damit das globale Sprach-Singleton bereit ist.

      src/main.js
      const { installIntlayer } = window.VanillaIntlayer;

// Muss aufgerufen werden, bevor i18n-Inhalte gerendert werden.
installIntlayer();

      Wenn Sie auch den Markdown-Renderer verwenden möchten, rufen Sie installIntlayerMarkdown() auf:

      src/main.js
      const { installIntlayer, installIntlayerMarkdown } = window.VanillaIntlayer;

installIntlayer();
installIntlayerMarkdown();

    5. Deklarieren Sie Ihre Inhalte

      Erstellen und verwalten Sie Ihre Inhaltsdeklarationen, um Übersetzungen zu speichern:

      src/app.content.ts
      import { insert, t, type Dictionary } from "intlayer";

const appContent = {
  key: "app",
  content: {
    title: "Vite + Vanilla",

    viteLogoLabel: t({
      en: "Vite Logo",
      fr: "Logo Vite",
      es: "Logo Vite",
    }),

    count: insert(
      t({
        en: "count is {{count}}",
        fr: "le compte est {{count}}",
        es: "el recuento es {{count}}",
      })
    ),

    readTheDocs: t({
      en: "Click on the Vite logo to learn more",
      fr: "Cliquez sur le logo Vite pour en savoir plus",
      es: "Haga clic en el logotipo de Vite para obtener más información",
    }),
  },
} satisfies Dictionary;

export default appContent;

      Ihre Inhaltsdeklarationen können an beliebiger Stelle in Ihrer Anwendung definiert werden, solange sie im Verzeichnis contentDir (standardmäßig ./src) enthalten sind und der Dateierweiterung für Inhaltsdeklarationen entsprechen (standardmäßig .content.{json,ts,tsx,js,jsx,mjs,cjs,md,mdx,yaml,yml}).

      Weitere Einzelheiten finden Sie in der Dokumentation zur Inhaltsdeklaration.

    6. Intlayer in Ihrem JavaScript verwenden

      Das Objekt window.VanillaIntlayer bietet API-Hilfsfunktionen: useIntlayer(key, locale?) gibt den übersetzten Inhalt für einen bestimmten Schlüssel zurück.

      src/main.js
      const { installIntlayer, useIntlayer } = window.VanillaIntlayer;

installIntlayer();

// Den ursprünglichen Inhalt für die aktuelle Sprache abrufen.
// .onChange() anhängen, um benachrichtigt zu werden, wenn sich die Sprache ändert.
const content = useIntlayer("app").onChange((newContent) => {
  // Nur die betroffenen DOM-Knoten neu rendern oder patchen
  document.querySelector("h1").textContent = String(newContent.title);
  document.querySelector(".read-the-docs").textContent = String(
    newContent.readTheDocs
  );
});

// Erstmaliges Rendern
document.querySelector("h1").textContent = String(content.title);
document.querySelector(".read-the-docs").textContent = String(
  content.readTheDocs
);

      Greifen Sie auf untergeordnete Werte als Strings zu, indem Sie sie in String() einschließen, wodurch die Methode toString() des Knotens aufgerufen und der übersetzte Text zurückgegeben wird.

      Wenn Sie den Wert für ein natives HTML-Attribut benötigen (z. B. alt, aria-label), verwenden Sie direkt .value:

      javascript
      img.alt = content.viteLogoLabel.value;

    7. Die Sprache Ihrer Inhalte ändern

      Optional

      Um die Sprache Ihrer Inhalte zu ändern, verwenden Sie die Funktion setLocale, die von useLocale bereitgestellt wird.

      src/locale-switcher.js
      const { getLocaleName } = window.Intlayer;
const { useLocale } = window.VanillaIntlayer;

export function setupLocaleSwitcher(container) {
  const { locale, availableLocales, setLocale, subscribe } = useLocale();

  const select = document.createElement("select");
  select.setAttribute("aria-label", "Sprache");

  const render = (currentLocale) => {
    select.innerHTML = availableLocales
      .map(
        (loc) =>
          `<option value="${loc}"${loc === currentLocale ? " selected" : ""}>
            ${getLocaleName(loc)}
          </option>`
      )
      .join("");
  };

  render(locale);
  container.appendChild(select);

  select.addEventListener("change", () => setLocale(select.value));

  // Dropdown synchron halten, wenn sich die Sprache an anderer Stelle ändert
  return subscribe((newLocale) => render(newLocale));
}

    8. HTML Sprach- und Richtungsattribute umschalten

      Optional

      Aktualisieren Sie die Attribute lang und dir des <html>-Tags entsprechend der aktuellen Sprache für Barrierefreiheit und SEO.

      src/main.js
      const { getHTMLTextDir } = window.Intlayer;
const { installIntlayer, useLocale } = window.VanillaIntlayer;

installIntlayer();

useLocale({
  onLocaleChange: (locale) => {
    document.documentElement.lang = locale;
    document.documentElement.dir = getHTMLTextDir(locale);
  },
});

    9. Wörterbücher pro Sprache nachladen

      Optional

      Wenn Sie Wörterbücher pro Sprache nachladen möchten, können Sie useDictionaryDynamic verwenden. Dies ist nützlich, wenn Sie nicht alle Übersetzungen in der ursprünglichen Datei intlayer.js bündeln möchten.

      src/app.js
      const { installIntlayer, useDictionaryDynamic } = window.VanillaIntlayer;

installIntlayer();

const unsubscribe = useDictionaryDynamic(
  {
    en: () => import("../.intlayer/dictionaries/en/app.mjs"),
    fr: () => import("../.intlayer/dictionaries/fr/app.mjs"),
    es: () => import("../.intlayer/dictionaries/es/app.mjs"),
  },
  "app"
).onChange((content) => {
  document.querySelector("h1").textContent = String(content.title);
});
      Hinweis: useDictionaryDynamic erfordert, dass die Wörterbücher als separate ESM-Dateien verfügbar sind. Dieser Ansatz wird normalerweise verwendet, wenn Sie einen Webserver haben, der die Wörterbücher bereitstellt.

    TypeScript konfigurieren

    Stellen Sie sicher, dass Ihre TypeScript-Konfiguration die automatisch generierten Typen enthält.

    tsconfig.json
    {
  "compilerOptions": {
    // ...
  },
  "include": ["src", ".intlayer/**/*.ts"],
}

    VS Code Erweiterung

    Um Ihre Entwicklungserfahrung mit Intlayer zu verbessern, können Sie die offizielle Intlayer VS Code Erweiterung installieren.

    Aus dem VS Code Marketplace installieren

    Diese Erweiterung bietet:

    • Autovervollständigung für Übersetzungsschlüssel.
    • Echtzeit-Fehlererkennung für fehlende Übersetzungen.
    • Inline-Vorschauen von übersetzten Inhalten.
    • Schnellaktionen, um Übersetzungen einfach zu erstellen und zu aktualisieren.

    Weitere Informationen zur Verwendung der Erweiterung finden Sie in der Dokumentation zur Intlayer VS Code Erweiterung.

    Weiterführende Informationen

    Um tiefer einzusteigen, können Sie den Visual Editor implementieren oder Ihre Inhalte mit dem CMS auslagern.

    Häufig gestellte Fragen

    Ja. Genau das behandelt dieser Leitfaden. Sie importieren das vanilla-intlayer-Bundle direkt in Ihrem HTML, wie Schritt 3 zeigt, initialisieren es in Ihrem Einstiegspunkt und lesen Ihre Inhalte mit useIntlayer. Kein Vite, kein webpack und keine Build-Pipeline ist erforderlich.

    Viel weniger als ein Laufzeit-Katalog, denn eine Seite lädt niemals eine Sprache herunter, die sie nicht rendert. Inhalte werden aus im Voraus kompilierten Wörterbüchern aufgelöst, und Lazy Loading pro Locale hält die anderen Sprachen aus der initialen Nutzlast heraus, bis der Besucher wechselt. Gemessen an den üblichen Alternativen reduziert Intlayer die Bundle- und Seitengröße um bis zu 50 %. Siehe Bundle-Optimierung, dynamische Wörterbücher und den Benchmark.

    Weitgehend. Folgen Sie dem i18next-Migrationsleitfaden, um die Inhalte zu übernehmen. Sie können auch schrittweise migrieren: Das sync-JSON-Plugin behält Ihre vorhandenen JSON-Kataloge als Single Source of Truth und generiert daraus Intlayer-Wörterbücher, sodass beide Ebenen synchron bleiben, während Sie Skripte nach und nach umziehen.

    Ja. Das sync-JSON-Plugin behält Ihre /messages/{locale}/{namespace}.json-Dateien als Single Source of Truth und generiert daraus Intlayer-Wörterbücher, in beide Richtungen. Ein sync-PO-Plugin macht dasselbe für gettext-Kataloge, und Dateien pro Locale lassen Sie Inhalte nach Sprache aufteilen, statt Locales in einer Datei zu gruppieren.

    Nein. Führen Sie npx intlayer extract aus; Intlayer liest Ihre Quelldateien, zieht die für den Nutzer sichtbaren Strings heraus und schreibt neben jede eine .content-Datei, sodass Sie ein Diff prüfen, statt Strings einzeln in einen Katalog zu kopieren. Siehe den extract-Befehl.

    Für eine vollständig automatisierte Pipeline macht der Intlayer-Compiler dasselbe zur Build-Zeit auf JSX-, TSX-, Vue- und Svelte-Quellcode und generiert die Wörterbücher bei jeder Änderung, sodass es keine von Hand zu pflegenden Schlüssel gibt. Er arbeitet mit statischer Analyse, sodass Strings, die nur zur Laufzeit existieren, unerreichbar bleiben, und er braucht einige Annotationen, um für den Nutzer sichtbaren Text von Anwendungslogik zu unterscheiden.

    Fünf Bausteine, alle optional:

    • VS-Code-Erweiterung: von einem useIntlayer-Schlüssel zur Inhaltsdatei springen, die ihn deklariert, Inhalte aus einer Komponente extrahieren und build, fill, test, push und pull über die Befehlspalette oder einen eigenen Intlayer-Tab ausführen.
    • LSP-Server: dieselbe Wahrnehmung in jedem Editor, der LSP spricht, mit „Gehe zu Definition“, „Alle Referenzen suchen“, Hover-Vorschauen eines übersetzten Werts, Autovervollständigung von Schlüsseln und Feldern sowie einer Warnung, wenn ein Schlüssel nirgends deklariert ist. Es löst außerdem i18next-, react-i18next-, next-intl- und use-intl-Aufrufe auf, was bei der Migration hilft.
    • MCP-Server: stellt die Intlayer-Dokumentation und -CLI für Cursor, VS Code, Claude Desktop, Claude Code und ChatGPT bereit, sodass ein Assistent aus der aktuellen Doku antwortet statt zu raten und Befehle wie intlayer fill selbst ausführen kann.
    • Agent Skills: fokussierte Skills wie intlayer-config, intlayer-cli und intlayer-content sowie eines pro Framework, die einem Agenten Ihr Routing-Setup und die Inhaltsknoten-Typen beibringen.
    • ESLint-Plugin: no-raw-text markiert fest kodierte Strings, mit weiteren Regeln für statische Wörterbuchschlüssel und ungenutzte Inhalte.
    Vite und Vanilla JSVite und Lit