Vue/Nuxt shared liveQuery composables for Dexie

[Nessiahs]

Hi everyone,

while building larger Vue and Nuxt apps with Dexie, we noticed that multiple components often ended up creating their own liveQuery subscriptions for the same IndexedDB state.

Dexie already has excellent React support with dexie-react-hooks, but we could not find a dedicated shared subscription pattern for Vue/Nuxt around liveQuery.

So we built dexie-reactive.

The package introduces a small producer/consumer model for Dexie live queries:

• one component owns the real Dexie subscription
• other components subscribe to the same reactive state by key
• no duplicate liveQuery subscriptions for shared state
• SSR-safe client behavior for Nuxt
• IndexedDB-backed reactive shared state

The goal was to stay very close to native Dexie patterns while making shared reactive state easier to manage in Vue applications.

Live Demo

https://stackblitz.com/~/github.com/Nessiahs/dexie-reactive-playground?file=.env

npm

https://www.npmjs.com/package/dexie-reactive

GitHub

https://github.com/Nessiahs/dexie-reactive

Would love feedback from the Dexie community:

• Does this solve a real gap for Vue/Nuxt users?
• Would you structure the integration differently?
• Are there existing Dexie patterns we should align with more closely?

Thanks for building Dexie — this project would not exist without it.

[Nessiahs]

Update: this lifecycle model has since been clarified further. Active consumers now re-wait with their last snapshot when their producer is cleaned up and reattach when a replacement producer registers the same key. See my follow-up comment below for the current behavior.

---

Small follow-up: we tightened the producer/consumer semantics after testing the shared subscription model more deeply.

useLiveQuery() is now the only owner of the real Dexie liveQuery(...).subscribe(...) lifecycle for a key.

useLiveQuerySubscription(key) still consumes the shared reactive state, but its stop() / restart() controls are now local to that consumer instance:

• consumer stop() detaches only that consumer and keeps a snapshot
• producer and other consumers continue receiving Dexie updates
• consumer restart() reattaches to the current shared state
• consumers never create, stop, or restart the Dexie liveQuery subscription

This made the Vue/Nuxt wrapper align better with native Dexie ownership: the actual Dexie subscription has a single owner, while consumers are only views over the shared state.

Updated package/demo:

• npm: https://www.npmjs.com/package/dexie-reactive
• demo: https://stackblitz.com/~/github.com/Nessiahs/dexie-reactive-playground
• repo: https://github.com/Nessiahs/dexie-reactive

Still interested in feedback from Dexie users on whether this producer/consumer split feels like the right abstraction around liveQuery() for Vue/Nuxt.

[Nessiahs]

Another update after refining the lifecycle around page-level producers and longer-lived consumers:

The wrapper now supports consumer reattach after producer cleanup while keeping Dexie subscription ownership explicit.

Current model:

• useLiveQuery(queryFn, { key }) remains the only owner of the Dexie liveQuery subscription.
• useLiveQuerySubscription(key) remains key-only and never creates a Dexie subscription.
• If a producer is unmounted, active consumers keep their last data snapshot and move back to waiting for the same key.
• When a replacement producer registers the same key, waiting consumers attach synchronously to the new shared state and receive future Dexie updates again.
• Manually stopped consumers do not auto-reattach; they only rejoin if their own restart() is called.

The intent is to support Vue/Nuxt layouts or components that can outlive a page-level producer without turning consumers into hidden Dexie subscription owners.

We documented the decision and lifecycle here:

• ADR: https://github.com/Nessiahs/dexie-reactive/blob/main/docs/adr/0001-consumer-lifecycle-after-producer-cleanup.md
• Lifecycle guide: https://github.com/Nessiahs/dexie-reactive/blob/main/docs/live-query-lifecycle.md
• Implementation PR: feat: reattach consumers after producer cleanup Nessiahs/dexie-reactive#84

This keeps the abstraction close to Dexie: one explicit liveQuery owner, with keyed Vue consumers as reactive views over that owner.