Vue i18n Blöcke - Lingo.dev CLI

Was sind Vue i18n Blöcke?

Vue i18n Blöcke sind spezielle <i18n>-Abschnitte in Vue Single File Components (SFCs), die JSON-formatierte Übersetzungen enthalten. Sie ermöglichen es, Übersetzungen zusammen mit Ihrem Komponenten-Code zu verwalten.

Zum Beispiel:

<template>
  <div class="container">
    <h1>{{ $t('welcome') }}</h1>
    <button @click="handleClick">{{ $t('button.submit') }}</button>
  </div>
</template>

<i18n>
{
  "en": {
    "welcome": "Hello, world!",
    "description": "A simple demo app",
    "button": {
      "submit": "Submit",
      "cancel": "Cancel"
    }
  }
}
</i18n>

Was ist Lingo.dev CLI?

Lingo.dev CLI ist eine kostenlose, Open-Source-CLI zum Übersetzen von Apps und Inhalten mit KI. Sie wurde entwickelt, um herkömmliche Translation-Management-Software zu ersetzen und sich gleichzeitig in bestehende Pipelines zu integrieren.

Um mehr zu erfahren, siehe Überblick.

Über diesen Leitfaden

Dieser Leitfaden erklärt, wie man Vue i18n Blöcke mit Lingo.dev CLI übersetzt.

Sie werden lernen, wie man:

Ein Projekt von Grund auf erstellt
Eine Übersetzungspipeline konfiguriert
Übersetzungen mit KI generiert

Voraussetzungen

Um Lingo.dev CLI zu verwenden, stellen Sie sicher, dass Node.js v18+ installiert ist:

❯ node -v
v22.17.0

Schritt 1. Projekt einrichten

Erstellen Sie in Ihrem Projektverzeichnis eine i18n.json-Datei:

{
  "$schema": "https://lingo.dev/schema/i18n.json",
  "version": "1.10",
  "locale": {
    "source": "en",
    "targets": ["es"]
  },
  "buckets": {}
}

Diese Datei definiert das Verhalten der Übersetzungspipeline, einschließlich der zu übersetzenden Sprachen und wo sich die lokalisierbaren Inhalte im Dateisystem befinden.

Um mehr über die verfügbaren Eigenschaften zu erfahren, siehe i18n.json.

Schritt 2. Quell-Locale konfigurieren

Die Quell-Locale ist die ursprüngliche Sprache und Region, in der Ihr Inhalt verfasst wurde. Um die Quell-Locale zu konfigurieren, setzen Sie die Eigenschaft locale.source in der i18n.json-Datei:

{
  "$schema": "https://lingo.dev/schema/i18n.json",
  "version": "1.10",
  "locale": {
    "source": "en",
    "targets": ["es"]
  },
  "buckets": {}
}

Die Quell-Locale muss als BCP 47 Sprach-Tag angegeben werden.

Für die vollständige Liste der Locale-Codes, die Lingo.dev CLI unterstützt, siehe Unterstützte Locale-Codes.

Schritt 3. Konfigurieren der Zielsprachen

Die Zielsprachen sind die Sprachen und Regionen, in die Sie Ihre Inhalte übersetzen möchten. Um die Zielsprachen zu konfigurieren, setzen Sie die locale.targets-Eigenschaft in der i18n.json-Datei:

{
  "$schema": "https://lingo.dev/schema/i18n.json",
  "version": "1.10",
  "locale": {
    "source": "en",
    "targets": ["es"]
  },
  "buckets": {}
}

Schritt 4. Erstellen des Quellinhalts

Falls Sie es noch nicht getan haben, erstellen Sie eine Vue-Komponentendatei mit einem <i18n>-Block, der den zu übersetzenden Inhalt enthält.

Hinweis: Während des Übersetzungsprozesses werden die Quellinhalts-Dateien überschrieben, um die übersetzten Inhalte (zusätzlich zu den Quellinhalten) einzuschließen.

Schritt 5. Erstellen eines Buckets

Fügen Sie in der i18n.json-Datei ein "vue-json"-Objekt zum buckets-Objekt hinzu:

{
  "$schema": "https://lingo.dev/schema/i18n.json",
  "version": "1.10",
  "locale": {
    "source": "en",
    "targets": ["es"]
  },
  "buckets": {
    "vue-json": {}
  }
}

Definieren Sie im "vue-json"-Objekt ein Array mit einem oder mehreren include-Mustern:
```
{
  "$schema": "https://lingo.dev/schema/i18n.json",
  "version": "1.10",
  "locale": {
    "source": "en",
    "targets": ["es"]
  },
  "buckets": {
    "vue-json": {
      "include": ["./example.vue"]
    }
  }
}
```
Diese Muster definieren, welche Dateien übersetzt werden sollen und können entweder:
- auf bestimmte Dateipfade verweisen (z.B. "some/dir/file.vue")
- Sternchen als Platzhalter verwenden (z.B. "some/dir/*.vue")
Rekursive Glob-Muster (z.B. **/*.vue) werden nicht unterstützt.

Schritt 6. Konfigurieren eines LLM

Lingo.dev CLI verwendet große Sprachmodelle (LLMs), um Inhalte mit KI zu übersetzen. Um eines dieser Modelle zu nutzen, benötigen Sie einen API-Schlüssel von einem unterstützten Anbieter.

Um so schnell wie möglich loszulegen, empfehlen wir die Verwendung von Lingo.dev Engine — unserer eigenen, gehosteten Plattform, die 10.000 Token kostenlose monatliche Nutzung bietet:

Registrieren Sie sich für ein Lingo.dev-Konto.
Führen Sie den folgenden Befehl aus:
```
npx lingo.dev@latest login
```
Dies öffnet Ihren Standard-Browser und fordert Sie zur Authentifizierung auf.
Folgen Sie den Anweisungen.

Schritt 7. Generieren der Übersetzungen

Führen Sie im Verzeichnis, das die Datei i18n.json enthält, den folgenden Befehl aus:

npx lingo.dev@latest run

Dieser Befehl:

Liest die i18n.json Datei.
Findet die Dateien, die übersetzt werden müssen.
Extrahiert den übersetzbaren Inhalt aus den Dateien.
Verwendet das konfigurierte LLM, um den extrahierten Inhalt zu übersetzen.
Schreibt den übersetzten Inhalt zurück in das Dateisystem.

Bei der ersten Generierung von Übersetzungen wird eine i18n.lock Datei erstellt. Diese Datei verfolgt, welche Inhalte bereits übersetzt wurden, und verhindert unnötige Neuübersetzungen bei nachfolgenden Ausführungen.

Beispiel

example.vue (vor der Übersetzung)

<i18n>
{
  "en": {
    "welcome": "Hello, world!",
    "description": "A simple demo app",
    "button": {
      "submit": "Submit",
      "cancel": "Cancel"
    }
  }
}
</i18n>

example.vue (nach der Übersetzung)

<i18n>
{
  "en": {
    "welcome": "Hello, world!",
    "description": "A simple demo app",
    "button": {
      "submit": "Submit",
      "cancel": "Cancel"
    }
  },
  "es": {
    "welcome": "¡Hola, mundo!",
    "description": "Una aplicación de demostración simple",
    "button": {
      "submit": "Enviar",
      "cancel": "Cancelar"
    }
  }
}
</i18n>

i18n.json

{
  "version": "1.10",
  "locale": {
    "source": "en",
    "targets": ["es"]
  },
  "buckets": {
    "vue-json": {
      "include": ["./example.vue"]
    }
  },
  "$schema": "https://lingo.dev/schema/i18n.json"
}

i18n.lock

version: 1
checksums:
  7142a39dd2be0c1e12089c922ab4fdb5:
    welcome: 1308168cca4fa5d8d7a0cf24e55e93fc
    description: 36349ca88e416a6f2d6ac8742f0a963c
    button/submit: dabdff794b5804b8f22ecab13f37fb7d
    button/cancel: efdc4af6863f1e503a7f9961be721eed
    messages/0: f77d23a0a4b7f8fc7f8fd458921b90dd
    messages/1: e841c4139402ded42079401299e4fa1e
  0378a0d09447bf0944e842f7e54d3ec2:
    welcome: 0468579ef2fbc83c9d520c2f2f1c5059
    description: 49f8864eb0e53903f04532bf33e1e4fa
    button/submit: 7c91ef5f747eea9f77a9c4f23e19fb2e
    button/cancel: 2e2a849c2223911717de8caa2c71bade
    messages/0: 97a8db12c3955a85c4f50e3951c91a40
    messages/1: 986a434e3895c8ee0b267df95cc40051