Better Convex Nuxt

Better Convex Nuxt coordinates the parts that sit between Nuxt and Convex: server rendering, payload hydration, live subscriptions, authentication changes, and Nitro server calls.

You keep writing Convex functions. The module makes them behave like Nuxt data sources.

<script setup lang="ts">
import { api } from '#convex/api'

const { data: posts, status, error } = await useConvexQuery(api.posts.list, {})
</script>

<template>
  <p v-if="status === 'pending'">Loading posts…</p>
  <p v-else-if="error">Could not load posts.</p>
  <PostList v-else :posts="posts ?? []" />
</template>

That one composable has one continuous lifecycle:

Nuxt request
  → Convex query over HTTP
  → rendered HTML and Nuxt payload
  → Vue hydration
  → Convex WebSocket subscription
  → live updates

The initial page can contain real data. After hydration, the same Vue ref stays current when Convex publishes a new result.

What the module adds

• SSR-first queries with Nuxt payload reuse
• Live query subscriptions after hydration
• Reactive arguments, pagination, transforms, and stale-state handling
• Stateful mutations and actions with throwing and safe call styles
• Optimistic helpers for regular and paginated queries
• Better Auth integration with SSR state and identity isolation
• Request-scoped Convex calls from Nitro handlers
• File uploads, queues, connection state, logging, and DevTools

What it does not own

Better Convex Nuxt does not replace Convex, Better Auth, or your application policy.

Authorization still belongs in Convex functions. Hiding a button or redirecting a route improves UX; it does not secure data.

Start from the question you have

• Why use the module?
• Understand the runtime model
• Choose a setup path
• Compare the Nuxt integrations
• Read the limitations first