💡
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__vue__) - the attribute name to use when adding DOM hintsshowDevtiptrue) - whether to show the dev tip in the console when loaded
69 Jul 22, 2022
31 Dec 14, 2022
533 Dec 15, 2022
28 Nov 9, 2022
7 Jun 5, 2021
0 Nov 8, 2018
241 Dec 12, 2022
284 Jan 6, 2023
0 Dec 19, 2021
1 Aug 16, 2022
143 Nov 19, 2022
11 May 7, 2022
158 Nov 24, 2022
180 Jan 8, 2023
0 Jul 10, 2020
16.2k Jan 7, 2023
20 Feb 24, 2021
49 Nov 24, 2022
23 Jul 29, 2022
119 Oct 13, 2022
0 Oct 21, 2021
26 Nov 15, 2022
43 Dec 1, 2022
4 Jul 1, 2019
22 Feb 28, 2022