---
title: "Why nuxt-convex"
description: "What nuxt-convex and vue-convex add over using convex/browser directly, and how they relate to other community Vue and Nuxt integrations for Convex."
canonical_url: "https://nuxt-convex.onmax.me/getting-started/why-nuxt-convex"
---
# Why nuxt-convex

> What nuxt-convex and vue-convex add over using convex/browser directly, and how they relate to other community Vue and Nuxt integrations for Convex.

Convex ships an official React client. For Vue and Nuxt, you either use the framework-agnostic `convex/browser` client yourself or pick a community integration. This page lays out what each option gives you, so you can choose.

## Using `convex/browser` directly

`convex/browser` exports `ConvexClient` (WebSocket subscriptions, mutations, actions, auth) and `ConvexHttpClient` (one-off HTTP calls). They work in any Vue app:

```ts
import { ConvexClient } from 'convex/browser'
import { onScopeDispose, shallowRef } from 'vue'
import { api } from '../convex/_generated/api'

const client = new ConvexClient(import.meta.env.VITE_CONVEX_URL)
const tasks = shallowRef()
const unsubscribe = client.onUpdate(api.tasks.list, {}, value => (tasks.value = value))
onScopeDispose(unsubscribe)
```

That's enough for a small client-only app. What you'd write yourself as the app grows is what these packages provide:

<table>
<thead>
  <tr>
    <th>
      
    </th>
    
    <th>
      <code>
        convex/browser
      </code>
    </th>
    
    <th>
      <code>
        vue-convex
      </code>
    </th>
    
    <th>
      <code>
        nuxt-convex
      </code>
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      Reactive query state (<code>
        data
      </code>
      
      , <code>
        error
      </code>
      
      , <code>
        status
      </code>
      
      )
    </td>
    
    <td>
      write it
    </td>
    
    <td>
      yes
    </td>
    
    <td>
      yes
    </td>
  </tr>
  
  <tr>
    <td>
      Reactive args, <code>
        'skip'
      </code>
      
      , resubscribe only on real changes
    </td>
    
    <td>
      write it
    </td>
    
    <td>
      yes
    </td>
    
    <td>
      yes
    </td>
  </tr>
  
  <tr>
    <td>
      Pagination with page splitting, like <code>
        usePaginatedQuery
      </code>
    </td>
    
    <td>
      write it
    </td>
    
    <td>
      yes
    </td>
    
    <td>
      yes
    </td>
  </tr>
  
  <tr>
    <td>
      Pending state and errors for mutations and actions
    </td>
    
    <td>
      write it
    </td>
    
    <td>
      yes
    </td>
    
    <td>
      yes
    </td>
  </tr>
  
  <tr>
    <td>
      Uploads with progress, R2 uploads
    </td>
    
    <td>
      write it
    </td>
    
    <td>
      yes, storage
    </td>
    
    <td>
      yes, plus R2
    </td>
  </tr>
  
  <tr>
    <td>
      Awaitable queries that run during SSR
    </td>
    
    <td>
      no
    </td>
    
    <td>
      yes, with your own hydration adapter
    </td>
    
    <td>
      yes
    </td>
  </tr>
  
  <tr>
    <td>
      SSR results hydrated from the payload, then live
    </td>
    
    <td>
      no
    </td>
    
    <td>
      adapter
    </td>
    
    <td>
      built in
    </td>
  </tr>
  
  <tr>
    <td>
      Request's user on the server, token never sent to the client
    </td>
    
    <td>
      no
    </td>
    
    <td>
      <code>
        serverAuth
      </code>
      
       hook
    </td>
    
    <td>
      built in, Better Auth or <code>
        convex:token
      </code>
    </td>
  </tr>
  
  <tr>
    <td>
      Server route helpers mapping errors to HTTP
    </td>
    
    <td>
      no
    </td>
    
    <td>
      no
    </td>
    
    <td>
      yes
    </td>
  </tr>
  
  <tr>
    <td>
      Auto-imports, <code>
        #convex/api
      </code>
      
       alias, DevTools tab
    </td>
    
    <td>
      no
    </td>
    
    <td>
      no
    </td>
    
    <td>
      yes
    </td>
  </tr>
</tbody>
</table>

`vue-convex` follows the shape of Convex's React hooks (`useQuery`, `useMutation`, `usePaginatedQuery`) and keeps the raw clients one call away through [`vue-convex/advanced`](https://nuxt-convex.onmax.me/api-reference/use-convex-client).

## Other community packages

Other Vue and Nuxt integrations for Convex exist on npm. As of October 2026:

<table>
<thead>
  <tr>
    <th>
      Package
    </th>
    
    <th>
      Scope
    </th>
    
    <th>
      Latest version
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <a href="https://github.com/chris-visser/convex-vue" rel="nofollow">
        <code>
          convex-vue
        </code>
      </a>
    </td>
    
    <td>
      Vue composables
    </td>
    
    <td>
      0.1.5 (July 2025)
    </td>
  </tr>
  
  <tr>
    <td>
      <a href="https://github.com/chris-visser/convex-nuxt" rel="nofollow">
        <code>
          convex-nuxt
        </code>
      </a>
    </td>
    
    <td>
      Nuxt module, built on <code>
        convex-vue
      </code>
    </td>
    
    <td>
      0.1.5 (July 2025)
    </td>
  </tr>
  
  <tr>
    <td>
      <a href="https://github.com/altipla-consulting/convex-vue-query" rel="nofollow">
        <code>
          convex-vue-query
        </code>
      </a>
    </td>
    
    <td>
      <code>
        convex-vue
      </code>
      
       with TanStack Query
    </td>
    
    <td>
      0.1.2 (November 2025)
    </td>
  </tr>
  
  <tr>
    <td>
      <a href="https://github.com/loicpennequin/convex-vue" rel="nofollow">
        <code>
          @convex-vue/core
        </code>
      </a>
    </td>
    
    <td>
      Vue composables
    </td>
    
    <td>
      0.0.4 (March 2024)
    </td>
  </tr>
  
  <tr>
    <td>
      <a href="https://github.com/lupinum-dev/better-convex-nuxt" rel="nofollow">
        <code>
          better-convex-nuxt
        </code>
      </a>
    </td>
    
    <td>
      Nuxt module with SSR, auth and permissions
    </td>
    
    <td>
      0.5.0 (July 2026)
    </td>
  </tr>
  
  <tr>
    <td>
      <a href="https://github.com/lupinum-dev/better-convex" rel="nofollow">
        <code>
          @lupinum/better-convex-nuxt
        </code>
      </a>
    </td>
    
    <td>
      Nuxt module with SSR and Better Auth, from the same authors
    </td>
    
    <td>
      1.0.0-rc.0 (September 2026)
    </td>
  </tr>
</tbody>
</table>

Check each project's documentation for its current features: this table only lists what their package descriptions say, and they change faster than this page.

## When to pick `nuxt-convex`

- You build with Nuxt and want queries in the server HTML, live after hydration, without writing hydration code.
- You want server routes and SSR to run as the signed-in user, with Better Auth or your own provider, without exposing the token.
- You want the same composables in a plain Vue app, through `vue-convex`.

When you only need a client-side subscription or two, `convex/browser` on its own is a fine choice too.

## Next steps

- [Installation](https://nuxt-convex.onmax.me/getting-started/installation)
- [SSR & Hydration](https://nuxt-convex.onmax.me/nuxt-module/ssr-and-hydration)


## Sitemap

See the full [sitemap](https://nuxt-convex.onmax.me/sitemap.md) for all pages.