[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"blog-post-nuxt-3-sanity-cms-headless-website-aufsetzen":3},{"_createdAt":4,"_id":5,"author":6,"body":7,"canonicalUrl":158,"category":159,"coverImage":160,"excerpt":167,"featured":168,"publishedAt":169,"readingTime":170,"relatedPosts":158,"seoDescription":171,"seoTitle":172,"slug":173,"tags":176,"title":182},"2026-04-14T11:16:07Z","epzDXqrM0Ug1OrZfNfKIbt","Joel Schwegmann",[8,19,28,36,44,54,62,70,78,86,94,102,110,118,126,134,142,150],{"_key":9,"_type":10,"children":11,"markDefs":17,"style":18},"cd42be64-0b1","block",[12],{"_key":13,"_type":14,"marks":15,"text":16},"5faa5c40-579","span",[],"Nuxt 3 + Sanity CMS: Die perfekte Kombi für Headless",[],"h2",{"_key":20,"_type":10,"children":21,"markDefs":26,"style":27},"be54264e-f98",[22],{"_key":23,"_type":14,"marks":24,"text":25},"3c1d0d70-bc4",[],"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.",[],"normal",{"_key":29,"_type":10,"children":30,"markDefs":35,"style":27},"ed939c44-137",[31],{"_key":32,"_type":14,"marks":33,"text":34},"9cb8639d-373",[],"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.",[],{"_key":37,"_type":10,"children":38,"markDefs":43,"style":18},"472a6a80-bf2",[39],{"_key":40,"_type":14,"marks":41,"text":42},"08bfa831-6d8",[],"Was du brauchst",[],{"_key":45,"_type":10,"children":46,"level":51,"listItem":52,"markDefs":53,"style":27},"2eb73f4a-bd2",[47],{"_key":48,"_type":14,"marks":49,"text":50},"64107721-aee",[],"Node.js 18+ installiert",1,"bullet",[],{"_key":55,"_type":10,"children":56,"level":51,"listItem":52,"markDefs":61,"style":27},"e44b8a4d-d25",[57],{"_key":58,"_type":14,"marks":59,"text":60},"6c73bf0e-dbf",[],"Ein Sanity-Account (kostenlos für Einzelprojekte)",[],{"_key":63,"_type":10,"children":64,"level":51,"listItem":52,"markDefs":69,"style":27},"5e0e77c8-7a3",[65],{"_key":66,"_type":14,"marks":67,"text":68},"53cc4344-828",[],"Grundkenntnisse in Vue.js und TypeScript",[],{"_key":71,"_type":10,"children":72,"level":51,"listItem":52,"markDefs":77,"style":27},"77daafad-567",[73],{"_key":74,"_type":14,"marks":75,"text":76},"89967505-1b8",[],"Ein Terminal und einen Code-Editor",[],{"_key":79,"_type":10,"children":80,"markDefs":85,"style":18},"90b16f52-800",[81],{"_key":82,"_type":14,"marks":83,"text":84},"3e7d1a3e-015",[],"Schritt 1: Nuxt 3 Projekt initialisieren",[],{"_key":87,"_type":10,"children":88,"markDefs":93,"style":27},"675df66e-807",[89],{"_key":90,"_type":14,"marks":91,"text":92},"fb38225d-d40",[],"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.",[],{"_key":95,"_type":10,"children":96,"markDefs":101,"style":18},"63e971c4-00f",[97],{"_key":98,"_type":14,"marks":99,"text":100},"1f0b01d6-a38",[],"Schritt 2: Sanity Studio einrichten",[],{"_key":103,"_type":10,"children":104,"markDefs":109,"style":27},"0a420f96-29d",[105],{"_key":106,"_type":14,"marks":107,"text":108},"7b76c4bf-7f0",[],"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.",[],{"_key":111,"_type":10,"children":112,"markDefs":117,"style":18},"bf153247-c53",[113],{"_key":114,"_type":14,"marks":115,"text":116},"101bd0df-ac0",[],"Schritt 3: Frontend mit Sanity verbinden",[],{"_key":119,"_type":10,"children":120,"markDefs":125,"style":27},"dd3c89e3-beb",[121],{"_key":122,"_type":14,"marks":123,"text":124},"f3d89329-7d4",[],"Installiere den @sanity\u002Fclient 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.",[],{"_key":127,"_type":10,"children":128,"markDefs":133,"style":18},"fcbed2a2-79d",[129],{"_key":130,"_type":14,"marks":131,"text":132},"ef8877c0-450",[],"Schritt 4: Deploy & Go Live",[],{"_key":135,"_type":10,"children":136,"markDefs":141,"style":27},"a664db20-7ae",[137],{"_key":138,"_type":14,"marks":139,"text":140},"f0bdcee0-ac0",[],"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.",[],{"_key":143,"_type":10,"children":144,"markDefs":149,"style":18},"3092c2d4-431",[145],{"_key":146,"_type":14,"marks":147,"text":148},"21e1f534-731",[],"Fazit",[],{"_key":151,"_type":10,"children":152,"markDefs":157,"style":27},"87a7a428-06a",[153],{"_key":154,"_type":14,"marks":155,"text":156},"12b01f71-cab",[],"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.",[],null,"tutorial",{"alt":161,"asset":162,"credit":165,"creditUrl":166},"MacBook mit Code auf dem Bildschirm – Web-Entwicklung Setup",{"_id":163,"url":164},"image-082d7d16ce8121e1d66a565d854a603b3abc5aff-1200x799-jpg","https:\u002F\u002Fcdn.sanity.io\u002Fimages\u002Ff1irfjak\u002Fproduction\u002F082d7d16ce8121e1d66a565d854a603b3abc5aff-1200x799.jpg","Foto von Christopher Gower auf Unsplash","https:\u002F\u002Funsplash.com\u002F@cgower","Schritt-für-Schritt-Anleitung: So baust du in unter 30 Minuten eine performante Headless Website mit Nuxt 3 und Sanity CMS. Von der Installation bis zum ersten Deploy.",true,"2025-10-15T10:00:00Z",8,"Lerne Schritt für Schritt, wie du mit Nuxt 3 und Sanity CMS eine moderne Headless Website baust – inklusive SSR, SEO und Deploy.","Nuxt 3 + Sanity CMS Tutorial: Headless Website in 30 Min aufsetzen",{"_type":174,"current":175},"slug","nuxt-3-sanity-cms-headless-website-aufsetzen",[177,178,179,180,181],"Nuxt 3","Sanity CMS","Vue.js","Headless","SSR","Nuxt 3 und Sanity CMS: Headless Website in 30 Minuten aufsetzen"]