Nocturnal Pumpkin Maelstrom

    vue-dom-hints

    1.2.0 • Public • Published

    💡 vue-dom-hints



    A Vue devtool that gives dev hints in the DOM
    Attach __vue__ attributes to each component root element to hint at the source path

    🙋 Why?

    • 🌟 Minimal alternative to Vue.js devtools!
    • 🕵️‍♀️ Easily identify Vue components while inspecting the DOM!
    • 🔥 Quickly identify where the Vue component is located!
    • 🐣 Tiny! 401 B gzipped

    ⚡️ Tip

    In Chrome DevTools, inspect/select an element with the hint attribute and enter $0.__vue__ in the console. You can dive into the view model to 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

    Install

    npm i vue-dom-hints

    DownloadsWeekly Downloads

    19

    Version

    1.2.0

    License

    MIT

    Unpacked Size

    6.39 kB

    Total Files

    5

    Last publish

    Collaborators

    • hirokiosame