@razz21/vue-scan NPM

vue-scan

NPM Version GitHub License GitHub Actions Workflow Status GitHub Issues or Pull Requests

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