---
title: "convexVue"
description: "Reference for the vue-convex plugin and its options, including the SSR hydration adapter and server auth."
canonical_url: "https://nuxt-convex.onmax.me/api-reference/convex-vue"
---
# convexVue

> Reference for the vue-convex plugin and its options, including the SSR hydration adapter and server auth.

`convexVue` is the Vue plugin that creates the Convex runtime every composable reads from. `nuxt-convex` installs it for you from your module options, so in Nuxt you never call it.

## Import

```ts [Vue]
import { convexVue } from 'vue-convex'
```

## Usage

```ts [src/main.ts]
import { createApp } from 'vue'
import { convexVue } from 'vue-convex'
import App from './App.vue'

createApp(App)
  .use(convexVue, { url: import.meta.env.VITE_CONVEX_URL })
  .mount('#app')
```

## Options

```ts
interface ConvexVueOptions {
  url?: string
  clientOptions?: ConvexClientOptions
  server?: boolean
  hydration?: ConvexHydrationAdapter
  serverAuth?: ConvexServerAuth
  initialAuth?: { isAuthenticated: boolean }
}
```

<table>
<thead>
  <tr>
    <th>
      Option
    </th>
    
    <th>
      Default
    </th>
    
    <th>
      Meaning
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        url
      </code>
    </td>
    
    <td>
      
    </td>
    
    <td>
      Convex deployment URL. Without it the runtime starts disconnected; connect later with the <a href="https://nuxt-convex.onmax.me/api-reference/use-convex-controller">
        controller
      </a>
      
      .
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        clientOptions
      </code>
    </td>
    
    <td>
      
    </td>
    
    <td>
      Passed to the browser <code>
        ConvexClient
      </code>
      
       (<code>
        convex/browser
      </code>
      
      ). <code>
        logger
      </code>
      
       and <code>
        skipConvexDeploymentUrlCheck
      </code>
      
       also reach the HTTP client.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        server
      </code>
    </td>
    
    <td>
      <code>
        true
      </code>
    </td>
    
    <td>
      Run awaited queries during SSR. Each query can override it with its <code>
        server
      </code>
      
       option.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        hydration
      </code>
    </td>
    
    <td>
      
    </td>
    
    <td>
      Hands SSR results to the client. Without it the client starts empty and loads every query over the WebSocket.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        serverAuth
      </code>
    </td>
    
    <td>
      
    </td>
    
    <td>
      Server only: <code>
        { getToken }
      </code>
      
       returns the request's JWT. It's called at most once per app instance and never serialized.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        initialAuth
      </code>
    </td>
    
    <td>
      
    </td>
    
    <td>
      Auth state known before the client connects, usually from SSR, so the auth components render and hydrate without flipping.
    </td>
  </tr>
</tbody>
</table>

## Hydration adapter

```ts
interface ConvexHydrationAdapter {
  /** Server: record a settled query */
  set: (key: string, entry: ConvexHydrationEntry) => void
  /** Client: read a settled query. Only called while isHydrating() is true */
  get: (key: string) => ConvexHydrationEntry | undefined
  isHydrating: () => boolean
}

type ConvexHydrationEntry
  = | { v: JSONValue }
    | { e: { message: string, data?: JSONValue } }
```

Entries are plain JSON: values go through `convexToJson`, so `bigint` and `ArrayBuffer` survive, and a `ConvexError` keeps its `data`. Serialize them into your HTML on the server, read them back on the client, and return `false` from `isHydrating()` once the app has mounted. In Nuxt, the module stores them in the payload. See [Server Rendering](https://nuxt-convex.onmax.me/vue-guide/server-rendering) for a plain Vue setup.

## Related pages

- [Installation](https://nuxt-convex.onmax.me/vue-guide/installation)
- [Server Rendering](https://nuxt-convex.onmax.me/vue-guide/server-rendering)
- [useConvexController](https://nuxt-convex.onmax.me/api-reference/use-convex-controller)


## Sitemap

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