Lingo.dev + Vue.js Single-File Components

Die Lingo.dev CLI unterstützt Vue I18n Single-File Components und ermöglicht es Ihnen, Übersetzungen direkt in Ihren .vueDateien zu verwalten.

Hinweis: Wenn Ihre Vue.js-Anwendung JSON-Locale-Dateien verwendet, nutzen Sie das .json-Format für das Frontend.

Schnelleinrichtung

Erstellen Sie eine i18n.jsonKonfigurationsdatei im Stammverzeichnis Ihres Projekts:

{
  "version": "1.10",
  "locale": {
    "source": "en",
    "targets": ["es", "fr", "de"]
  },
  "buckets": {
    "vue-json": {
      "include": ["src/components/*.vue", "src/views/*.vue"]
    }
  }
}

Diese Konfiguration legt Englisch als Ausgangssprache fest, zielt auf Spanisch, Französisch und Deutsch ab und verarbeitet .vueDateien in den Verzeichnissen src/components und src/views.

Unterstützte Sprachen finden

Listen Sie verfügbare Ausgangs- und Zielsprachen auf:

npx lingo.dev@latest show locale sources
npx lingo.dev@latest show locale targets

Alles übersetzen

Führen Sie den folgenden Befehl aus, um alle Vue-Komponenten zu übersetzen:

npx lingo.dev@latest run

Die CLI durchsucht Ihre Komponenten nach <i18n>Blöcken, übersetzt neue oder geänderte Inhalte und aktualisiert die Übersetzungen direkt.

Funktionsweise mit Vue-Komponenten

Lingo.dev arbeitet direkt mit der standardmäßigen i18n-Struktur von Vue:

<template>
  <div>
    <h1>{{ $t("welcome") }}</h1>
    <p>{{ $t("description") }}</p>
  </div>
</template>

<i18n>
{
  "en": {
    "welcome": "Welcome",
    "description": "This is a Vue component"
  }
}
</i18n>

Nach der Übersetzung enthält Ihre Komponente alle Zielsprachen:

<i18n>
{
  "en": {
    "welcome": "Welcome",
    "description": "This is a Vue component"
  },
  "es": {
    "welcome": "Bienvenido",
    "description": "Este es un componente Vue"
  },
  "fr": {
    "welcome": "Bienvenue",
    "description": "Ceci est un composant Vue"
  }
}
</i18n>

Erweiterte Konfiguration

Dateien ausschließen

Schließen Sie bestimmte Komponenten von der Übersetzung aus:

"vue-json": {
  "include": ["src/components/*.vue", "src/views/*.vue"],
  "exclude": ["src/components/NoTranslate.vue"]
}

Hybride Übersetzung

Kombinieren Sie komponentenbasierte und dateibasierte Übersetzungen:

"buckets": {
  "vue-json": {
    "include": ["src/components/*.vue", "src/views/*.vue"]
  },
  "json": {
    "include": ["src/locales/[locale].json"]
  }
}

Dieses Setup bewahrt komponentenspezifische Übersetzungen innerhalb der Komponenten auf und speichert globale Übersetzungen in separaten JSON-Dateien.

Warum dieser Ansatz

  • Hält Übersetzungen bei den Komponenten, die sie verwenden
  • Keine Notwendigkeit, Strings in separate Dateien zu extrahieren
  • KI versteht Komponentenkontext für bessere Übersetzungen
  • Übersetzt nur das, was sich geändert hat
  • Funktioniert mit den empfohlenen Mustern von Vue I18n

Lingo.dev bietet KI-gesteuerte Übersetzungen unter Beibehaltung der komponentenbasierten Architektur von Vue.