Nuxt SSR & Hydration

Nuxt is the most opinionated integration path, so the package ships a dedicated module for it.

What the module solves

Without the module, you have to:

• create and register a QueryClient
• dehydrate it during server rendering
• hydrate it on the client
• ensure all pages and composables share the same cache instance

@elysia-vue-query/nuxt handles that wiring for you.

Install

bun add @elysia-vue-query/nuxt

Register it

nuxt.config.ts

export default defineNuxtConfig({
  modules: ['@elysia-vue-query/nuxt'],
})

Create helpers in a composable

composables/eden.ts

import { treaty } from '@elysiajs/eden'
import { createEdenQueryHelpers } from '@elysia-vue-query/vue'
import type { App } from '@playground/api'

const client = treaty<App>('http://localhost:3000')
export const eden = createEdenQueryHelpers(client)

Use queries in pages

pages/users.vue

<script setup lang="ts">
import { eden } from '~/composables/eden'

const users = eden.useQuery(eden.proxy.users.get)
const createUser = eden.useMutation(eden.proxy.users.post)
</script>

Why this avoids double fetching

On the server, Nuxt renders the page with a QueryClient that already contains prefetched results. The module dehydrates that cache into the Nuxt payload. On the client, it hydrates before the page re-runs the same query key, so TanStack can serve the cached entry.

When to still prefetch manually

Use eden.prefetch() when:

• a page must be fully rendered with data on first response
• you want SEO-sensitive content in the initial HTML
• you want to warm the cache for expensive requests

pages/posts.vue

<script setup lang="ts">
import { useQueryClient } from '@tanstack/vue-query'
import { eden } from '~/composables/eden'

const queryClient = useQueryClient()

if (import.meta.server) {
  await eden.prefetch(eden.proxy.posts.get, queryClient)
}

const posts = eden.useQuery(eden.proxy.posts.get)
</script>

Practical rule

For Nuxt, start with the module. Add manual prefetch() only to pages where first-render completeness matters.