Die Verwendung von JS-Objekten oder JSON-Quellen für nuxt-i18n ist sehr praktisch, aber nicht immer die beste Wahl. Gerade wenn es um längere Texte geht, kann YAML als Format die entspanntere Alternative sein.

Hier ein Beispiel für den Einstieg, basierend auf einer zweisprachigen Seite, die ihre Übersetzungen direkt über YAML-Dateien erhalten soll.

Dieser Schritt ist gut versteckt in einem Vite-Kapitel der offiziellen Dokumentation.

Zunächst installieren wir einen YAML-Loader, der YAML-Dateien in JavaScript-Objekte umwandelt:

npm install @rollup/plugin-yaml

Diesen laden wir dann in unserer nuxt.config.ts als Vite-Plugin, welches über Rollup verschiedene Plugins integriert:

import yaml from '@rollup/plugin-yaml'

export default defineNuxtConfig({
  // ...
  vite: {
    plugins: [ yaml() ]
  }
})

Dies ermöglicht den Import von YAML-Dateien innerhalb von JavaScript-Dateien. Beispielsweise würde das folgende Skript dafür sorgen, dass der Inhalt der Quelldatei als eigenes JavaScript-Objekt in die Variable obj geladen wird:

import obj from './test.yaml'

Nach diesem Schritt bereiten wir zwei Sprachkataloge vor:

# lang/en.yaml

# Beispiel für ein Textelement, in dem Zeilenumbrüche innerhalb des Textes (`|`)
# und alle abschließenden Umbrüche (`+`) beibehalten werden sollen.
example1: |+
  Nulla a imperdiet neque. Nullam faucibus ut velit non placerat.
  Suspendisse iaculis ipsum id augue malesuada, non tincidunt enim venenatis.
  Nam est eros, elementum et placerat sit amet, viverra sit amet enim.
    

# Beispiel für ein Textelement, das den gesamten Text in eine Zeile faltet
# und alle abschließenden (`-`) Zeilenumbrüche entfernt.
example2: >-
  Nullam a ultricies purus.
  Curabitur commodo luctus nisl, nec feugiat sem maximus eu.

Nun noch eine vereinfachte Version für die zweite Sprache:

# lang/de.yaml

example1: Example1 DE
example2: Example2 DE

Zum Schluss laden wir beide Sprachkataloge in die Nuxt-Konfiguration:

// i18n.config.ts

import de from '~/lang/de.yaml'
import en from '~/lang/en.yaml'

export default defineI18nConfig(() => ({
  legacy: false,
  messages: { en, de }
}))

Wie bereits in den Sprachkatalogen zu sehen ist, ermöglicht die explizite Whitespace- und Multiline-Kontrolle in YAML eine saubere und lesbare Strukturierung der Texte. Dies macht es besonders einfach, eine gut lesbare, menschenlesbare Version der Texte zu pflegen.

Weitere Informationen finden sich unter