Network Dashboard
Universal network monitoring plugin for Vue 3 — intercepts HTTP, WebSocket, and SSE traffic, sanitizes sensitive data, and exposes reactive statistics.
Interception of all network request types
A single plugin intercepts Fetch, XMLHttpRequest, WebSocket, and Server-Sent Events (SSE), normalizing them into a unified log format. All events are stored reactively in a Vue store with full details on requests, responses, headers, bodies, timing, and errors.
Security and data sanitisation
Automatic redaction of sensitive headers (Authorization, Cookie, X-API-Key), removal of confidential fields from bodies (password, token, secret), and partial masking of PII (email, phone, address). Sanitisation settings are extendable, and logs are always stored securely.
Built‑in UI toolkit with virtual scroll
A ready‑to‑use debug dashboard with filtering by type, URL, method, status, duration, body, and route. Live statistics, a timeline, grouping, body search with regex, inline highlighting, copy as cURL, HAR/JSON/CSV export, and a fullscreen mode.
Mocks, response transforms, and breakpoints
Create mock rules with conditions (URL, method, query, headers, body) and organise them into groups. Transform real responses on the fly (status override, field merge/delete). Set breakpoints to pause, edit, and release requests before they are sent.
Deep integration and advanced analytics
Automatic GraphQL detection (type, name, variables), N+1 request detection, HAR/OpenAPI import, session comparison, diff view, and network throttling. Ready‑to‑use adapters for Sentry and OpenTelemetry, Vue DevTools integration, and a Nuxt module.