Nuxt DevTools
Die interaktive Entwicklungsumgebung für Nuxt-Projekte
Was sind Nuxt DevTools?
Nuxt DevTools ist ein eingebautes Entwicklungswerkzeug, das direkt im Browser läuft. Es zeigt dir alles über deine App: Komponenten, Routen, State, Server-API-Endpunkte, installierte Module und mehr.
Stell dir eine Mischung aus Rails-Console, Browser-DevTools und einem visuellen Debugger vor — speziell für Nuxt optimiert.
DevTools aktivieren
Ab Nuxt 3.8 sind die DevTools standardmäßig verfügbar. Du musst sie nur in der Konfiguration aktivieren:
export default defineNuxtConfig({
// DevTools aktivieren
devtools: {
enabled: true,
// Optionale Einstellungen
timeline: {
enabled: true // Zeigt eine Timeline der App-Events
}
}
})Schnellzugriff
Drücke Shift + Alt + D im Browser, um die DevTools zu öffnen oder zu schließen. Alternativ klicke auf das Nuxt-Icon am unteren Bildschirmrand.
Component Inspector
Der Component Inspector zeigt die gesamte Komponentenhierarchie deiner Seite. Du siehst Props, Slots, Events und den aktuellen State jeder Komponente:
┌──────────────────────────────────────────────┐
│ Components │
├──────────────────────────────────────────────┤
│ 📦 app.vue │
│ └─ 📦 NuxtLayout (default) │
│ └─ 📦 pages/index.vue │
│ ├─ 📦 AppHeader │
│ │ └─ Props: { title: 'Startseite' }│
│ ├─ 📦 KontaktListe │
│ │ └─ Props: { kontakte: [...] } │
│ └─ 📦 AppFooter │
│ │
│ [Klicke auf eine Komponente für Details] │
└──────────────────────────────────────────────┘
Funktionen:
• Komponentenbaum durchsuchen
• Props und State live bearbeiten
• Quelldatei in VS Code öffnen (Klick auf Dateiname)
• Emitted Events verfolgenClick-to-Component
Halte Alt gedrückt und klicke auf ein Element in der Seite — die DevTools springen direkt zur entsprechenden Komponente und öffnen die Quelldatei in deinem Editor.
Route Inspector
Der Route Inspector zeigt alle registrierten Routen deiner App. Das ist besonders hilfreich bei dateibasiertem Routing, um die generierten Pfade zu überprüfen:
┌──────────────────────────────────────────────────────────┐
│ Routes │
├──────────────────────────────────────────────────────────┤
│ Pfad │ Datei │ Layout │
│ ─────────────────────── │ ────────────────── │ ──────── │
│ / │ pages/index.vue │ default │
│ /login │ pages/login.vue │ blank │
│ /dashboard │ pages/dashboard.vue│ default │
│ /kontakte │ pages/kontakte/ │ default │
│ /kontakte/:id │ pages/kontakte/ │ default │
│ /kontakte/:id/edit │ pages/kontakte/ │ default │
│ /blog/:slug │ pages/blog/ │ blog │
├──────────────────────────────────────────────────────────┤
│ Middleware: auth → 3 Routen │
│ Middleware: guest → 1 Route │
│ Aktive Route: /dashboard │
└──────────────────────────────────────────────────────────┘
Funktionen:
• Route anklicken → navigiert zur Seite
• Middleware-Zuordnung sehen
• Aktive Route hervorheben
• Route-Parameter testenServer API Tester
Du kannst deine Server-API-Endpunkte direkt in den DevTools testen — wie eine eingebaute Version von Postman oder Insomnia:
┌──────────────────────────────────────────────────────┐
│ Server Routes │
├──────────────────────────────────────────────────────┤
│ GET /api/kontakte │ [Senden] │
│ POST /api/kontakte │ │
│ GET /api/kontakte/:id │ │
│ PUT /api/kontakte/:id │ │
│ DELETE /api/kontakte/:id │ │
│ POST /api/auth/login │ │
│ POST /api/auth/logout │ │
│ GET /api/auth/me │ │
├──────────────────────────────────────────────────────┤
│ Request: │
│ POST /api/kontakte │
│ Body: { │
│ "name": "Max Mustermann", │
│ "email": "max@beispiel.de" │
│ } │
│ │
│ Response: 201 Created │
│ { "id": 5, "name": "Max Mustermann", ... } │
└──────────────────────────────────────────────────────┘Rails-Vergleich
Das entspricht ungefähr dem, was du in Rails mit rails console und HTTP-Client-Tools machst. Die DevTools kombinieren beides: Du kannst API-Endpunkte testen und gleichzeitig den App-State beobachten.
Weitere Features
Plugin Viewer
Zeigt alle installierten Plugins mit Ladezeit und Abhängigkeiten. Hilft dir, Performance-Probleme durch langsame Plugins zu identifizieren.
Module Info
Listet alle Nuxt-Module mit Version, Konfiguration und Links zur Dokumentation. Schneller Überblick über das gesamte Setup deiner App.
State Inspector (Pinia)
Zeigt und bearbeitet den Pinia-Store-State in Echtzeit. Du kannst Werte ändern und sofort die Auswirkungen in der App sehen.
Payload Inspector
Zeigt die SSR-Payload — die Daten, die der Server an den Client übergibt. Wichtig für die Optimierung der initialen Ladezeit.
Tab │ Beschreibung
─────────────────┼──────────────────────────────────────
Components │ Komponentenbaum + Props + State
Pages / Routes │ Alle Routen + Middleware
Composables │ Aktive Composables + State
Plugins │ Installierte Plugins + Ladezeit
Modules │ Nuxt-Module + Konfiguration
Server Routes │ API-Endpunkte testen
Assets │ Statische Assets durchsuchen
Pinia │ Store-State inspizieren + bearbeiten
Payload │ SSR-Payload analysieren
Build Info │ Vite-Build-Informationen
Timeline │ Chronologische Event-Aufzeichnung
Custom Tabs │ Von Modulen bereitgestelltVS Code Integration
Nuxt DevTools lässt sich nahtlos mit VS Code verbinden. Klickst du auf einen Dateinamen in den DevTools, öffnet sich die Datei direkt im Editor:
// nuxt.config.ts
export default defineNuxtConfig({
devtools: {
enabled: true,
// VS Code als Standard-Editor
vscode: {
// Automatisch erkannt, aber falls nötig:
// reuseExistingServer: true,
// port: 3080
}
},
// Tipp: sourcemap für besseres Debugging
sourcemap: {
server: true,
client: true
}
})Nützliche VS Code Extensions
- Vue - Official — Vue 3 Language Support (ehemals Volar)
- Nuxtr — Nuxt-Snippets und Kommandos
- Vue Devtools — Browser-Extension für Vue-Debugging
Zusammenfassung
DevTools-Highlights
- Shift+Alt+D — DevTools öffnen/schließen
- Component Inspector — Komponentenbaum, Props, State
- Route Inspector — Alle Routen auf einen Blick
- Server API Tester — Endpunkte direkt testen
- Pinia Inspector — Store-State live bearbeiten
- VS Code Integration — Click-to-Source in Dateien
- Timeline — Event-Aufzeichnung für Debugging