Türchen 18: VueJS – Eigenes Translation-Plugin

Es gibt viele Möglichkeiten und vor allem Plugins um Texte in VueJS zu übersetzen. Keines davon hat so funktionert, wie wir es uns gewünscht haben. Also haben wir genau das gemacht, was Entwickler eben machen. Sie schreiben sich selbst ein Plugin. In diesem Türchen geben wir euch einen Überblick, wie das Plugin funktioniert und wie ihr es bei euch, in eurer Anwendung verwenden könnt.

Vue-Plugin einbinden & Grundstruktur

Als ersten Schritt binden wir das, momentan noch leere, Vue-Plugin in der main.js Datei unserer Anwendung ein.

import Vue from "vue";
import cxTranslate from "plugin/cx-translate";

Vue.use(cxTranslate, {locale: 'de_DE'});

let vm = new Vue({ ... }).$mount("#app");

Als nächstes erstellen wir die Grundstruktur des Translate-Plugins, welches wir im vorherigen Schritt eingebunden haben. Dabei gibt es drei Platzhalter, die wir im weiteren Verlauf füllen werden. Das Plugin an sich lädt Sprachdateien und stellt die Funktion „$cxTranslate“ zur Verfügung.

// Grundkonstrukt des Translate-Plugins
// in der plugin/cx-translate.js

// Alle notwendigen Locales importieren
import deDE from 'app/locale/de_DE.json';

export default {
  install: (Vue, options) => {

    // <-- SPRACHE WÄHLEN -->
    // <-- DATEN VORBEREITEN -->

    Vue.mixin({
      methods: {
        $cxTranslate: (text, params = {}) => {
          // <-- ÜBERSETZUNGS LOGIK -->
        }
      }
    });
  }
}

Aufbau der Übersetzungsdateien

Bevor wir die Platzhalter in dem Plugin mit Logik füllen, gehen wir hier einmal kurz auf den Aufbau der Übersetzungsdateien ein. Diese befindet sich z.B. in „app/locale/de_DE.json“ für die deutsche Sprache und besteht aus einem einfachen JSON-Objekt. Der Key ist immer der originale, englische Text und der Wert die Übersetzung. In diesem Fall die Deutsche. Zusätzlich können wir hier auch mit Variablen arbeiten, die später in der Übersetzungsfunktion mit gereicht werden können.

{
  "Access": "Zugriff",
  "Are you sure?": "Bist du dir sicher?",
  "Edit ${fullname}": "Editiere ${fullname}"
}

Platzhalter im Plugin füllen

Der Platzhalter für das Sprache wählen & Daten vorbereiten wird mit folgendem Code gefüllt. Hier laden wir alle Übersetzungsdateien und nehmen uns die, dessen Sprache in der Anwendung aktuell gesetzt ist.

// Sprache wählen & Daten vorbereiten
// Das hier füllt die gleichnamigen Bereiche
// in dem cx-translate.js Plugin

// Importierte Locales hier eintragen
let locales = {"de_DE": deDE};
let translations = {};

Object.keys(locales).forEach(key => {
  if (key === options.locale) {
    translations = locales[key];
  }
});

In folgenden Code-Teil findet ihr die Hauptlogik des Translation-Plugins. Hier werden nicht nur die richtigen Übersetzungen rausgesucht und ausgegeben, sondern auch etwaige Variablen gefüllt.

// Übersetzungs-Logik
// Das hier füllt den gleichnamigen Bereich
// in dem cx-translate.js Plugin

// text = 1. Parameter von $cxTranslate()
let translation = translations[text];

// params = 2. Parameter aus $cxTranslate()
// Keine Parameter = normale Übersetzung
if (params.length === 0) {
  return translation;
}

// Locale wurde nicht gefunden
if (typeof translation === 'undefined') {
  translation = text;
}

// Aufschlüsseln von Übersetzung-Parametern
for (let paramKey in params) {
  if (params.hasOwnProperty(paramKey)) {
    let param = params[paramKey];

    let replaceString = "${" + paramKey + "}";
    translation = translation.replace(
                    replaceString,
                    param
                  );
  }
}

return translation;

Anwendungsbeispiele

Hier noch einmal mehrere Anwendungsbeispiele irgendwo in der Vue-Anwendung. Dabei gibt es folgende Möglichkeiten die Übersetzungsfunktion aufzurufen: Template ohne Parameter, Template mit Parameter, in Javascript ohne und mit Parameter.

<div class="translation-example">
  <!-- Template ohne Parameter -->
  <p>{{ $cxTranslate('Are you sure?') }}</p>

  <!-- Template mit Parameter -->
  <p>
    {{
      $cxTranslate(
        'Edit ${fullname}',
        {'fullname': 'Christian'}
      )
    }}
  </p>
</div>

<!-- in Javascript mit Parameter -->
<script>
  let text = this.$cxTranslate(
    'Edit ${fullname}',
    {'fullname': 'Christian'}
  );
</script>

Das wars schon! So einfach ist unser Translation-Plugin aufgebaut. Was haltet ihr von dieser Herangehensweise? Würdet ihr das genauso machen?