vdh

vue-dom-hints

Vue devtool for identifying Vue components and their SFC paths in the DOM

Showing:

Popularity

Downloads/wk

11

GitHub Stars

12

Maintenance

Last Commit

9mos ago

Contributors

0

Package

Dependencies

0

Size (min+gzip)

0.6KB

License

MIT

Type Definitions

Tree-Shakeable

Yes?

Categories

Readme

💡 vue-dom-hints



A Vue devtool that adds dev hints in the DOM via __vue__ attribute
Instantly identify all Vue components in the DOM and where they're located in your codebase

🙋‍♀️ Why?

  • 🌟 Browser agnostic Minimal alternative to Vue.js devtools!
  • 🕵️‍♀️ No more guessing Easily identify Vue components just by inspecting the DOM!
  • 🔥 Faster debugging Quickly determine the SFC path and start debugging!

⚡️ Pro tip: In Chrome DevTools, inspect an element with the hint attribute and enter $0.__vue__ in the console to dive into the view model and inspect the state.

🚀 Install

npm i vue-dom-hints

🚦 Setup

Install it to Vue as a plugin:

import DomHints from 'vue-dom-hints'

Vue.use(DomHints)

Disable it for production in your build:

if (process.env.NODE_ENV !== 'production') {
  Vue.use(DomHints)
}

Pass in options:

Vue.use(DomHints, {
  attributeName: 'hint'
})

⚙️ Options

  • attributeName <String> (__vue__) - the attribute name to use when adding DOM hints
  • showDevtip <Boolean> (true) - whether to show the dev tip in the console when loaded

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100