vue-flow-vis - NFHN Reader

`vue-flow-vis`

0-dependency Vue reactivity tracker. Monitor which components re-render, what triggers the updates, and track reactive dependencies using Vue's built-in debugging hooks (onRenderTriggered and onRenderTracked).

Log Example

In this example, user typing john caused 28 render events in Login component trigger.

Installation

npm install vue-flow-vis --save-dev
# or
yarn add vue-flow-vis --dev
# or
pnpm install vue-flow-vis --dev

Quick Start

// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import { FlowVisPlugin } from 'vue-flow-vis'

const app = createApp(App)

// Basic usage with default settings
app.use(FlowVisPlugin)

app.mount('#app')

The plugin will automatically start monitoring all your components.

More examples can be found in examples directory.

Configuration Options

The plugin accepts a configuration object with the following options:

type FlowVisOptions = {
  enabled?: boolean             // Enable/disable monitoring (default: true)
  logger?: 'console' | 'ui' | 'none'  // Logger type (default: 'ui')
  excludeComponents?: string[]  // Components to exclude from monitoring
  includeComponents?: string[]  // Only monitor these components (overrides exclude)
  logToTable?: boolean          // Use console.table for output (default: false)
  batchLogs?: boolean           // Group console logs by component (default: true)
  batchWindow?: number          // Delay in ms before flushing batched logs (default: 500)
  onRenderTracked?: (data: RenderEventData) => void   // Custom callback for tracked events
  onRenderTriggered?: (data: RenderEventData) => void // Custom callback for triggered events
  customLogger?: Logger         // Custom logger implementation (overrides logger option)
}

Development setup

# Initialize husky hooks and install dependencies
npm run init
# Start watch mode
npm run dev

Bug reports & feature requests

Feel free to submit github issue here and use appropriate labels (bug-report/feature-request).

Check if a similar issue already exists before submitting.

License

MIT License - see LICENSE file for details