# vite-plugin-vue-tracer

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

Latest version **1.5.0** (published 2026-08-10) · MIT license · 0 weekly downloads

## Install

```sh
npm install vite-plugin-vue-tracer
pnpm add vite-plugin-vue-tracer
yarn add vite-plugin-vue-tracer
bun add vite-plugin-vue-tracer
```

## Health

**Score 75/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; has provenance; recently updated; high maintenance score; high quality score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 1.5.0 |
| Published | 2026-08-10 |
| First published | 2025-03-03 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 5 |
| Unpacked size | 29.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 86 |
| Author | Anthony Fu <anthonyfu117@hotmail.com> |
| Maintainers | antfu |
| Keywords | vue, vite-plugin, devtools |

## Links

- npm: https://www.npmjs.com/package/vite-plugin-vue-tracer
- Repository: https://github.com/antfu/vite-plugin-vue-tracer
- Homepage: https://github.com/antfu/vite-plugin-vue-tracer#readme
- Issues: https://github.com/antfu/vite-plugin-vue-tracer/issues
- Funding: https://github.com/sponsors/antfu
- npm.io page: https://npm.io/package/vite-plugin-vue-tracer

## Dependencies (5)

- [pathe](https://npm.io/package/pathe.md) ^2.0.3
- [exsolve](https://npm.io/package/exsolve.md) ^1.1.1
- [magic-string](https://npm.io/package/magic-string.md) ^1.1.0
- [estree-walker](https://npm.io/package/estree-walker.md) ^3.0.3
- [source-map-js](https://npm.io/package/source-map-js.md) ^1.2.1

## Alternatives

- [raw-loader](https://npm.io/package/raw-loader.md) — 4.3M weekly downloads
- [plop](https://npm.io/package/plop.md) — 1.4M weekly downloads
- [webpack-deadcode-plugin](https://npm.io/package/webpack-deadcode-plugin.md) — 80.3K weekly downloads
- [@storybook/preact-vite](https://npm.io/package/@storybook/preact-vite.md) — 54.2K weekly downloads
- [vite-plugin-transform](https://npm.io/package/vite-plugin-transform.md) — 2.4K weekly downloads

## Recent versions

- 1.5.0 (latest) — 2026-08-10
- 1.4.0 — 2026-05-15
- 1.3.0 — 2026-03-13
- 1.2.0 — 2025-12-16
- 1.1.3 — 2025-11-08
- 1.1.2 — 2025-11-07
- 1.1.1 — 2025-11-06
- 1.1.0 — 2025-11-04
- 1.0.1 — 2025-09-24
- 1.0.0 — 2025-06-29
- 0.1.5 — 2025-06-29
- 0.1.4 — 2025-06-03
- 0.1.3 — 2025-03-26
- 0.1.2 — 2025-03-25
- 0.1.1 — 2025-03-06
- … 3 more at https://npm.io/package/vite-plugin-vue-tracer/versions

## README

# vite-plugin-vue-tracer

[![npm version][npm-version-src]][npm-version-href]
[![npm downloads][npm-downloads-src]][npm-downloads-href]
[![bundle][bundle-src]][bundle-href]
[![JSDocs][jsdocs-src]][jsdocs-href]
[![License][license-src]][license-href]

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`](https://www.npmjs.com/package/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

```bash
npm i -D vite-plugin-vue-tracer
```

```ts
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:

```ts
// 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.

```ts
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

<p align="center">
  <a href="https://cdn.jsdelivr.net/gh/antfu/static/sponsors.svg">
    <img src='https://cdn.jsdelivr.net/gh/antfu/static/sponsors.svg' alt='Sponsors' />
  </a>
</p>

## License

[MIT](./LICENSE) License © [Anthony Fu](https://github.com/antfu)

<!-- Badges -->

[npm-version-src]: https://img.shields.io/npm/v/vite-plugin-vue-tracer?style=flat&colorA=080f12&colorB=1fa669
[npm-version-href]: https://npmjs.com/package/vite-plugin-vue-tracer
[npm-downloads-src]: https://img.shields.io/npm/dm/vite-plugin-vue-tracer?style=flat&colorA=080f12&colorB=1fa669
[npm-downloads-href]: https://npmjs.com/package/vite-plugin-vue-tracer
[bundle-src]: https://img.shields.io/bundlephobia/minzip/vite-plugin-vue-tracer?style=flat&colorA=080f12&colorB=1fa669&label=minzip
[bundle-href]: https://bundlephobia.com/result?p=vite-plugin-vue-tracer
[license-src]: https://img.shields.io/github/license/antfu/vite-plugin-vue-tracer.svg?style=flat&colorA=080f12&colorB=1fa669
[license-href]: https://github.com/antfu/vite-plugin-vue-tracer/blob/main/LICENSE
[jsdocs-src]: https://img.shields.io/badge/jsdocs-reference-080f12?style=flat&colorA=080f12&colorB=1fa669
[jsdocs-href]: https://www.jsdocs.io/package/vite-plugin-vue-tracer

---
_Source: https://npm.io/package/vite-plugin-vue-tracer · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._