Vue i18n – So erstellst Du mehrsprachige Vue.js Anwendungen!

Vue i18n – So erstellst Du mehrsprachige Vue.js Anwendungen!

Deine Website ist bereit für Deine Besucher, aber nur in einer Sprache verfügbar? Kein Problem! Ich erkläre hier Schritt für Schritt, wie Du Deine Vue Seite mithilfe von Vue i18n mit Übersetzungen für beliebig viele Sprachen ausstatten kannst.

Node.js + Vue CLI installieren

In diesem Beitrag geht es primär um die Einbindung mehrerer Sprachen für Deine Vue.js Anwendung. Deshalb setze ich vorraus, dass Du Node.js und die Vue CLI bereits installiert hast. Noch nicht? Dann findest Du hier 3 geniale Beispiele um Vue.js zu lernen.

Oder Du liest diesen Guide direkt von Vue.js: https://cli.vuejs.org/guide/installation.html

1. Vue Projekt erstellen und vue-i18n installieren

Zu Beginn erstellen wir über diesen Befehl ein neues Vue.js Projekt:

vue create vue-multilang

Anschließend werden wir nach einem Preset gefragt. Hierbei handelt es sich um Voreinstellungen und Module die direkt mitinstalliert werden sollen.

vue create Preset

Es ist sinnvoll, sich ein eigenes Preset zu erstellen, die man für weitere Projekte nutzen kann. Meins wird ganz oben angezeigt und heißt „lh-standard“. Wir wählen aber in diesem Fall „Manually select features“ aus und machen manuell weiter.

vue create Modules

Hier ist wichtig, dass wir das Router Modul mit Leertaste auswählen. Die anderen Optionen sind geschmackssache, aber für die Übersetzungen nicht unbedingt notwendig.

Nach erfolgreicher Installation navigieren wir in den erstellten Ordner.

cd vue-multilang

Zusätzlich installieren wir nun das Modul „vue-i18n“, welches wir unbedingt benötigen. Diese Erweiterung kümmert sich um die Übersetzungen.

npm install vue-i18n

Danach sollte der erstellte Ordner so (oder ähnlich) aussehen:

Vue CLI Folder Structure

Und ab geht’s: Wir können unsere Vue.js Anwendung zum ersten Mal starten.

npm run serve

Wenn wir nun im Browser http://localhost:8080/ öffnen sollte diese Standard Vue Website erscheinen. Hurra!

Vue.js - Erster Start

2. vue-i18n einbinden und Sprachdateien laden

Im nächsten Schritt müssen wir unsere Vue.js Anwendung sagen: Hey, wir wollen gerne eine mehrspachige Seite haben, nutze dazu doch bitte das Modul vue-i18n.

Hier sieht Du nun die main.js Datei Deiner App. Die markierten Zeilen müssen wir zum Einbinden von vue-i18n hinzufügen. Die Variablen locale und fallbackLocale kannst Du auf den Sprachcode Deiner Standardsprache setzen.

// src/main.js

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import VueI18n from 'vue-i18n';
import messages from './lang';

Vue.config.productionTip = false;

Vue.use(VueI18n);
export const i18n = new VueI18n({
	locale: 'de',
	fallbackLocale: 'de',
	messages
});

new Vue({
  router,
  store,
  i18n,
  render: h => h(App)
}).$mount("#app");

In der Variable messages sollen unsere Übersetzungen drin stehen. Dazu müssen wir das Verzeichnis lang anlegen. Die Struktur sollte wie folgt aussehen.

"lang" Ordnerstruktur

In der index.js importieren wir alle Sprachdateien, in der unsere Seite vorliegen soll.

// src/lang/index.js

import de from './translations/de';
import en from './translations/en';

export default {
	de,
	en
};

Die JSON Dateien im Unterordner translations beinhalten die Übersetzungen für die jeweilige Sprache.

// src/lang/translations/de.json

{
	"translation1": "Übersetzung 1",
	"translation2": "Übersetzung 2"
}

3. Router konfigurieren

Mit der bisherigen Konfiguration könnten wir nun schon unsere übersetzten Texte ausgeben. Allerdings können und sollten wir in den Link jeder Seite den Sprachkürzel einbauen. Gerade für Suchmaschinen ist das ein wichtiger Punkt. Unsere URLs sollen so aussehen: https://example.com/de/home

Damit wir unsere Seite nun auch in verschiedenen Sprachen aufrufen können, müssen wir bei jeder Route den Sprachcode übergeben und die Entsprechenden Übersetzungen laden.

Dazu habe ich die Default router.js ein wenig angepasst. Wir übergeben als ersten Parameter eine Variable lang. Diese Variable bildet unseren Sprachcode. Alle anderen Seiten sind Kinder dieser Route. Im Event beforeEnter setzen wir die Standardsprache, falls kein Sprachcode übergeben wurde.

// src/router.js

import Vue from "vue";
import Router from "vue-router";
import Home from "./views/Home.vue";
import RouterView from "./views/RouterView.vue";

import { i18n } from "./main.js";

Vue.use(Router);

export default new Router({
  mode: "history",
  base: process.env.BASE_URL,
  routes: [
    {
      path: "/:lang",
      component: RouterView,
      beforeEnter(to, from, next) {
        const lang = to.params.lang;
        if (!["en", "de"].includes(lang)) return next("de");

        if (i18n.locale !== lang) {
          i18n.locale = lang;
        }
        return next();
      },
      children: [
        {
          path: "home",
          name: "home",
          component: Home
        },
        {
          path: "about",
          name: "about",
          // route level code-splitting
          // this generates a separate chunk (about.[hash].js) for this route
          // which is lazy-loaded when the route is visited.
          component: () =>
            import(/* webpackChunkName: "about" */ "./views/About.vue")
        }
      ]
    },
    {
      path: "*",
      redirect: "/de"
    }
  ]
});

Den Code für die beforeEnter Funktion habe ich aus diesem Beitrag.

Damit unsere Unterseiten funktionieren binden wir den View RouterView.vue ein. Dieses Template enthält als Template nur einen leeren router-view.

// src/components/RouterView.vue

<template>
	<router-view></router-view>
</template>

4. Übersetzungen ausgeben

Jetzt können wir unsere Seiten aufrufen. Aber anstatt https://example.com/home rufen wir https://example.com/de/home auf.

Wir bekommen die Seite ganz normal angezeigt.

Nun das wichtigste: Die Ausgabe der Texte. Dazu können wir ganz einfach diese Syntax benutzen:

<p>{{ $t('translation1') }}</p>

Der String in den Klammern ist der Key aus der JSON Übersetzungsdatei. Und das ist schon alles.

Menü

Unsere Menülinks müssen wir auch ein wenig anpassen. Vorher sahen sie so aus:

<router-link to="/home">Home</router-link> |
<router-link to="/about">About</router-link>

So können wir den aktuellen Sprachcode integrieren (Beachte die Doppelpunkte vor dem to):

<router-link :to="'/' + $i18n.locale + '/home'">Home</router-link> |
<router-link :to="'/' + $i18n.locale + '/about'">About</router-link>

5. Sprache ändern

Im Code haben können wir die Sprache auch manuell ändern. Wir geben einfach den neuen Sprachcode ein. Mit der Variable this.$i18n haben wir auch Zugriff auf die aktuelle Sprache. Diese ist global in deiner Vue.js App verfügbar.

this.$i18n.locale = 'en';

6. Sprachumschaltung einbauen

Wir wollen unserem Besucher nun auch die Möglichkeit geben zwischen den vorhandenen Sprachen zu wählen. Dazu hier beispielhaft der Code für eine Sprachumschaltung. Die vorhanden Sprachen werden hierbei einfach aufgelistet und beim Klick als aktuelle Sprache gesetzt.

// src/components/LanguageSwitcher.vue

<template>
	<div class="locale-changer">
		<select v-model="$i18n.locale">
			<option
				v-for="(lang, i) in langs"
				:key="`Lang${i}`"
				:value="lang"
				>{{ lang }}</option
			>
		</select>
	</div>
</template>

<script>
export default {
	name: 'LanguageSwitcher',
	data() {
		return { langs: ['de', 'en'] };
	}
};
</script>

7. 301 Redirects für alte Seiten erstellen

Wenn Deine Seite bereits live ist und Du nachträglich Mehrsprachigkeit einbaust, ist es wichtig, alte Seiten mit einem 301 Redirect zu versehen, um Suchmaschinen nicht zu verärgern. Dazu kannst Du einfach Routen in dieser Art deinem Router hinzufügen.

{
  path: '/foobar',
  redirect: '/de/foobar'
}

Das wär’s! Das wichtigste zu mehrsprachigen Seiten in Vue.js weißt Du nun. Danke für’s Lesen und bis zum nächsten Mal! 🙂

Beteilige dich an der Unterhaltung

1 Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.