Vue Router Integration

Enable route context to automatically tag every log entry with the Vue Router route path that was active when the request was made. This makes it easy to trace which page triggered a slow request or an error without manually correlating by timestamp.

Vue 3 SPA

// main.ts
import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import NetworkDashboard from 'vue-network-dashboard'
import App from './App.vue'

const router = createRouter({ history: createWebHistory(), routes })
const app = createApp(App)

app.use(router)
app.use(NetworkDashboard, {
  router,
  enrichWithRoute: true,
})

app.mount('#app')

Nuxt 3

// plugins/network-dashboard.client.ts
export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(NetworkDashboardPlugin, {
    router: nuxtApp.$router,
    enrichWithRoute: true,
  })
})

What it adds

When enrichWithRoute: true is configured, each UnifiedLogEntry gains a route field:

entry.route // e.g. "/dashboard/users/42"

In the debugger UI:

• A Route filter input appears in the filter bar (only when at least one log carries a route). Supports the regex: prefix.
• The Meta tab of each expanded log entry shows a highlighted Route chip.
• The Export modal counts are route-aware — filtering by route reduces the exported set.

The feature has no runtime dependency on vue-router — the plugin accepts any object that satisfies the minimal RouterInstance interface (currentRoute + afterEach).