vite-plugin-vue-tracer

vite-plugin-vue-tracer

Tracer for the source code of elements and vdoms in Vue SFC.

This is a designed to be a replacement of vite-plugin-vue-inspector with a new approach, that utilize Vite's internal source map to resolve the source location, without injecting data-attributes to the DOM.

This plugin is also designed to be more modular, where you can use it as a standalone inspector plugin, or as a headless APIs to build your own inspector.

Usage

npm i -D vite-plugin-vue-tracer

import { defineConfig } from 'vite'
import { VueTracer } from 'vite-plugin-vue-tracer'

export default defineConfig({
  plugins: [
    VueTracer(),
  ],
})

In the your entry file, add the following code:

// Only apply in development
if (import.meta.hot) {
  import('vite-plugin-vue-tracer/client/overlay').then(({ events, state }) => {
    // Enables the overlay
    state.isEnabled = true

    events.on('hover', (info) => {
      // ...
    })

    events.on('click', (info) => {
      // ...
      openInEditor(info.fullpath) // 'src/app.vue:10:1'
      state.isEnabled = false
    })
  })
}

Of if you want headless APIs, import vite-plugin-vue-tracer/client/record instead.

if (import.meta.hot) {
  import('vite-plugin-vue-tracer/client/record')
    .then(({
      hasData,
      findTraceFromElement,
      findraceFromVNode,
      findTraceAtPointer,
    }) => {
      const el = document.querySelector('.foo')
      const trace = findTraceFromElement(el)
      if (trace) {
        console.log(trace)
      }
    })
}

References

Exports

• vite-plugin-vue-tracer - The Vite plugin entry, should be used in vite.config.ts
• vite-plugin-vue-tracer/client/record - The client entry for recording the trace data, this will be automatically injected into each component by the plugin. You don't normally need to import this.
• vite-plugin-vue-tracer/client/listener - The client entry for adding event listeners to the DOM and listening to the mouse events. It expose a ref isEnabled to control if the listeners are active. A events object is exposed for listening to those events. This entry is purely headless, does not come with any UI or styling.
• vite-plugin-vue-tracer/client/overlay - The builtin overlay UI for easier to use. A reactive state object is exposed to control the overlay's state. If you want to build your own UI, you can use the listener entry instead.

Sponsors

License

MIT License Anthony Fu