Devtools
A custom Vue Devtools inspector and timeline, built on the shared engine cache — so it shows every live useStorage() instance regardless of whether it was created from Vue or from the React hook.
- Inspector: key, target, current value,
isReady,expiry,canUndo/canRedo, and error state — refreshed roughly once a second so cross-tab or TTL-driven changes show up without a manual refresh. - Timeline: logs
write,expire,migrate,sync-received, anderrorevents as they happen, so you can see when and why a value changed, not just its current snapshot.
Opt-in: call setupDevtools(app) from the /devtools entry point once, wherever you create your app.
ts
import { createApp } from 'vue'
import { setupDevtools } from 'vue-storage-kit/devtools'
import App from './App.vue'
const app = createApp(App)
setupDevtools(app)
app.mount('#app')It's safe to call unconditionally — setupDevtools (and the @vue/devtools-api it wraps) no-ops when no devtools client is connected, so calling it in production has no effect beyond the (tiny) added code. If you'd rather strip it entirely from production bundles, gate the call and the import behind your own dev-mode check:
ts
if (import.meta.env.DEV) {
const { setupDevtools } = await import('vue-storage-kit/devtools')
setupDevtools(app)
}