A Vue 3 plugin that adds HTML comments around components for easier debugging
npm install vue-component-debugAdds 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
You may have a Vue component which looks like this:
`` vue`
My component file!
More stuff
It will be rendered like this:
` More stuffhtml`
My component file
Sub component
Of course, since they are HTML comments, it will look no different unless you view the source.
You can install the package via npm:
`bash`
npm install vue-component-debug --save-dev
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):
`javascript
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:
`javascript`
app.use(VueComponentDebug, { enabled: false });
`bashInstall dependencies
npm install