Visual debugging plugin for Vue 3.
npm install @christianpasinrey/vue3-debug-data
component to display data anywhere in your app.
useDebug composable to emit debug data from anywhere.
bash
npm install @christianpasinrey/vue3-debug-data
`
Basic Usage
$3
`typescript
import { createApp } from 'vue';
import App from './App.vue';
import { DebugPlugin } from '@christianpasinrey/vue3-debug-data';
const app = createApp(App);
app.use(DebugPlugin); // You can pass options if you want
app.mount('#app');
`
$3
`vue
`
$3
`typescript
import { useDebug } from '@christianpasinrey/vue3-debug-data';
// In any function, setup, or composable:
useDebug({ foo: 'bar', user: { name: 'Ana' } });
`
Advanced Configuration
You can change the debug event name:
`typescript
app.use(DebugPlugin, { eventName: 'my-debug-event' });
`
API
$3
Global component to visualize emitted data.
$3
Composable to emit debug data.
$3
- eventName _(string)_: Custom event name to listen and emit data.
Full Example
`typescript
import { createApp } from 'vue';
import App from './App.vue';
import { DebugPlugin, useDebug } from '@christianpasinrey/vue3-debug-data';
const app = createApp(App);
app.use(DebugPlugin, { eventName: 'debug' });
app.mount('#app');
// Anywhere in your app:
useDebug({ foo: 'bar' });
``