⚡ Vue Scan

Vue Scan automatically detects performance issues in your Vue app.

• Requires minimal code changes — just drop it in
• Highlights exactly the components that re-render
• Tracks mount, render, and patch timing per component
• Always accessible through an in-page toolbar

Quick Start

import '@fdemb1/vue-scan/auto'

That's it. Open your app and the overlay + toolbar will appear automatically.

Install

npm install @fdemb1/vue-scan

Or drop in a script tag — no install needed:

<script src="//unpkg.com/@fdemb1/vue-scan/dist/auto.global.js"></script>

Note: Vue 3 is required as a peer dependency. For production builds, set __VUE_PROD_DEVTOOLS__ to true in your bundler config.

Vite

// vite.config.ts
export default defineConfig({
  define: {
    __VUE_PROD_DEVTOOLS__: true,
  },
})

Nuxt

// nuxt.config.ts
export default defineNuxtConfig({
  vite: {
    define: {
      __VUE_PROD_DEVTOOLS__: true,
    },
  },
})

Usage

Auto Mode

Import anywhere in your app to start tracking immediately:

import '@fdemb1/vue-scan/auto'

Manual Mode

For more control over when and how tracking starts:

import { startTracking } from '@fdemb1/vue-scan'

const instrumentation = startTracking({
  overlay: true,
  logToConsole: false,
})

API Reference

Starts tracking component lifecycle and performance events.

interface Options {
  /** Show the in-page visual overlay @default true */
  overlay?: boolean
  /** Log component events to console @default false */
  logToConsole?: boolean
}

Returns the Instrumentation instance, or null if not in a browser.

Returns a Map<number, ComponentPerfData> snapshot of all tracked components:

interface ComponentPerfData {
  name: string
  initTime: number
  renderTime: number
  renderCount: number
  patchTime: number
  patchCount: number
  mountTime: number
  lastUpdate: number
}

Clears all collected performance data.

Low-level API to hook into Vue's DevTools performance events directly:

createInstrumentation({
  onComponentAdd({ instance, uid }) {},
  onComponentUpdate({ instance, uid }) {},
  onComponentRemove({ instance, uid }) {},
  onPerfStart({ uid, instance, type, time }) {},
  onPerfEnd({ uid, instance, type, time }) {},
})

Why Vue Scan?

Vue's reactivity system is powerful, but it can be hard to tell which components are re-rendering and why. Unnecessary renders silently degrade performance — especially in large apps with deep component trees.

Vue Scan makes this visible. It hooks into Vue's DevTools instrumentation to highlight every component render in real time, so you can spot the hot paths and fix them before they become a problem.

Acknowledgments

• React Scan for the concept and inspiration
• Vue DevTools for the instrumentation hooks that make this possible

License

MIT