Vue DevTools Integration

setupDevtools() — registers a Network inspector tab and a timeline layer in Vue DevTools (browser extension ≥ 6.5 and vite-plugin-vue-devtools ≥ 7.x).

function setupDevtools(app: App, instance: VueNetworkDashboardInstance): Promise<void>

Requires @vue/devtools-api ≥ 6.5 — it is not declared as a formal peer dependency of the package, so install it yourself if you don't already have it (it typically ships as a transitive dependency of vite-plugin-vue-devtools). When it isn't available, or when called outside a browser (SSR), setupDevtools() silently does nothing — safe to call unconditionally.

Usage

import { setupDevtools, useNetworkDashboard } from 'vue-network-dashboard'

if (import.meta.env.DEV) {
  app.use(NetworkDashboardPlugin)
  const dashboard = useNetworkDashboard() // must be called inside app context
  setupDevtools(app, dashboard)
}

The inspector shows every log entry as a tree node with full request/response state (headers, body, status, timing, mock/pending flags). The timeline layer records a marker for each completed HTTP request.