Typed server state forVue and Nuxt.
Wrap your Eden Treaty client once. Get deterministic query keys, automatic cache invalidation, and SSR hydration — all fully typed end-to-end.
bun add @elysia-vue-query/vue @tanstack/vue-query Auto Query Keys
Stable, deterministic keys derived straight from your route structure. No string arrays, no typos, no missing invalidations.
Smart Invalidation
Mutations automatically invalidate the full route subtree. A POST /users invalidates every cached GET /users/** entry.
SSR Hydration
Nuxt module dehydrates TanStack state on the server and re-hydrates it on the client before any query runs. Zero loading flicker.
End-to-End Types
Response types flow from your Elysia route definitions into every useQuery return. Rename a field on the server — TypeScript catches it in the component.
Reactive Params
Pass Vue refs as query params. The query key updates and the cache re-fetches automatically — no watchers, no manual invalidation.
Zero Config
One call to createEdenQueryHelpers is the entire setup. No stores, no schemas, no code generation.
How it works
A transparent proxy records your route access and method at runtime, then stamps a deterministic key onto the TanStack cache.
Proxy access
Accessing eden.proxy.users.get records the segments into a RouteMeta attached via symbol.
Key derivation
buildQueryKey serializes the meta with sorted keys, producing a stable TanStack query key array.
Cache + invalidation
TanStack caches by key. On mutation, we return the route prefix, letting TanStack invalidate the entire subtree.
Three lines. Fully typed.
This is the entire surface area of the library for most use cases.
// Derive query key, fetch, and cache — all typed from your Elysia App type
const { data: users } = eden.useQuery(eden.proxy.users.get)
// Mutation that auto-invalidates every GET /users/** cache entry
const create = eden.useMutation(eden.proxy.users.post)
// Request body is typed — compile error if you pass the wrong shape
create.mutate({ name: 'Alice', email: 'alice@example.com' })Three focused packages
Install only what you need.
Core
Proxy engine, key builders, stable serialization. Framework-agnostic — the foundation every other package builds on.
Vue
All composables: useQuery, useMutation, prefetch. The package you import in components.
Nuxt
Zero-config Nuxt module. Dehydrates the QueryClient on the server, hydrates it on the client. No double-fetch.
Ready to start?
Full installation guide, API reference, and live playground.