Es liegen eine handvoll Pakete in der Welt, die uns helfen in Vue andere Sprachen zu unterstützen.

Zum Beispiel: vue-i18n. Die Docs sind der Hammer, also falls du etwas Tiefergehendes brauchst bediene dich am besten dort.

Einführung vue-i18n

Zuerst sollten wir wissen wie wir vue-i18n Übersetzungen mitteilen.

Und zwar lässt und das Package einfach ein JSON übergeben. Die Anforderung an das JSON Object simple:

{
    "en_US": {
        "Hello world": "Hello world",
    },
    "de_DE": {
        "Hello world": "Hallo Welt",
    },
}

Damit erklären wir Vue das wir einen Text „Hello world“ in Englisch ins Deutsche übersetzen können.

Sobald wir nun einen Text auch übersetzen möchten, kommt die Funktion $t(...) ins Spiel.

So einfach kann es sein.

Nun da wir wissen wie wir Übersetzungen mitteilen können wir anfangen Dinge zu machen.

Dafür:

• Installiere das Package:

npm i -D vue-i18n

• Erstelle eine Konfiguration für vue-i18n. Es bietet sich der Name vue-i18n.js an.
• Paste folgendes Snippet:

import Vue from 'vue';
import VueI18n from 'vue-i18n';

Vue.use(VueI18n);

export const i18n = new VueI18n({
    locale: 'en_US',
    messages: {
        "en_US": {
            "Hello world": "Hello world",
        },
        "de_DE": {
            "Hello world": "Hallo Welt",
        },
    },
});

• Importiere i18n in dein Bootstrap wie z. B.:

import {
    i18n
} from './vue-i18n';

new Vue({
    el: '#applicationContainer',
    i18n,
});

Nun haben wir Vue mitgeteilt in was „Hello world“ vom Englischen ins Deutsche übersetzt wird.

Sprachen können einfach via $i18n.locale angepasst werden:

{
    methods: {
        changeLocale(locale) {
            // please validate stuff before doing anything :O

            this.$i18n.locale = locale;
        }
    }
}

Kudos

• Big thanks to kazupoon for publishing and maintaining that package.