VueCraft NPM

Configuration Reference ​

All options below apply to app.use(NetworkDashboard, options), the Nuxt module's networkDashboard config key, and createNetworkDashboard(options).

Top-level options ​

enabled ​

boolean · default: true

Master on/off switch.

maxLogs ​

number · default: 1000

Maximum entries kept in memory. Oldest are evicted when the limit is reached.

devOnly ​

boolean · default: false

When true, the plugin is a no-op in production (import.meta.env.PROD).

persistToStorage ​

boolean · default: false

Persist logs to localStorage and restore them on page reload.

router ​

RouterInstance · default: —

Vue Router instance (or any object satisfying the minimal currentRoute + afterEach shape). Required for route context enrichment — see Vue Router Integration.

enrichWithRoute ​

boolean · default: false

Attach router.currentRoute.value.fullPath to every log entry as entry.route. Requires router.

Interceptors ​

interceptors.fetch ​

boolean · default: true

Intercept window.fetch.

interceptors.xhr ​

boolean · default: true

Intercept XMLHttpRequest.

interceptors.websocket ​

boolean · default: true

Intercept WebSocket.

interceptors.sse ​

boolean · default: true

Intercept EventSource (SSE).

Filters ​

Pre-filter events before they are stored. Entries that do not match are discarded.

filters.urlPattern ​

RegExp · default: —

Only store entries whose URL matches.

filters.excludeUrlPattern ​

RegExp · default: —

Discard entries whose URL matches.

filters.methods ​

string[] · default: —

Only store entries with these HTTP methods (e.g. ['GET', 'POST']).

filters.statusCodes ​

number[] · default: —

Only store entries with these exact status codes.

filters.bodySizeThreshold ​

number · default: —

Only store entries whose body is at least this many bytes.

Sanitization ​

See Security & Sanitization for the built-in default lists — all three options below are merged with, not a replacement for, those defaults.

sanitization.sensitiveHeaders ​

string[] · default: —

Header names to redact entirely ([REDACTED]).

sanitization.sensitiveFields ​

string[] · default: —

Body field names to remove entirely.

sanitization.maskFields ​

string[] · default: —

Body field names to partially mask (e.g. us***@example.com).

Metrics ​

metrics.calculateTTFB ​

boolean · default: true

Track Time To First Byte for HTTP requests — the time between the request starting and response headers arriving (before the body is read). Written to entry.metadata.ttfb in milliseconds; stays null for WebSocket/SSE entries and for requests still in flight.

metrics.trackRetries ​

boolean · default: true

Increment entry.metadata.retryCount when a request fails (status >= 400 or a network error) and is followed by another request to the same METHOD url; resets to 0 once that endpoint succeeds. See Retry Detection.

Callbacks ​

React to logs outside of Vue components — useful for integrating with error tracking or analytics.

callbacks.onLog ​

(entry: UnifiedLogEntry) => void · default: —

Called after every log entry is stored.

callbacks.onError ​

(error: Error) => void · default: —

Called when an internal plugin error occurs.

callbacks.onFlush ​

(logs: UnifiedLogEntry[]) => void · default: —

Called after clear() with the entries that were removed.

Example:

typescript
app.use(NetworkDashboard, {
  callbacks: {
    onLog(entry) {
      analytics.trackEvent('network_request', {
        url: entry.url,
        method: entry.method,
        status: entry.http?.status,
        duration: entry.duration,
      })
    },

    onError(err) {
      Sentry.captureException(err)
    },

    onFlush(cleared) {
      console.log(`Flushed ${cleared.length} log entries`)
    },
  },
})

For ready-made callback sets, see Sentry Integration and OpenTelemetry Integration.

UI ​

Controls the built-in <NetworkDebugger> panel. These values act as defaults and can be overridden by component props.

ui.hotkey ​

string · default: 'd'

Key character for the toggle shortcut.

ui.hotkeyModifiers ​

{ ctrl?: boolean; alt?: boolean; shift?: boolean; meta?: boolean } · default: { ctrl: true, shift: true }

Modifier keys required alongside hotkey.

ui.theme ​

'dark' | 'light' | 'auto' · default: 'dark'

Panel color scheme. 'auto' follows the OS prefers-color-scheme.