Teil 2 - Konfiguration von nuxt/i18n

Einführung

In dieser Serie werde ich eine Nuxt-Webanwendung mit einer Startseite und einem einfachen Design mithilfe von TailwindCSS einrichten und einen Blog-Bereich mit nuxt/content hinzufügen. Im nächsten Schritt konfiguriere ich nuxt/i18n, damit du verschiedene Sprachen zu deiner Webanwendung hinzufügen kannst.

Dieser Teil der Serie basiert auf Teil 1 und konzentriert sich darauf, die im vorherigen Teil eingebundenen Pakete richtig zu konfigurieren. Führst du jetzt erneut npm run dev, bekommst du folgende Warnung:

> dev
> nuxt dev

Nuxt 3.11.2 with Nitro 2.9.6
  ➜ Local:    http://localhost:3000/
  ➜ Network:  use --host to expose

ℹ Using default Tailwind CSS file
  ➜ DevTools: press Shift + Option + D in the browser (v1.3.3)

ℹ Tailwind Viewer: http://localhost:3000/_tailwind/
ℹ Re-optimizing dependencies because lockfile has changed

WARN
[21:48:31]  WARN  warn - No utility classes were
            detected in your source files. If
            this is unexpected, double-check the
            content option in your Tailwind CSS
            configuration.

 WARN warn - https://tailwindcss.com/docs/content-configuration

ℹ Vite server warmed up in 976ms
✔ Nuxt Nitro server built in 855 ms
ℹ Vite client warmed up in 1684ms

Im folgenden werden wir sowohl TailwindCSS als auch i18n richtig konfigurieren.

Anleitung

Voraussetzungen

Du hast die Pakete TailwindCSS, nuxt/i18n und NuxtContentv2 in dein Projekt eingebunden. Falls nicht, findest du hier die Beschreibung (Teil 1) oder nutze als Grundlage den Code von Github.

Schritt 1: Anpassung der Projektstruktur

In Nuxt ist die app.vue Datei der Standard-Einstiegspunkt. Daher müssen wir hier Anpassung vornehmen, um unsere später im pages/ Ordner angelegten Seiten einzubinden. Direkt nach dem Erstellen des Projektes sieht die Datei folgendermaßen aus:

<template>
  <div>
    <NuxtWelcome />
  </div>
</template>

Dies muss geändert werden zu:

<template>
  <NuxtPage />
</template>

Weitere Informationen dazu findest du in der offiziellen Dokumentation zu Pages und zu File-System Routing

Schritt 1.1:

Damit Nuxt auch eine Seite laden kann, musst du noch eine Datei im Ordner pages erstellen. Falls der Ordner noch nicht vorhanden ist, lege ihn im Root-Verzeichnis deines Projektes an.

Erstelle eine index.vue Datei im pages Ordner. Der Code in dieser Datei kann fürs erste folgendermaßen aussehen:

<template>
  <div>
    <h1 class="mt-4 text-4xl font-bold text-center">
      Welcome to Nuxt Tailwindcss Content i18n
    </h1>
    <p class="text-center">This is the index page</p>
  </div>
</template>

Wenn du jetzt npm run dev ausführst, wirst du feststellen, dass die TailwindCSS-Warnung weg ist. Das liegt daran, dass du nun in deinem Code TailwindCSS benutzt. Zuvor beschwerte sich das System, dass keine TailwindCSS Utility-Klassen eingesetzt wurden. In dem Codesnippet werden nun TailwindCSS Klassen eingesetzt und die Warnung ist verschwunden. Außerdem wird nicht mehr die Nuxt Welcome Page angezeigt, sondern direkt der Inhalt der neu angelegten index.vue Datei.

Schritt 2: nuxt/i18n konfigurieren

Lege im Root-Ordner einen neuen Ordner mit dem Namen locales an. In diesem Ordner erstellst du JSON-Dateien für die jeweiligen Sprachen. In meinem Beispiel werde ich für Deutsch und Englisch(US) Übersetzungsdateien anlegen. Ich empfehle die Dateinamen nach de Language-ISO-Format zu benennen. Somit sieht ein locales Ordner folgenderaßen aus:

locales
├── de-DE.json
└── en-US.json

Jetzt fügst du die Übersetzungen in die Dateien ein. Hierzu nehme ich den Text aus dem oberen Codebeispiel:

en-US.json

{
  "headline": "Welcome to Nuxt Tailwindcss Content i18n",
  "subheadline": "This is the index page"
}

de-DE.json

{
  "headline": "Willkommen zu Nuxt Tailwindcss Content i18n",
  "subheadline": "Das ist die Indexseite"
}

Schritt 2.1: nuxt.config.ts Anpassung

Damit das Module i18n die Übersetzungsdateinen benutzen kann, müssen diese in die Konfiguration von i18n eingetragen werden. Öffne die nuxt.config.ts Datei und füge folgendes JSON Objekt ein:

i18n: {
  locales:[
    {
      code: 'en',
      iso: 'en-US',
      name: 'English',
      file: 'en-US.json'
    },
    {
      code: 'de',
      iso: 'de-DE',
      name: 'Deutsch',
      file: 'de-DE.json'
    }
  ],
  langDir: 'locales/',
  defaultLocale: 'en',
  strategy: 'prefix_except_default',
}

In dem Array werden die Sprachen definiert, die du deinen Nutzern zur Verfügung stellen möchtest. Jede Sprache wird durch den Languagecode, die ISO-Kennung, einen Namen und das dazugehörige Übersetzungsfile definiert. Nach diesem Block wird mit langDir der Pfad zu den Übersetzungsdateien angegeben, die wir in Schritt 2.0 angelegt haben. Mit defaultLocale wird die Standard-Sprache festgelegt. Das Feld strategy ist für das Routing relevant. In diesem Beispiel wird ein Language-Prefix zur Route hinzugefügt, außer bei der Standard-Sprache.

Schritt 2.2: Einsatz der Übersetzung

Damit der Text richtig übersetzt wird, muss sowohl der Template-Bereich als auch der Script-Bereich in unserer index.vue Datei angepasst werden. Im Script-Bereich bindest du nun i18n ein:

<script setup lang="ts">
  const {locale} = useI18n();
</script>

Hiermit bindest du das i18n Modul in deine Komponente ein. Die locale Variable hält die aktuell ausgewählte Sprache. Da in der nuxt.config.ts Englisch als defaultLocale ausgewählt ist, wird bei mir auch en ausgegeben.

Diese Variable werde ich jetzt im Template verwenden, um die Sprache umzustellen. Der angepasste Code sieht folgendermaßen aus:

<template>
  <div>
    <h1 class="mt-4 text-4xl font-bold text-center">{{ $t("headline") }}</h1>
    <p class="text-center">{{ $t("subheadline") }}</p>
    <form>
      <select class="text-center" v-model="locale">
        <option value="en">English</option>
        <option value="de">Deutsch</option>
      </select>
    </form>
  </div>
</template>

Damit die richtige Sprache ausgegeben wird, muss {{ $t("headline") }} verwendet werden. $t ist die globale Variable für Übersetzungen. Hierbei wird im Hintergrund geschaut welche Sprache ausgewählt ist und dann in der passenden Datei nach dem Key headline geschaut und der zugehörige Wert zurück geliefert.

Um die Sprache umstellen zu können, muss die locale Variable angepasst werden. Dies geschieht in diesem Beispiel über ein Dropdown mit zwei Optionen. Je nachdem, welche Option ausgewählt wird, wird der Wert der Variable locale zugewiesen und im Hintergrund wird die passende Sprachdatei ausgewählt und die Werte auf der Webseite aktualisiert.

Natürlich kann man das auch über Buttons machen, dabei müsste man nur die setLocale() Funktion aufrufen. Mehr Details findest du auf der offiziellen Dokumentationsseite.

Zusammenfassung

Nachdem im ersten Teil der Serie das Projekt angelegt wurde und die notwendigen Pakete eingebunden wurden, wurde in diesem Teil der Fokus auf der Konfiguration der Internationalisierung der Webapplikation.

Im nächsten Teil wird eine kleine Landing Page erstellt, die man mit hilfe eines Language Switches in die jeweilige Sprache übersetzt werden kann. Bei der Realisierung der Landing Page wird in einem großen Maße TailwindCSS eingesetzt.

Den Code aus diesem Tutorial findest du auf Github