vue-dev-debug 🔍

Beautiful JSON debug viewer component for Vue 3. Automatically hidden in production builds.

Features

• 🎨 Beautiful cyberpunk-inspired dark theme
• 🌳 Collapsible JSON tree view
• 🔍 Expand/Collapse all nodes
• 📋 Copy JSON to clipboard
• ↗️ Open in new window
• 🪟 Floating/draggable mode
• ⛶ Fullscreen mode
• 🚀 Auto-hidden in production (no runtime overhead)
• 📦 Zero dependencies (only Vue 3)

Installation

npm install vue-dev-debug

Usage

Option 1: Global Plugin (Recommended)

// main.ts
import { createApp } from 'vue'
import VueDevDebug from 'vue-dev-debug'
import 'vue-dev-debug/style.css'

const app = createApp(App)
app.use(VueDevDebug)
app.mount('#app')

Then use it anywhere in your templates:

<template>
  <DevDebug :data="myObject" />
</template>

Option 2: Local Import

<script setup lang="ts">
import { DevDebug } from 'vue-dev-debug'
import 'vue-dev-debug/style.css'

const user = {
  name: 'John Doe',
  email: '[email protected]',
  roles: ['admin', 'user'],
}
</script>

<template>
  <DevDebug :data="user" title="User Data" />
</template>

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | data | unknown | required | Data to display in the debug viewer | | title | string | 'Debug' | Title for the debug panel | | maxHeight | string | '300px' | Maximum height of content area | | collapsed | boolean | false | Start in collapsed state | | draggable | boolean | false | Enable floating/draggable mode | | forceShow | boolean | false | Force show in production (use with caution!) |

Auto Title Extraction

If you pass an object with a single key and no title, the key name becomes the title:

<!-- Title will be "userData" -->
<DevDebug :data="{ userData: user }" />

<!-- Same as -->
<DevDebug :data="user" title="userData" />

Plugin Options

app.use(VueDevDebug, {
  // Force show in production (not recommended)
  forceShow: false,
  
  // Custom component name
  componentName: 'Debug'
})

Styling

The component uses scoped CSS with a cyberpunk-inspired theme:

• 💜 Purple keys
• 💚 Green strings
• 💛 Yellow numbers
• 💗 Pink booleans
• ❌ Red nulls
• 🩵 Cyan values

All styles are isolated and won't affect your app.

Development Only

By default, DevDebug renders nothing in production builds. This is detected via import.meta.env.DEV (Vite).

To force rendering in production (for debugging purposes), use the forceShow prop:

<DevDebug :data="data" force-show />

Or globally via plugin options:

app.use(VueDevDebug, { forceShow: true })

Keyboard Shortcuts (when in fullscreen)

• Escape - Exit fullscreen

Browser Support

• Chrome / Edge (latest)
• Firefox (latest)
• Safari (latest)

License

MIT