https://github.com/zcf0508/vue-scan
Flashing when components updating to troubleshoot performance issues.
https://github.com/zcf0508/vue-scan
javascript vue
Last synced: 7 days ago
JSON representation
Flashing when components updating to troubleshoot performance issues.
- Host: GitHub
- URL: https://github.com/zcf0508/vue-scan
- Owner: zcf0508
- Created: 2024-11-26T08:21:27.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2026-03-13T11:01:01.000Z (26 days ago)
- Last Synced: 2026-03-13T22:59:59.412Z (26 days ago)
- Topics: javascript, vue
- Language: TypeScript
- Homepage: https://discord.gg/Xdam3NGdH5
- Size: 363 KB
- Stars: 272
- Watchers: 4
- Forks: 11
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
Awesome Lists containing this project
README
# z-vue-scan
A Vue scanning plugin that works with both Vue 2 and Vue 3. The component will flash with a red border when it will update.
[](https://www.npmjs.com/package/z-vue-scan)
## Features
- 🎯 Works with both Vue 2 and Vue 3
- 🔄 Powered by [vue-demi](https://github.com/vueuse/vue-demi)
- 📦 Lightweight
- 💪 Written in TypeScript
## Installation
```bash
# npm
npm install z-vue-scan
# yarn
yarn add z-vue-scan
# pnpm
pnpm add z-vue-scan
```
## Usage
```ts
interface Options {
enable?: boolean
hideCompnentName?: boolean
}
```
### Vue 3
```ts
// vue3
import { createApp } from 'vue'
import VueScan, { type VueScanOptions } from 'z-vue-scan'
import App from './App.vue'
const isProduction = import.meta.env.PROD // or `process.env.NODE_ENV === 'production'`
const app = createApp(App)
if (!isProduction) {
app.use(VueScan, {})
}
app.mount('#app')
```
### Vue 2
```ts
// vue2
import Vue from 'vue'
import VueScan, { type VueScanBaseOptions } from 'z-vue-scan/vue2'
import App from './App.vue'
const isProduction = import.meta.env.PROD // or `process.env.NODE_ENV === 'production'`
if (!isProduction) {
Vue.use(VueScan, {})
}
new Vue({
render: h => h(App),
}).$mount('#app')
```
### Nuxt Module
```bash
# npm
npm install z-vue-scan-nuxt-module
# yarn
yarn add z-vue-scan-nuxt-module
# pnpm
pnpm add z-vue-scan-nuxt-module
```
You can use z-vue-scan in your Nuxt project by adding it to the `modules` section in your `nuxt.config.ts`:
```ts
export default defineNuxtConfig({
modules: ['z-vue-scan-nuxt-module'],
vueScan: {
// options
enable: true,
hideCompnentName: false
}
})
```
### DevPilot Plugin (MCP for LLMs)
```bash
pnpm add unplugin-devpilot devpilot-plugin-vue-scan -D
```
The [DevPilot plugin](./packages/devpilot-plugin-vue-scan) exposes Vue component render performance data to LLMs via MCP. It tracks component re-renders in real time and provides a `queryVueScanData` tool that returns per-component aggregated summaries with source code locations — enabling LLMs to analyze render performance and pinpoint issues.
See [devpilot-plugin-vue-scan README](./packages/devpilot-plugin-vue-scan/README.md) for details.
## Development
```bash
# Install dependencies
pnpm install
# Run development server with Vue 3 example
pnpm dev
# Run development server with Vue 2 example
pnpm dev:vue2
# Build the package
pnpm build
# Run type check
pnpm typecheck
# Run linting
pnpm lint
```
## License
[MIT](./LICENSE) License 2024 [zcf0508](https://github.com/zcf0508)