Vue Component Debug

Adds HTML comments to the start and end of each Vue component, so you can more easily keep track of what's being used.

Why not just use Vue Devtools? This makes it easier to debug in the DOM without needing to context-switch to Vue devtools.

Inspired by the laravel-view-debug package by my colleague Jason Varga

Example

You may have a Vue component which looks like this:

<div>
    My component file!

    <SubComponent>Click me!</SubComponent>
        
    More stuff
</div>

It will be rendered like this:

<!-- Start component: src/components/MyComponent.vue -->
<div>
    My component file

    <!-- Start component: src/components/SubComponent.vue -->
    <div>Sub component</div>
    <!-- End component: src/components/SubComponent.vue -->

    More stuff
</div>
<!-- End component: src/components/MyComponent.vue -->

Of course, since they are HTML comments, it will look no different unless you view the source.

Installation

You can install the package via npm:

npm install vue-component-debug --save-dev

Usage

To enable it, add the VueComponentDebug plugin to your Vue application. This can be done in your main entry file (e.g., main.js or main.ts):

import { createApp } from 'vue';
import VueComponentDebug from 'vue-component-debug';
import App from './App.vue';

const app = createApp(App);

app.use(VueComponentDebug);

app.mount('#app');

By default, comments will always be outputted while in development mode and removed in production mode. However, you're welcome to override this behavior by passing an enabled option to the plugin:

app.use(VueComponentDebug, { enabled: false });

Development

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview