Nuxt 3 und Sanity CMS: Headless Website in 30 Minuten aufsetzen

Nuxt 3 + Sanity CMS: Die perfekte Kombi für Headless

Headless CMS-Architekturen haben sich in den letzten Jahren als Standard für moderne Webprojekte etabliert. Die Kombination aus Nuxt 3 als Frontend-Framework und Sanity als Content-Management-System bietet dabei eine besonders entwicklerfreundliche und performante Lösung.

In diesem Tutorial zeige ich dir Schritt für Schritt, wie du in unter 30 Minuten eine vollständige Headless Website aufbaust – von der Installation über die Datenmodellierung bis zum fertigen Deploy.

Was du brauchst

• Node.js 18+ installiert
• Ein Sanity-Account (kostenlos für Einzelprojekte)
• Grundkenntnisse in Vue.js und TypeScript
• Ein Terminal und einen Code-Editor

Schritt 1: Nuxt 3 Projekt initialisieren

Starte mit dem offiziellen Nuxt-CLI. Der Befehl npx nuxi init erstellt ein neues Projekt mit allen nötigen Konfigurationsdateien. Wähle TypeScript als Sprache – das zahlt sich bei der Sanity-Integration besonders aus, da wir GROQ-Queries typisieren können.

Schritt 2: Sanity Studio einrichten

Erstelle innerhalb deines Projekts einen Sanity-Ordner mit npx sanity init. Definiere dein erstes Schema – zum Beispiel eine einfache Page mit Titel, Slug und Rich-Text-Inhalt. Sanity Studio läuft lokal und deployed automatisch in die Cloud.

Schritt 3: Frontend mit Sanity verbinden

Installiere den @sanity/client im Nuxt-Projekt und erstelle ein Composable, das den Client initialisiert. Nutze useAsyncData für Server-Side-Rendering und definiere GROQ-Queries als exportierte Konstanten – so bleiben sie wiederverwendbar und testbar.

Schritt 4: Deploy & Go Live

Deploye dein Nuxt-Projekt auf Vercel oder Netlify. Setze die Sanity-Umgebungsvariablen (Project ID, Dataset) und aktiviere ISR (Incremental Static Regeneration) für optimale Performance bei gleichzeitig aktuellen Inhalten.

Fazit

Mit Nuxt 3 und Sanity hast du eine Architektur, die sowohl entwicklerfreundlich als auch extrem performant ist. Die Trennung von Content und Präsentation ermöglicht es, Inhalte über mehrere Kanäle auszuspielen und das Frontend unabhängig weiterzuentwickeln.