Referenzen

janraap.de auf Nuxt 4

Zweisprachige Website im eigenen Versuchsaufbau

Startseite des Nuxt-Stands mit Signet, Navigation, Überschrift und Schaltfläche Projektanfrage
Der Stand, der bis zum Umzug ausgeliefert wurde.
Rolle
eigenes Projekt: Konzept, Design, Entwicklung
Projekt
janraap.de, Vorgängerstand
Zeitraum
bis zum Umzug auf Grav im September 2026
Ergebnis
76 Seiten portiert, 42 Redirect-Regeln

Meine eigene Website sollte in WordPress entstehen, mit dem Builder Cwicly. Im März 2024 wurde der eingestellt, und ich stand mit Vorlagen da, die niemand mehr öffnet. Danach lief die Seite bis September 2026 auf Nuxt 4: 98 Markdown-Dateien, zwei Sprachen, Deutsch ohne Präfix und Englisch unter /en/. Die Mehrsprachigkeit musste ich mir dort selbst bauen.

Diese Fallstudie beschreibt den Wechsel meiner eigenen Website von Nuxt 4 zu Grav 2. Sie lief bis September 2026 zweisprachig: 98 Markdown-Dateien im Inhaltsordner, Deutsch ohne Präfix, Englisch unter /en/. Gebaut habe ich sie auch deshalb, weil ich einen Stack im eigenen Projekt kennen will, bevor ich ihn jemandem anbiete.

Der Umweg über Cwicly

Vor Nuxt lief bei mir längst ein Migrationsprojekt. Die alte Website steckte in WordPress, und der Neubau sollte mit Cwicly entstehen, einem Gutenberg-Builder, der ab November 2021 als der weitest entwickelte seiner Art galt. Ich hatte mich eingearbeitet, Vorlagen gebaut und auf dieses Werkzeug gesetzt.

Am 3. März 2024 kündigte der Entwickler im eigenen Forum die Einstellung an und begründete sie öffentlich mit Angriffen aus der WordPress-Szene. Erstattet wurde nur, wer ab dem 1. Januar 2024 gekauft hatte. Forum und Facebook-Gruppe gingen auf read-only, die Erklärung verschwand später wieder von der Website, die Community sammelte sich in einer inoffiziellen Gruppe. Im Juli 2024 gab es die Kehrtwende: Das Plugin wurde kostenlos. Quelloffen wurde es nie, im WordPress-Verzeichnis steht es bis heute nicht. Übrig ist eine eingefrorene Version 1.4.4 ohne Forum.

Meine Arbeit steckte damit in einem Werkzeug ohne Zukunft, und meine Inhalte in einem Blockformat, das ohne dieses Werkzeug niemand mehr sinnvoll öffnet. Die Lehre war nicht, dass das Plugin schlecht gewesen wäre. Es war technisch stark. Die Lehre war, dass ich meine eigene Website an ein geschlossenes Produkt gehängt hatte, dessen Weiterbestand an einem kleinen Team hing. Danach wollte ich zwei Dinge: Inhalte, die auch ohne das System noch lesbarer Text sind, und einen Stack, den ich selbst zusammensetze. So bin ich bei Markdown und Nuxt 4 gelandet.

Warum die Wahl auf Nuxt fiel

Nuxt rendert Seiten auf dem Server und übergibt sie im Browser an Vue. Das ergibt Adressen, die Suchmaschinen lesen können, und Komponenten, die sich wie eine Anwendung verhalten. Für eine Seite mit Preisrechner, Sprachumschalter und Kartenrastern passte das.

Referenzübersicht mit Logokarten von 4 Könige, ABCcut, comdirect und Dentale Fachabrechnung
Die Logokarten der Referenzübersicht haben den Umzug überlebt, sie liegen heute in Twig.

Was ich mir selbst gebaut habe

Damit die Seite lief, mussten drei Erweiterungen zusammenspielen: Nuxt Content für die Inhalte, Nuxt i18n für die Sprachen, Nuxt SEO für Sitemap, Canonicals und hreflang. Jede davon ist für sich gut gebaut. Die Arbeit entsteht an den Nähten, und die Nähte waren mein Teil.

Nuxt Content kennt in Version 3 keine Sprachen. Der Vorschlag für eingebaute Mehrsprachigkeit liegt seit März 2026 als offener Pull Request im Projekt. Bis dahin galt der Behelf, den ich mir zurechtgelegt habe: Jede Sammlung existiert zweimal, referenzen und references, projekte und projects, pakete und plans. Welche deutsche Datei zu welcher englischen gehört, stand in zwei selbst erfundenen Frontmatter-Feldern, slugde und slugen. Aus diesen beiden Feldern baute eine eigene Schnittstelle die Sprachpaare für die Sitemap, sortierte Doppelte aus und setzte x-default von Hand, gut siebzig Zeilen. Das hat funktioniert. Es war aber Code, den ich selbst schreiben, selbst prüfen und nach jedem Update selbst nachziehen musste.

Dazu kam der Schrägstrich am Adressende, gepflegt in vier Konfigurationen, die verschiedenen Modulen gehören. Wer eine davon vergisst, merkt es erst an den Adressen, die Google findet: Vierzehn meiner alten Weiterleitungen zeigten auf Ziele mit Sprungmarke und Schrägstrich, etwa /leistungen/webdesign/#wartung-support/, sieben davon führt Google bis heute als eigene Treffer. Beim Umzug musste die neue Seite deshalb dieselben Sprungmarken tragen, sonst wären die Treffer ins Leere gelaufen.

Behoben wurde in diesem Bereich viel, und zwar fortlaufend. Genau das war das Problem: Jeder Fix bedeutete ein Update, ein Update bedeutete Nachbau meiner Umgehungen und eine Runde Nachmessen.

Stabile Veröffentlichungen der drei Erweiterungen in den zwölf Monaten bis September 2026, gezählt in der npm-Registry.
ErweiterungVeröffentlichungenHauptversionen
Nuxt SEO 37 3, 4, 5
Nuxt Content 15 3
Nuxt i18n 11 10
Leistungsseite auf dem Smartphone mit Brotkrümelpfad, Überschrift und Illustration
Mobile Ansicht einer Leistungsseite.

Warum meine Seite heute auf Grav läuft

Im September 2026 bin ich auf Grav umgezogen: 76 Seiten neu aufgebaut, 42 Weiterleitungsregeln für die alten Adressen, der englische Zweig mit seinen vierzig Dateien ist dabei entfallen, weil es keine Verweise darauf gab. Grav liest Markdown direkt aus dem Verzeichnis, rendert mit Twig und braucht keinen Build. Für eine Seite, die ich selbst pflege und an der ich täglich Kleinigkeiten ändere, ist das die ruhigere Wahl.

Startseite hell: Überschrift Deine Website gehört dir, Signet und Schaltfläche Erstgespräch
Dieselbe Startseite im dunklen Design, gleicher Ausschnitt
Hell Dunkel
Die heutige Startseite auf Grav. Der Regler wechselt zwischen hellem und dunklem Design.

Was von Nuxt bleibt

Reichlich, und Nuxt bleibt in meinem Angebot. Wenn eine Seite mehr können muss als zeigen und verlinken, wenn es um Zustand, Formularlogik und echte Interaktion geht, ist sie dort richtig: Frontend-Entwicklung mit Vue und Nuxt buchen Agenturen bei mir weiterhin.

Tailwind setze ich in eigenen Projekten nicht mehr ein. Der Grund steht in meinen eigenen Notizen aus dem Nuxt-Projekt: Klassennamen mit Tippfehler fallen stillschweigend durch, kein Fehler in der Konsole, kein Warnhinweis im Build, die Seite sieht nur falsch aus. Diese Fehlerklasse kostet mich mehr Suchzeit als das Schreiben von CSS. In Agenturprojekten arbeite ich weiter damit, wenn der Stack es vorgibt.

Was ich mitnehme

  • Das Werkzeug darf verschwinden, die Inhalte nicht. Markdown im Dateisystem übersteht den Umzug, Blöcke aus einem eingestellten Builder nicht.
  • Wer drei Erweiterungen kombiniert, pflegt die Nähte zwischen ihnen, und diese Pflege steht in keiner Featureliste. Sie ist die eigentliche Arbeit.
  • Mehrsprachigkeit gehört in die Grundentscheidung für ein System, weil ich sie sonst ein zweites Mal daneben baue, in eigenen Feldern und eigenem Code.
  • Fixes sind nur dann ein Gewinn, wenn das Projekt sie auch einspielen kann. Zwei Hauptversionen im Jahr sind Aufwand, kein Fortschritt.
  • Herausgefunden habe ich das am eigenen Projekt, auf eigene Rechnung.

Steht bei dir eine Stack-Entscheidung an?

Ob eine Seite ein Framework braucht oder ein Dateien-CMS reicht, entscheidet sich an der Redaktion: wer pflegt, wie oft, mit welchem Werkzeug. Erzähl mir, was die Seite können muss und wer sie danach in der Hand hat, dann sage ich dir, was ich an deiner Stelle bauen würde.

Projekt besprechen

Durchsucht alle Seiten, das FAQ und das Glossar. Mindestens 3 Zeichen.