vue-scan

What?

Vue-scan is a lightweight utility tool that may help you to identify bottlenecks in your Vue application by tracking and visualising component renders and re-renders with minimal performance impact.

Why?

To address a critical gap in Vue development: the need for immediate, visual feedback when components mount and update. While Vue DevTools provides comprehensive debugging capabilities, it lacks direct visual indication of component rendering activity within the application UI itself.

How It Works

The tool leverages Vue's internal mechanisms to track component lifecycle events without modifying your components or DOM elements directly.

Installation

npm install @razz21/vue-scan

Usage

Vue 3 Plugin

import { VueScanPlugin } from '@razz21/vue-scan';

const app = createApp(App);
app.use(VueScanPlugin, {
  // options
});
app.mount('#app');

Nuxt 3 Module

// nuxt.config.ts

export default defineNuxtConfig({
  modules: ['@razz21/vue-scan/nuxt'],
  vueScan: {
    // options
  },
});

Options

| Option | Type | Default | Description | | ------------------- | ---------- | -------------------- | --------------------------------------------------- | | color | string | rgba(65, 184, 131) | Highlight effect color | | duration | number | 600 | Highlight effect fade-out time in milliseconds | | enabled | boolean | true | Enable or disable the plugin globally | | logToConsole | boolean | false | Log component debug information to the console | | excludeComponents | string[] | [] | Array of component names to exclude from tracking | | includeComponents | string[] | [] | If provided, only track components with these names |

FAQ

1. Does vue-scan support production mode?

Currently, vue-scan is designed for development build only. However, I may plan to explore production build support in the future.

2. What are supported Vue versions?

This tool is built and tested using Vue v3.5.13+. Some features may not work with older versions.

References and inspiration

• vue-devtool-flash-updates - A Vue DevTools plugin that flashes components when they update
• react-scan - Ultimate tool for debugging React applications

License

MIT © Razz21