Fähigkeiten nuxt
📦

nuxt

Sicher 🌐 Netzwerkzugriff📁 Dateisystemzugriff

Nuxt 4+ Anwendungen entwickeln

Auch verfügbar von: antfu

Entwickler benötigen Anleitungen zu Nuxt 4-Patterns für Server-Routen, Datei-basiertes Routing, Middleware, Plugins und Konfiguration. Diese Skill bietet progressive Referenzdokumentation mit den neuesten Nuxt-Konventionen und Beispielen.

Unterstützt: Claude Codex Code(CC)
🥉 76 Bronze
1

Die Skill-ZIP herunterladen

2

In Claude hochladen

Gehe zu Einstellungen → Fähigkeiten → Skills → Skill hochladen

3

Einschalten und loslegen

Teste es

Verwendung von "nuxt". Create a Nuxt 4 server route with Zod validation

Erwartetes Ergebnis:

  • Create the route file: server/api/users.ts
  • Import Zod and define input schema with z.object()
  • Use readBody() or getQuery() to get input
  • Validate with schema.parse() and return validation errors
  • Return typed response with proper status codes

Verwendung von "nuxt". Set up global authentication middleware

Erwartetes Ergebnis:

  • Create middleware/auth.global.ts
  • Use defineNuxtRouteMiddleware() for type safety
  • Check auth state from store or session
  • Return navigateTo() for redirects (not router.push())
  • Export default function for Nuxt 4 compatibility

Sicherheitsaudit

Sicher
v1 • 2/9/2026

Documentation-only skill containing markdown reference files for Nuxt 4+ development. All static findings are false positives from markdown code examples. No executable code, network calls, or credential access.

8
Gescannte Dateien
2,074
Analysierte Zeilen
2
befunde
1
Gesamtzahl Audits

Risikofaktoren

🌐 Netzwerkzugriff (5)
references/middleware-plugins.md:276-278 references/nuxt-components.md:26-162 references/nuxt-composables.md:16-322 references/nuxt-config.md:25-419 SKILL.md:78-80
📁 Dateisystemzugriff (1)
references/project-setup.md:40-55
Auditiert von: claude

Qualitätsbewertung

45
Architektur
100
Wartbarkeit
87
Inhalt
50
Community
100
Sicherheit
91
Spezifikationskonformität

Was du bauen kannst

API-Endpunkte erstellen

Server-Routen mit Validierung, WebSocket-Unterstützung und SSE mit h3-Hilfsmitteln und Nitro-Patterns erstellen.

Routing und Middleware einrichten

Datei-basiertes Routing, Routengruppen, Authentifizierungs-Middleware und Navigation-Guards konfigurieren.

Nuxt Projekte konfigurieren

nuxt.config.ts mit Modulen, Runtime-Config, Auto-Imports und Projekt-Layern einrichten.

Probiere diese Prompts

Server-Route erstellen 
Ich muss eine Nuxt 4 Server-Route unter /api/users erstellen, die eine Liste von Benutzern mit Validierung zurückgibt. Lade references/server.md für h3-Validierungspatterns und richtige Routenstruktur.
Route Middleware hinzufügen 
Ich möchte Authentifizierungs-Middleware hinzufügen, die nicht authentifizierte Benutzer umleitet. Lade references/middleware-plugins.md, um Nuxt 4-Middleware-Patterns und globale vs. benannte Middleware zu sehen.
Runtime Config konfigurieren 
Wie konfiguriere ich runtimeConfig in nuxt.config.ts, um Umgebungsvariablen auf der Serverseite zu nutzen? Zeige patterns aus references/nuxt-config.md für private und öffentliche Config.
Nuxt Composables nutzen 
Ich muss einen Fetch-Request in meiner Nuxt-Seite ausführen. Lade references/nuxt-composables.md, um zu sehen, wie useFetch funktioniert und welche SSR-Überlegungen wichtig sind.

Bewährte Verfahren

  • Benannte Exports für Route-Middleware verwenden, außer es handelt sich wirklich um globale Middleware
  • navigateTo() aus Middleware zurückgeben, router.push() niemals direkt verwenden
  • API-Eingaben mit Zod-Schema auf Route-Handler-Ebene validieren
  • useFetch() mit proper Keys für SSR-Datenabruf und Caching verwenden

Vermeiden

  • Vue 3 router.push() statt navigateTo() in Middleware verwenden
  • Eingabevalidierung auf Server-Routen überspringen
  • Client- und Server-nur-Code ohne proper runtimeConfig-Nutzung mischen
  • .global.ts Suffix für globale Middleware nicht verwenden

Häufig gestellte Fragen

Was ist der Unterschied zwischen benannter und globaler Middleware in Nuxt 4?
Benannte Middleware läuft nur, wenn sie explizit über definePageMeta() angewendet wird. Globale Middleware muss das .global.ts Suffix verwenden und läuft bei jeder Routenänderung. Globale Middleware nur verwenden, wenn sie wirklich für alle Routen benötigt wird.
Wie validiere ich API-Anfrage-Bodies in Nuxt Server-Routen?
Zod mit readBody() für POST/PUT-Anfragen verwenden. z importieren, ein Schema mit z.object() definieren, dann schema.parse(body) aufrufen, um zu validieren. Bei Validierungsfehlern Status 400 mit Fehlern zurückgeben.
Was ist der richtige Umgang mit Umgebungsvariablen?
runtimeConfig in nuxt.config.ts verwenden. Private Keys (nur Server) nutzen process.env.API_SECRET. Öffentliche Keys (Client-zugänglich) nutzen process.env.PUBLIC_API_BASE. Private Keys niemals an das Client-Bundle expose-n.
Wie nutze ich Nuxt Composables vs Vue Composables?
Nuxt Composables werden auto-importiert aus ~/composables oder Paketen. Nuxt-spezifische wie useFetch, useRequestURL, useRuntimeConfig verwenden. Für allgemeine Vue-Patterns die Vue-Skill mit VueUse-Beispielen nutzen.
Was ist die empfohlene Projektstruktur für Nuxt 4?
Standardstruktur: pages/, components/, composables/, middleware/, plugins/, server/, utils/, assets/. app/ für App-level-Verzeichnisse verwenden. nuxt.config.ts im Projekt-Root platzieren.
Wie erstelle ich Routengruppen in Nuxt 4?
Ordnernamen in Klammern setzen wie (admin)/. Dies erstellt eine Routengruppe ohne einen Pfadsegment hinzuzufügen. Nützlich zum Gruppieren von Routen mit geteilten Layouts oder Middleware.

Entwicklerdetails

Autor

onmax

Lizenz

MIT

Repository

https://github.com/onmax/nuxt-skills/tree/main/skills/nuxt/

Ref

main

Dateistruktur

📁 references/

📄 middleware-plugins.md

📄 nuxt-components.md

📄 nuxt-composables.md

📄 nuxt-config.md

📄 project-setup.md

📄 routing.md

📄 server.md

📄 SKILL.md