Built-in UI Component

The plugin ships a production-grade debugger panel. Add it once to your root layout and it appears as a floating overlay:

<!-- App.vue -->
<script setup>
import { NetworkDebugger } from 'vue-network-dashboard'
</script>

<template>
  <RouterView />
  <NetworkDebugger />
</template>

The panel includes:

• Filter bar — filter by type (HTTP / WS / SSE), URL, body (both support regex:pattern), HTTP method, status code, route, minimum duration, errors-only toggle, and (when WS type is active) a messages-only toggle
• URL highlight — active URL filter highlights the matching fragment directly in the log list
• Filter persistence — filters are saved to sessionStorage and restored on next load
• Log list — virtual scroll (100 rows at a time); colour-coded entries with expandable detail view (Request / Response / Meta tabs); Meta tab shows the Vue Router route when available
• Copy as cURL — one-click copy of any HTTP request as a curl command from the detail panel
• Replay — re-send any HTTP request from the detail panel; the response appears as a new log entry
• Statistics panel — live traffic sparkline, request counts, error rate, average duration, data transfer, method/status distribution, slowest and largest requests
• HAR import — load a .har file to browse a recorded session; a banner indicates import mode with a dismiss button to return to live traffic
• Export modal — format selector (JSON / CSV / HAR), filter by protocol and status codes, dual time-range slider showing N / M logs count before confirming
• Fullscreen mode — expand to full viewport; page scroll is blocked while active; exit with the button or Escape
• Pin — pin the panel so it stays open when clicking outside
• Drag & resize — drag the panel by its header; resize from any of the 8 edges and corners
• Toggle FAB — compact floating button with request count and error indicator when the panel is hidden
• Keyboard shortcut — Ctrl+Shift+D by default (configurable)

Component Props

Prop	Type	Default	Description
defaultVisible	boolean	false	Whether the panel is open on mount
defaultPinned	boolean	false	Whether the panel is pinned on mount
hotkey	string	'd'	Key character for the toggle shortcut
hotkeyModifiers	object	{ ctrl: true, shift: true }	Modifier keys: ctrl, alt, shift, meta

Props take effect as component-level defaults. If you configure hotkeys via the plugin's ui option (see below), you do not need to set these props.

Hotkey Configuration

The toggle hotkey can be configured at two levels. Plugin level (recommended) — set once at registration, applies automatically to all <NetworkDebugger> instances:

app.use(NetworkDashboard, {
  ui: {
    hotkey: 'd',
    hotkeyModifiers: { ctrl: true, shift: true }, // Ctrl+Shift+D
  },
})

Component level — pass props directly to the component (overrides plugin-level config):

<NetworkDebugger hotkey="d" :hotkeyModifiers="{ ctrl: true, shift: true }" />

The panel ignores hotkeys when focus is inside an <input>, <textarea>, or a contenteditable element. When pinned, the hotkey is also disabled to prevent accidental closes.

Programmatic Control

The component exposes methods via ref:

<script setup>
import { ref } from 'vue'
import { NetworkDebugger } from 'vue-network-dashboard'

const debugger = ref()
</script>

<template>
  <NetworkDebugger ref="debugger" />
  <button @click="debugger.show()">Open</button>
  <button @click="debugger.hide()">Close</button>
  <button @click="debugger.toggle()">Toggle</button>
  <button @click="debugger.clear()">Clear logs</button>
  <button @click="debugger.export('json')">Export JSON</button>
</template>