@christianpasinrey/vue3-debug-data

> A visual debugging plugin for Vue 3, ideal for real-time data development and debugging.

Features

- Elegant and collapsible visualization of any object or array.
- Global component to display data anywhere in your app.
- useDebug composable to emit debug data from anywhere.
- Easy event name configuration.
- 100% TypeScript and easy to integrate.

Installation

``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' });
``

---

License

MIT