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.

Features

• 🎯 Works with both Vue 2 and Vue 3
• 🔄 Powered by vue-demi
• 📦 Lightweight
• 💪 Written in TypeScript

Installation

# npm
npm install z-vue-scan

# yarn
yarn add z-vue-scan

# pnpm
pnpm add z-vue-scan

Usage

interface Options {
  enable?: boolean
  hideCompnentName?: boolean
}

Vue 3

// vue3
import { createApp } from 'vue'
import VueScan, { type VueScanOptions } from 'z-vue-scan/src'

import App from './App.vue'

const app = createApp(App)
app.use<VueScanOptions>(VueScan, {})
app.mount('#app')

Vue 2

// vue2
import Vue from 'vue'
import VueScan, { type VueScanBaseOptions } from 'z-vue-scan/vue2'
import App from './App.vue'

Vue.use<VueScanBaseOptions>(VueScan, {})

new Vue({
  render: h => h(App),
}).$mount('#app')

Nuxt Module

# 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:

export default defineNuxtConfig({
  modules: ['z-vue-scan-nuxt-module'],
  vueScan: {
    // options
    enable: true,
    hideCompnentName: false
  }
})

Development

# 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 2024 zcf0508