Wie ich meine persönliche Website mit Nuxt 4 und Firebase neu aufgebaut habe
Meine alte Website war eine einzelne statische HTML-Datei. So und warum ich sie mit Nuxt 4, Tailwind CSS, Firebase Hosting und einem vollständig angepassten Mehrsprachsystem für 10 Sprachen neu aufgebaut habe.
Die alte Website
Lange Zeit war meine persönliche Website eine einzelne `index.html`-Datei. Minimal und schnell — aber nicht skalierbar. Ich entschied mich für einen vollständigen Neuaufbau.
Warum Nuxt 4
- Statische Generierung — `nuxt generate` erzeugt statische Ausgabe für Firebase Hosting
- Dateibasiertes Routing — Artikelseiten unter `/news/[slug]` funktionieren ohne Konfiguration
- TypeScript-first — Die gesamte Codebasis ist typisiert
- SSR + Hydration — Ideal für SEO
Der Stack
- Nuxt 4 — App-Verzeichnisstruktur, SSR mit statischer Generierung
- Tailwind CSS — Utility-first Styling
- Firebase Hosting — Globales CDN, einfache Deployments
- Eigenes i18n — Ein handgeschriebenes Composable mit `vue-i18n`
- Nitro Server-Routen — Artikel als lokale JSON-Dateien
Das Mehrsprachsystem
Die Website unterstützt 10 Sprachen. Ich habe `@nuxtjs/i18n` bewusst vermieden und stattdessen ein `useI18n()`-Composable geschrieben, das aus einem `locale`-Cookie liest.
Artikel als lokales JSON
Jeder Artikel ist eine JSON-Datei mit einem `translations`-Objekt — ein Eintrag pro Locale mit `title`, `summary` und `body` in Markdown.
SEO und Pre-Rendering
Ein `nitro:config`-Hook liest das `content/articles/`-Verzeichnis vor dem Vite-Build und fügt jede `/news/[slug]`-Route zur Pre-Render-Liste hinzu.
Ausblick
Die Website hat jetzt ordentliches Routing, einen News-Feed und vollständige Mehrsprachunterstützung.