Vue.js Internationalisierung (i18n) mit vue-i18n und Intlayer

Inhaltsverzeichnis

Was ist Intlayer?

Intlayer ist eine innovative, Open-Source-Internationalisierungsbibliothek, die entwickelt wurde, um die Schwächen traditioneller i18n-Lösungen zu beheben. Sie bietet einen modernen Ansatz für das Content-Management in Vue.js- und Nuxt-Anwendungen.

Siehe einen konkreten Vergleich mit vue-i18n in unserem Blogbeitrag vue-i18n vs. Intlayer.

Warum Intlayer mit vue-i18n kombinieren?

Während Intlayer eine hervorragende eigenständige i18n-Lösung bietet (siehe unseren Vue.js-Integrationsleitfaden), möchten Sie es möglicherweise aus mehreren Gründen mit vue-i18n kombinieren:

1. Bestehender Codebestand: Sie haben eine etablierte vue-i18n-Implementierung und möchten schrittweise auf die verbesserte Entwicklererfahrung von Intlayer migrieren.
2. Legacy-Anforderungen: Ihr Projekt erfordert Kompatibilität mit bestehenden vue-i18n-Plugins oder Workflows.
3. Teamvertrautheit: Ihr Team ist mit vue-i18n vertraut, möchte jedoch ein besseres Content-Management.
4. Verwendung von Intlayer-Funktionen: Sie möchten Intlayer-Funktionen wie Content-Deklaration, Übersetzungsautomatisierung, Testen von Übersetzungen und mehr nutzen.

Dafür kann Intlayer als Adapter für vue-i18n implementiert werden, um Ihre JSON-Übersetzungen in CLI- oder CI/CD-Pipelines zu automatisieren, Ihre Übersetzungen zu testen und vieles mehr.

Diese Anleitung zeigt Ihnen, wie Sie das überlegene Content-Deklarationssystem von Intlayer nutzen können, während Sie die Kompatibilität mit vue-i18n beibehalten.

Schritt-für-Schritt-Anleitung zur Einrichtung von Intlayer mit vue-i18n

Schritt 1: Abhängigkeiten installieren

Installieren Sie die erforderlichen Pakete mit Ihrem bevorzugten Paketmanager:

npm install intlayer @intlayer/sync-json-plugin --save-devnpx intlayer init

Paket-Erklärungen:

• intlayer: Kernbibliothek für Content-Deklaration und -Verwaltung
• @intlayer/sync-json-plugin: Plugin zum Synchronisieren von Intlayer-Content-Deklarationen mit dem vue-i18n JSON-Format

Schritt 2: Implementieren Sie das Intlayer-Plugin, um das JSON zu umschließen

Erstellen Sie eine Intlayer-Konfigurationsdatei, um Ihre unterstützten Sprachen festzulegen:

Wenn Sie auch JSON-Wörterbücher für vue-i18n exportieren möchten, fügen Sie das syncJSON-Plugin hinzu:

import { Locales, type IntlayerConfig } from "intlayer";import { syncJSON } from "@intlayer/sync-json-plugin";const config: IntlayerConfig = {  internationalization: {    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],    defaultLocale: Locales.ENGLISH,  },  plugins: [    syncJSON({      format: "vue-i18n",      source: ({ key, locale }) => `./src/locales/${locale}/${key}.json`,    }),  ],};export default config;

Das syncJSON-Plugin umschließt das JSON automatisch. Es liest und schreibt die JSON-Dateien, ohne die Inhaltsarchitektur zu verändern.

Wenn Sie möchten, dass dieses JSON zusammen mit Intlayer-Content-Deklarationsdateien (.content-Dateien) koexistiert, geht Intlayer folgendermaßen vor:

1. Lädt sowohl JSON- als auch Content-Deklarationsdateien und transformiert sie in ein Intlayer-Wörterbuch.2. Wenn es Konflikte zwischen dem JSON und den Content-Deklarationsdateien gibt, führt Intlayer eine Zusammenführung aller Wörterbücher durch. Dies hängt von der Priorität der Plugins und der Content-Deklarationsdatei ab (alle sind konfigurierbar).

Wenn Änderungen über die CLI zur Übersetzung des JSON vorgenommen werden oder über das CMS, aktualisiert Intlayer die JSON-Datei mit den neuen Übersetzungen.

Um weitere Details zum syncJSON-Plugin zu sehen, lesen Sie bitte die syncJSON Plugin-Dokumentation.

(Optional) Schritt 3: Implementierung von komponentenbezogenen JSON-Übersetzungen

Standardmäßig lädt, kombiniert und synchronisiert Intlayer sowohl JSON- als auch Content-Deklarationsdateien. Weitere Informationen finden Sie in der Content-Deklarationsdokumentation. Wenn Sie jedoch möchten, können Sie mit einem Intlayer-Plugin auch eine komponentenbezogene Verwaltung von JSON implementieren, das überall in Ihrem Code lokalisiert ist.

Dafür können Sie das loadJSON-Plugin verwenden.

import { Locales, type IntlayerConfig } from "intlayer";import { loadJSON, syncJSON } from "@intlayer/sync-json-plugin";const config: IntlayerConfig = {  internationalization: {    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],    defaultLocale: Locales.ENGLISH,  },  // Halten Sie Ihre aktuellen JSON-Dateien mit den Intlayer-Wörterbüchern synchron  plugins: [    /**     * Lädt alle JSON-Dateien im src-Verzeichnis, die dem Muster {key}.i18n.json entsprechen     */    loadJSON({      source: ({ key }) => `./src/**/${key}.i18n.json`,      locale: Locales.ENGLISH,      priority: 1, // Stellt sicher, dass diese JSON-Dateien Vorrang vor Dateien in `./locales/en/${key}.json` haben    }),    /**     * Lädt und schreibt die Ausgabe und Übersetzungen zurück in die JSON-Dateien im locales-Verzeichnis     */    syncJSON({      format: "vue-i18n",      source: ({ key, locale }) => `./src/locales/${locale}/${key}.json`,      priority: 0,    }),  ],};export default config;

Dies lädt alle JSON-Dateien im src-Verzeichnis, die dem Muster {key}.i18n.json entsprechen, und lädt sie als Intlayer-Wörterbücher.

Git-Konfiguration

Schließen Sie generierte Dateien von der Versionskontrolle aus:

# Ignoriere von Intlayer generierte Dateien.intlayer

Diese Dateien werden während des Build-Prozesses automatisch neu generiert und müssen nicht in Ihr Repository übernommen werden.

VS Code Erweiterung

Für eine verbesserte Entwicklererfahrung installieren Sie die offizielle Intlayer VS Code Erweiterung:

Installation aus dem VS Code Marketplace