How do I translate a Vue.js website?

Either use Vue I18n (move text into message files per language and render it with $t or useI18n) or add a website translation script such as ConveyThis to index.html, which translates the rendered page without code changes.

What is the best i18n library for Vue?

Vue I18n is the standard choice for Vue 3. Use its Composition API (legacy: false), since the Legacy API is deprecated in v11.

Does ConveyThis work with Vue Router?

Yes. The script follows client-side route changes and watches for newly rendered content, so each new view is translated when users open it.

Is a client-side Vue app bad for multilingual SEO?

It's harder, because content isn't in the initial HTML. Use Nuxt or prerendering, separate URLs per language and hreflang tags for the best results.

Can I stop some parts of my Vue app from being translated?

With ConveyThis, add the conveythis-no-translate class to any element. With Vue I18n, don't pass that text through t().

So übersetzen Sie eine Vue.js-Website (Vue I18n oder No-Code)

Fassen Sie diesen Beitrag zusammen mit: 8 Minuten Lesezeit

Es gibt zwei Möglichkeiten, eine Vue.js-Website zu übersetzen. Der Entwicklerweg ist Vue I18n: Sie verschieben jeden Text in Übersetzungsdateien und verweisen darauf mit $t('key') oder useI18n(), und stellen Sie eine Datei pro Sprache bereit. Die No-Code-Route ist eine Website-Übersetzungsebene: Sie fügen Ihrem Skript ein Skript hinzu index.html, und es übersetzt die gerenderte Seite, einschließlich der Inhalte, die nach der Navigation angezeigt werden, ohne Ihre Komponenten zu ändern. Vue I18n ist sinnvoll, wenn Ihr Team den gesamten Text besitzt und ihn in der Codebasis haben möchte. Eine Übersetzungsebene ist schneller, wenn Sie die gesamte Site in vielen Sprachen benötigen, einschließlich Inhalten aus einem CMS oder einer API.

Wichtige Erkenntnisse

Vue I18n ist die Standard-Internationalisierungsbibliothek für Vue. Sie erstellen eine i18n Instanz mit createI18nRegistrieren Sie es mit app.use(i18n), und rendern Sie Text mit $t() in Vorlagen oder t() „ useI18n().
Seine Legacy-API ist in Vue I18n v11 veraltet und soll in v12 entfernt werden, daher sollten neue Projekte die Composition-API verwenden.
Sie müssen weiterhin übersetzte URLs verarbeiten, hreflang, <html lang>, und übersetzen Sie Text, der nicht in Ihrem Code enthalten ist (CMS-Inhalte, Produktdaten).
Eine Übersetzungsebene wie ConveyThis benötigt keine Codeänderungen: Fügen Sie das Skript hinzu, wählen Sie Sprachen aus und bearbeiten Sie Übersetzungen in einem visuellen Editor.
Bei beiden Methoden ist das reine Client-Rendering die Schwachstelle für SEO. Verwenden Sie Nuxt oder Prerendering, wenn der Suchverkehr in anderen Sprachen wichtig ist.

Option 1: Übersetzen Sie eine Vue-App mit Vue I18n

Vue I18n ist das vom Intlify-Team verwaltete Internationalisierungs-Plugin. Ein minimales Composition API-Setup umfasst vier Schritte.

1. Installieren

npm install vue-i18n

2. Erstellen Sie die i18n-Instanz mit Ihren Nachrichten

// src/i18n.js
import { createI18n } from 'vue-i18n';

const messages = {
  en: {
    nav: { home: 'Home', pricing: 'Pricing' },
    hero: { title: 'Translate your store in minutes' },
  },
  fr: {
    nav: { home: 'Accueil', pricing: 'Tarifs' },
    hero: { title: 'Traduisez votre boutique en quelques minutes' },
  },
};

export const i18n = createI18n({
  legacy: false, // use the Composition API
  locale: 'en', // active language
  fallbackLocale: 'en', // used when a key is missing
  messages,
});

3. Registrieren Sie es mit Ihrer App

// src/main.js
import { createApp } from 'vue';
import App from './App.vue';
import { i18n } from './i18n';

createApp(App).use(i18n).mount('#app');

4. Verwenden Sie es in Komponenten

<script setup>
import { useI18n } from 'vue-i18n';
const { t, locale } = useI18n();
</script>

<template>
  <h1>{{ t('hero.title') }}</h1>
  <select v-model="locale">
    <option value="en">English</option>
    <option value="fr">Français</option>
  </select>
</template>

Die Dokumentation von Vue I18n beschreibt die wichtigsten Optionen: locale Legt die aktive Sprache fest, fallbackLocale wird verwendet, wenn ein Übersetzungsschlüssel fehlt, und messages enthält die Übersetzungen pro Gebietsschema. Es wird auch darauf hingewiesen, dass die Legacy-API “veraltet ist Vue I18n v11, und Vue I18n v12 wird weggelassen”, also bevorzugen Sie legacy: false „ useI18n() im neuen Code.

Was Vue I18n nicht für Sie tut

Vue I18n übersetzt die Zeichenfolgen, die Sie ihm geben. Eine mehrsprachige Website braucht mehr als das:

Jemand muss jede Zeichenfolge in jeder Sprache schreiben und sie synchron halten, wenn sich die App ändert. Fehlende Tasten fallen ohne Vorwarnung auf Englisch zurück.
Blogbeiträge, Produktbeschreibungen und alles, was von einem CMS oder einer API abgerufen wird, befinden sich nicht in Ihren Nachrichtendateien. Dafür benötigen Sie einen separaten Lokalisierungsprozess.
Sprach-URLs liegen bei Ihnen. Fügen Sie das Gebietsschema zu Ihren Routen hinzu (/fr/pricing) mit Vue Router und behalten Sie den Router und locale synchron. Google empfiehlt eine separate URL pro Sprache, anstatt per Cookie oder Browsereinstellung zu wechseln (Google Search Central).
Das gilt auch für hreflang-Tags und <html lang>. Jede Sprachversion sollte sich selbst und alle anderen auflisten (Google Search Central). Aktualisieren document.documentElement.lang wenn sich das Gebietsschema ändert.
Für Preise und Daten verwenden Sie die Zahlen- und Datumsformatierung von Vue I18n (basierend auf der des Browsers Intl API), anstatt sie manuell zu formatieren.
Wenn Sie viele Sprachen unterstützen, laden Sie die Nachrichten jedes Gebietsschemas bei Bedarf, anstatt sie alle zu bündeln.

Praktische Tipps

Schlüssel semantisch halten (checkout.payButton), nicht satzbasiert, sodass Kopieränderungen keine Schlüssel beschädigen.
Verketten Sie keine Zeichenfolgen (t('hello') + name); Interpolation verwenden (t('hello', { name })) damit Übersetzer Wörter neu anordnen können.
Verwenden Sie Pluralisierungsfunktionen anstelle von if (count === 1); viele Sprachen haben mehr als zwei Pluralformen.
Lassen Sie im Layout Platz für längeren Text; Deutsch und Französisch sind oft länger als Englisch.
Testen Sie Sprachen von rechts nach links frühzeitig, wenn Sie Arabisch oder Hebräisch benötigen.

Option 2: Übersetzen Sie eine Vue-Site ohne Code mit ConveyThis

Wenn Sie nicht jede Zeichenfolge in Dateien verschieben möchten oder ein Großteil Ihres Inhalts von einem CMS oder einer API stammt, gelangen Sie mit einer Übersetzungsebene schneller dorthin. ConveyThis übersetzt, was Ihre Vue-App im Browser rendert.

Die Einrichtung dauert etwa 10 Minuten:

Erstellen Sie ein ConveyThis-Konto und fügen Sie Ihre Domain hinzu.
Wählen Sie Ihre Ausgangssprache und Zielsprachen (210 werden unterstützt).
Kopieren Sie den JavaScript-Ausschnitt aus Ihrem Dashboard (siehe JavaScript Integrationsleitfaden).
Fügen Sie es vor dem Schließen in den HTML-Einstiegspunkt Ihrer App ein </head> oder </body> Etikett. In einem Vite-Projekt ist das so index.html am Projektstamm; in einem Vue CLI-Projekt ist es public/index.html.
Einsetzen. Es erscheint ein Sprachumschalter und Ihr Inhalt wird automatisch übersetzt.

Bei einer einseitigen App überwacht das Skript ConveyThis die Seite auf Inhalte, die nach dem Laden hinzugefügt oder geändert werden, und folgt clientseitigen Routenänderungen (Verlaufs-API-Navigation und Hash-Änderungen). Wenn Vue Router zu einer neuen Ansicht wechselt oder eine Komponente neuen Text rendert, wird dieser Text aufgegriffen und übersetzt. Sie müssen nichts von Ihren Komponenten aus aufrufen.

Sie behalten die Kontrolle über die Ausgabe:

Bearbeiten Sie jede Übersetzung im Kontext mit dem visuellen Editor.
Legen Sie Glossarregeln für Produktnamen und -begriffe fest (bezahlte Pläne) und verwenden Sie genehmigte Übersetzungen mit dem Übersetzungsspeicher wieder.
Schließen Sie Elemente aus, die nicht übersetzt werden dürfen, indem Sie die hinzufügen conveythis-no-translate Klasse (So schließen Sie Segmente aus), zum Beispiel Benutzernamen oder Codeausschnitte.
Laden Sie Gutachter mit Teamrollen ein.

SEO für Vue-Sites

Eine rein clientgerenderte Vue-App liefert eine fast leere HTML-Shell aus und erstellt die Seite im Browser. Welche Methode Sie auch wählen, das schadet der mehrsprachigen SEO, da der übersetzte Inhalt nicht im ursprünglichen HTML enthalten ist. Wenn der Suchverkehr in anderen Sprachen wichtig ist:

Verwenden Sie Nuxt (serverseitiges Rendering oder statische Generierung) oder einen Prerendering-Schritt, damit der Inhalt jeder Seite in HTML vorhanden ist.
Geben Sie jeder Sprache eine eigene URL. ConveyThis unterstützt Unterordner, Subdomains oder a ?lang Parameter, fügt automatisch hreflang-Tags hinzu und übersetzt Seitentitel, Metabeschreibungen und JSON-LD. Sehen mehrsprachige SEO für die Funktionsweise der URL-Modi.
Überprüfen Sie übersetzte Seiten mit der URL-Inspektion der Google Search Console, um zu sehen, was Google tatsächlich rendert.

Vue I18n vs. eine Translationsschicht

	Vue I18n	ConveyThis
Codeänderungen	Jede Zeichenfolge wurde in Nachrichtendateien verschoben	Ein Skript-Tag
Wer übersetzt	Ihr Team oder Ihre Übersetzer, in Dateien	Erster Entwurf der maschinellen Übersetzung, bearbeitet in einem visuellen Editor
CMS-/API-Inhalte	Benötigt einen separaten Prozess	Übersetzt mit der Seite
Neue Inhalte	Muss zu jeder Gebietsschemadatei hinzugefügt werden	Automatisch erkannt und übersetzt
Sprach-URLs und hreflang	Du baust sie	Eingebaut
Am besten für	Produkt-UI im Besitz von Entwicklern, wenige Sprachen	Marketing-Sites und Apps mit vielen Inhalten, vielen Sprachen

Viele Teams kombinieren sie: Vue I18n für die Kernanwendungs-Benutzeroberfläche, bei der Entwickler die volle Kontrolle wünschen, und eine Übersetzungsebene für Marketingseiten, Dokumente und Inhalte von einem CMS.

Die Konzepte dahinter finden Sie in unserem Leitfaden zur Internationalisierung (i18n). Wenn Sie auch React verwenden, siehe So übersetzen Sie eine React-Website.

Häufig gestellte Fragen

Wie übersetze ich eine Vue.js-Website?

Verwenden Sie entweder Vue I18n (verschieben Sie Text in Nachrichtendateien pro Sprache und rendern Sie ihn mit $t oder useI18n) oder fügen Sie ein Website-Übersetzungsskript wie ConveyThis hinzu index.html, wodurch die gerenderte Seite ohne Codeänderungen übersetzt wird.

Was ist die beste i18n-Bibliothek für Vue?

Vue I18n ist die Standardwahl für Vue 3. Verwenden Sie die Composition API (legacy: false), da die Legacy-API in Version 11 veraltet ist.

Funktioniert ConveyThis mit Vue Router?

Ja. Das Skript folgt clientseitigen Routenänderungen und achtet auf neu gerenderte Inhalte, sodass jede neue Ansicht übersetzt wird, wenn Benutzer sie öffnen.

Ist eine clientseitige Vue-App schlecht für mehrsprachige SEO?

Es ist schwieriger, weil der Inhalt nicht im ursprünglichen HTML enthalten ist. Verwenden Sie Nuxt oder Prerendering, separate URLs pro Sprache und hreflang-Tags für die besten Ergebnisse.

Kann ich verhindern, dass einige Teile meiner Vue-App übersetzt werden?

Fügen Sie mit ConveyThis die hinzu conveythis-no-translate Klasse zu jedem Element. Mit Vue I18n, geben Sie diesen Text nicht durch t().

Um die No-Code-Route auf Ihrer Vue-Site auszuprobieren, Erstellen Sie ein ConveyThis-Konto und fügen Sie den Ausschnitt ein in index.html.