vue3-render-paint-flashing

It’s important to note that the Render Paint Flashing Plugin is designed to work exclusively in Vue development mode.

A Vue 3 plugin that enhances component development by visually indicating re-renders on the screen. The Render Paint Flashing Plugin highlights components that are being re-rendered during the development process. It is a helpful tool for identifying performance bottlenecks and optimizing your Vue applications.

Motivation

Inspired by the Chrome DevTools Rendering paint flashing panel, the Render Paint Flashing Plugin aims to optimize performance in Vue applications. By visually highlighting re-rendered components, developers gain valuable insights into potential performance bottlenecks.

API

createRenderPaintFlashingPlugin()

The createRenderPaintFlashingPlugin function is the main entry point for using the Render Paint Flashing Plugin. It returns a Vue plugin object that can be installed in your Vue 3 application.

import { createApp } from 'vue';

const app = createApp(...);

if (process.env.NODE_ENV === 'development') {
  import('vue3-render-paint-flashing').then(({ createRenderPaintFlashingPlugin }) => {
    app.use(createRenderPaintFlashingPlugin());
  });
}

app.mount('#app');

Plugin Options

| Name | Description | Default | | ------------------------- | ----------------------------------------------------------------------------------- | ------------------------------------ | | startImmediately | Determines whether the plugin should start immediately upon installation. | true | | toggleOnOffKeybordProps | Keyboard event properties used to toggle the plugin on and off. | { shiftKey: true, key: 'T' } | | canvasIdentifier | Identifier for the canvas element used to display the render paint flashing effect. | 'vue3_rendering_canvas_identifier' | | uuidIdentifier | Identifier for uniquely identifying components during the flashing effect. | 'vue3_rendering_uuid_identifier' | | color | The color used for highlighting re-rendered components. | 'green' | | zIndex | The CSS z-index value for the canvas element. | '9999' |