You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Vue devtools provide an easy way to inspect component state. But when having something like a composable, you actually need to catch all the returned values in order for them to show up in the devtools. This is where this package can come in handy.
4
+
5
+
## Features
6
+
7
+
- Debug composables and reactive state easily
8
+
- Tree-shakable with zero runtime overhead
9
+
- Simple API: just call `debug(name, state)`
10
+
11
+
## Quick start
12
+
13
+
```bash
14
+
pnpm add -D @vingy/vuebugger
15
+
```
16
+
17
+
Register the plugin in your app:
18
+
19
+
```ts
20
+
importVuebuggerfrom'@vingy/vuebugger'
21
+
22
+
createApp(App).use(Vuebugger)
23
+
```
24
+
25
+
## Usage
26
+
27
+
`debug()` registers values from composables so they show up in Vue Devtools.
28
+
29
+
```ts
30
+
import { debug } from'@vingy/vuebugger'
31
+
32
+
exportconst useFoo = (initial:number) => {
33
+
const multiplier =ref(1) // not easy to debug if something goes wrong
34
+
35
+
const inc = () =>multiplier.value++
36
+
const dec = () =>multiplier.value--
37
+
38
+
const value =computed(() =>initial*multiplier)
39
+
40
+
debug('useFoo', { multiplier }) // now visible in devtools
41
+
42
+
return { value, inc, dec }
43
+
}
44
+
```
45
+
46
+
See the demo app in [demo/](demo).
47
+
48
+
> **Note:** This plugin is tree-shakable and has zero runtime overhead when `debug()` calls are not used.
0 commit comments