@taijased/vue-render-tracker NPM

Vue Render Tracker

Vue Render Tracker is a Vue 3 library that helps developers track component renders in their applications. It provides an easy way to visualize and log rendering performance to help optimize your app.

Installation

Install the library using npm:

npm install @taijased/vue-render-tracker

Usage

Here is how you can use VueRenderTracker in your Vue 3 application:

import {createApp} from "vue";
import {VueScanPlugin} from "@taijased/vue-render-tracker";
import App from "./App.vue";

const app = createApp(App);

const vueScan = new VueScanPlugin({
    enabled: true, // Enable or disable the tracker
    showOverlay: true, // Show overlay to visualize renders
    log: false, // Log render events to the console
    playSound: false, // Play sound on each render
});

app.use(vueScan);
app.mount("#app");

Options

enabled: boolean (default: true)
- Enable or disable the render tracker.
showOverlay: boolean (default: true)
- Show a visual overlay to track render events.
log: boolean (default: false)
- Log render events to the console.
playSound: boolean (default: false)
- Play a sound on every render event.

Example

Basic App.vue

<template>
    <div id="app">
        <h1>Vue Render Tracker Example</h1>
        <button @click="updateCounter">Click Me</button>
        <p>Counter: {{ counter }}</p>
    </div>
</template>

<script>
export default {
    data() {
        return {
            counter: 0,
        };
    },
    methods: {
        updateCounter() {
            this.counter++;
        },
    },
};
</script>

When the button is clicked, the overlay will highlight renders, helping you understand when and where renders occur in your application.

Development

If you want to contribute or debug the library locally:

Clone the repository:

git clone https://github.com/taijased/vue-render-tracker.git
cd vue-render-tracker

Install dependencies:
```
npm install
```
Build the library:
```
npm run build
```
Link the library locally:
```
npm link
```
Use the library in another project:
```
npm link @taijased/vue-render-tracker
```