---
title: "server"
description: "Helpers for integrating Convex into Nuxt applications using server rendering — generated TypeScript API reference for nuxt-convex-module/server."
canonical_url: "https://nuxt-convex-module.dev/api-reference/reference/server"
---
# server

Helpers for integrating Convex into Nuxt applications using server rendering.

This module contains:

1. [preloadQuery](#preloadquery), for preloading data for reactive client components.
2. [fetchQuery](#fetchquery), [fetchMutation](#fetchmutation) and [fetchAction](#fetchaction) for loading and mutating Convex data
from Nuxt server routes, API handlers, and middleware.

## Usage

All exported functions assume that a Convex deployment URL is configured —
`convex.url` in `nuxt.config`, `NUXT_PUBLIC_CONVEX_URL`, or the `CONVEX_URL`
that `npx convex dev` writes to `.env.local`. Unlike its Next counterpart,
`npx convex dev` does *not* set the framework-prefixed name for Nuxt: the
Convex CLI has no Nuxt case in its framework detection, so it writes the
unprefixed `CONVEX_URL`, which the module reads too.

### Preloading data

Preload data inside a server route:

```typescript
// server/api/tasks.get.ts
export default defineEventHandler(async () => {
  return await preloadQuery(api.foo.baz)
})
```

And pass it to a client component:

```vue
<script setup lang="ts">
const props = defineProps<{
  preloaded: Preloaded<typeof api.foo.baz>
}>()

const data = usePreloadedQuery(props.preloaded)
// render `data`...
</script>
```

## Type Aliases

### NuxtOptions

```ts
type NuxtOptions = {
  token?: string;
  url?: string;
  skipConvexDeploymentUrlCheck?: boolean;
};
```

Defined in: [src/runtime/nuxt/index.ts:61](https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/nuxt/index.ts#L61)

Options to [preloadQuery](#preloadquery), [fetchQuery](#fetchquery), [fetchMutation](#fetchmutation) and [fetchAction](#fetchaction).

#### Properties

<table>
<thead>
  <tr>
    <th>
      Property
    </th>
    
    <th>
      Type
    </th>
    
    <th>
      Description
    </th>
    
    <th>
      Defined in
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <a id="token">
        
      </a>
      
       <code>
        token?
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      The JWT-encoded OpenID Connect authentication token to use for the function call.
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/nuxt/index.ts#L65" rel="nofollow">
        src/runtime/nuxt/index.ts:65
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="url">
        
      </a>
      
       <code>
        url?
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      The URL of the Convex deployment to use for the function call. Defaults to <code>
        runtimeConfig.public.convex.url
      </code>
      
      , then to <code>
        process.env.NUXT_PUBLIC_CONVEX_URL
      </code>
      
      , if not provided. Explicitly passing undefined here (such as from missing ENV variables) will throw an error in the future.
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/nuxt/index.ts#L73" rel="nofollow">
        src/runtime/nuxt/index.ts:73
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="skipconvexdeploymenturlcheck">
        
      </a>
      
       <code>
        skipConvexDeploymentUrlCheck?
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      Skip validating that the Convex deployment URL looks like <code>
        https://happy-animal-123.convex.cloud
      </code>
      
       or localhost. This can be useful if running a self-hosted Convex deployment that uses a different URL. The default value is <code>
        false
      </code>
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/nuxt/index.ts#L88" rel="nofollow">
        src/runtime/nuxt/index.ts:88
      </a>
    </td>
  </tr>
</tbody>
</table>

## Functions

### preloadQuery()

```ts
function preloadQuery<Query>(query, ...args): Promise<Preloaded<Query>>;
```

Defined in: [src/runtime/nuxt/index.ts:105](https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/nuxt/index.ts#L105)

Execute a Convex query function and return a `Preloaded`
payload which can be passed to `usePreloadedQuery` in a client
component.

#### Type Parameters

<table>
<thead>
  <tr>
    <th>
      Type Parameter
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        Query
      </code>
      
       <em>
        extends
      </em>
      
       | <a href="https://nuxt-convex-module.dev/api-reference/reference/client#functionreference">
        <code>
          FunctionReference
        </code>
      </a>
      
      <<code>
        "query"
      </code>
      
      > | <a href="https://nuxt-convex-module.dev/api-reference/reference/client#functionreference_future">
        <code>
          FunctionReference_future
        </code>
      </a>
      
      <<code>
        "query"
      </code>
      
      >
    </td>
  </tr>
</tbody>
</table>

#### Parameters

<table>
<thead>
  <tr>
    <th>
      Parameter
    </th>
    
    <th>
      Type
    </th>
    
    <th>
      Description
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        query
      </code>
    </td>
    
    <td>
      <code>
        Query
      </code>
    </td>
    
    <td>
      a <code>
        FunctionReference
      </code>
      
       for the public query to run like <code>
        api.dir1.dir2.filename.func
      </code>
      
      .
    </td>
  </tr>
  
  <tr>
    <td>
      ...<code>
        args
      </code>
    </td>
    
    <td>
      <a href="https://nuxt-convex-module.dev/api-reference/reference/client#argsandoptions">
        <code>
          ArgsAndOptions
        </code>
      </a>
      
      <<code>
        Query
      </code>
      
      , <a href="#nuxtoptions">
        <code>
          NuxtOptions
        </code>
      </a>
      
      >
    </td>
    
    <td>
      The arguments object for the query. If this is omitted, the arguments will be <code>
        {}
      </code>
      
      .
    </td>
  </tr>
</tbody>
</table>

#### Returns

`Promise`<[`Preloaded`](https://nuxt-convex-module.dev/api-reference/reference/client#preloaded)<`Query`>>

A promise of the `Preloaded` payload.

---

### preloadedQueryResult()

```ts
function preloadedQueryResult<Query>(preloaded): FunctionReturnType<Query>;
```

Defined in: [src/runtime/nuxt/index.ts:126](https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/nuxt/index.ts#L126)

Returns the result of executing a query via [preloadQuery](#preloadquery).

#### Type Parameters

<table>
<thead>
  <tr>
    <th>
      Type Parameter
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        Query
      </code>
      
       <em>
        extends
      </em>
      
       | <a href="https://nuxt-convex-module.dev/api-reference/reference/client#functionreference">
        <code>
          FunctionReference
        </code>
      </a>
      
      <<code>
        "query"
      </code>
      
      > | <a href="https://nuxt-convex-module.dev/api-reference/reference/client#functionreference_future">
        <code>
          FunctionReference_future
        </code>
      </a>
      
      <<code>
        "query"
      </code>
      
      >
    </td>
  </tr>
</tbody>
</table>

#### Parameters

<table>
<thead>
  <tr>
    <th>
      Parameter
    </th>
    
    <th>
      Type
    </th>
    
    <th>
      Description
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        preloaded
      </code>
    </td>
    
    <td>
      <a href="https://nuxt-convex-module.dev/api-reference/reference/client#preloaded">
        <code>
          Preloaded
        </code>
      </a>
      
      <<code>
        Query
      </code>
      
      >
    </td>
    
    <td>
      The <code>
        Preloaded
      </code>
      
       payload returned by <a href="#preloadquery">
        preloadQuery
      </a>
      
      .
    </td>
  </tr>
</tbody>
</table>

#### Returns

[`FunctionReturnType`](https://nuxt-convex-module.dev/api-reference/reference/client#functionreturntype)<`Query`>

The query result.

---

### fetchQuery()

```ts
function fetchQuery<Query>(query, ...args): Promise<FunctionReturnType<Query>>;
```

Defined in: [src/runtime/nuxt/index.ts:144](https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/nuxt/index.ts#L144)

Execute a Convex query function.

#### Type Parameters

<table>
<thead>
  <tr>
    <th>
      Type Parameter
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        Query
      </code>
      
       <em>
        extends
      </em>
      
       | <a href="https://nuxt-convex-module.dev/api-reference/reference/client#functionreference">
        <code>
          FunctionReference
        </code>
      </a>
      
      <<code>
        "query"
      </code>
      
      > | <a href="https://nuxt-convex-module.dev/api-reference/reference/client#functionreference_future">
        <code>
          FunctionReference_future
        </code>
      </a>
      
      <<code>
        "query"
      </code>
      
      >
    </td>
  </tr>
</tbody>
</table>

#### Parameters

<table>
<thead>
  <tr>
    <th>
      Parameter
    </th>
    
    <th>
      Type
    </th>
    
    <th>
      Description
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        query
      </code>
    </td>
    
    <td>
      <code>
        Query
      </code>
    </td>
    
    <td>
      a <code>
        FunctionReference
      </code>
      
       for the public query to run like <code>
        api.dir1.dir2.filename.func
      </code>
      
      .
    </td>
  </tr>
  
  <tr>
    <td>
      ...<code>
        args
      </code>
    </td>
    
    <td>
      <a href="https://nuxt-convex-module.dev/api-reference/reference/client#argsandoptions">
        <code>
          ArgsAndOptions
        </code>
      </a>
      
      <<code>
        Query
      </code>
      
      , <a href="#nuxtoptions">
        <code>
          NuxtOptions
        </code>
      </a>
      
      >
    </td>
    
    <td>
      The arguments object for the query. If this is omitted, the arguments will be <code>
        {}
      </code>
      
      .
    </td>
  </tr>
</tbody>
</table>

#### Returns

`Promise`<[`FunctionReturnType`](https://nuxt-convex-module.dev/api-reference/reference/client#functionreturntype)<`Query`>>

A promise of the query's result.

---

### fetchMutation()

```ts
function fetchMutation<Mutation>(mutation, ...args): Promise<FunctionReturnType<Mutation>>;
```

Defined in: [src/runtime/nuxt/index.ts:165](https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/nuxt/index.ts#L165)

Execute a Convex mutation function.

#### Type Parameters

<table>
<thead>
  <tr>
    <th>
      Type Parameter
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        Mutation
      </code>
      
       <em>
        extends
      </em>
      
       | <a href="https://nuxt-convex-module.dev/api-reference/reference/client#functionreference">
        <code>
          FunctionReference
        </code>
      </a>
      
      <<code>
        "mutation"
      </code>
      
      > | <a href="https://nuxt-convex-module.dev/api-reference/reference/client#functionreference_future">
        <code>
          FunctionReference_future
        </code>
      </a>
      
      <<code>
        "mutation"
      </code>
      
      >
    </td>
  </tr>
</tbody>
</table>

#### Parameters

<table>
<thead>
  <tr>
    <th>
      Parameter
    </th>
    
    <th>
      Type
    </th>
    
    <th>
      Description
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        mutation
      </code>
    </td>
    
    <td>
      <code>
        Mutation
      </code>
    </td>
    
    <td>
      A <code>
        FunctionReference
      </code>
      
       for the public mutation to run like <code>
        api.dir1.dir2.filename.func
      </code>
      
      .
    </td>
  </tr>
  
  <tr>
    <td>
      ...<code>
        args
      </code>
    </td>
    
    <td>
      <a href="https://nuxt-convex-module.dev/api-reference/reference/client#argsandoptions">
        <code>
          ArgsAndOptions
        </code>
      </a>
      
      <<code>
        Mutation
      </code>
      
      , <a href="#nuxtoptions">
        <code>
          NuxtOptions
        </code>
      </a>
      
      >
    </td>
    
    <td>
      The arguments object for the mutation. If this is omitted, the arguments will be <code>
        {}
      </code>
      
      .
    </td>
  </tr>
</tbody>
</table>

#### Returns

`Promise`<[`FunctionReturnType`](https://nuxt-convex-module.dev/api-reference/reference/client#functionreturntype)<`Mutation`>>

A promise of the mutation's result.

---

### fetchAction()

```ts
function fetchAction<Action>(action, ...args): Promise<FunctionReturnType<Action>>;
```

Defined in: [src/runtime/nuxt/index.ts:188](https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/nuxt/index.ts#L188)

Execute a Convex action function.

#### Type Parameters

<table>
<thead>
  <tr>
    <th>
      Type Parameter
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        Action
      </code>
      
       <em>
        extends
      </em>
      
       | <a href="https://nuxt-convex-module.dev/api-reference/reference/client#functionreference">
        <code>
          FunctionReference
        </code>
      </a>
      
      <<code>
        "action"
      </code>
      
      > | <a href="https://nuxt-convex-module.dev/api-reference/reference/client#functionreference_future">
        <code>
          FunctionReference_future
        </code>
      </a>
      
      <<code>
        "action"
      </code>
      
      >
    </td>
  </tr>
</tbody>
</table>

#### Parameters

<table>
<thead>
  <tr>
    <th>
      Parameter
    </th>
    
    <th>
      Type
    </th>
    
    <th>
      Description
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        action
      </code>
    </td>
    
    <td>
      <code>
        Action
      </code>
    </td>
    
    <td>
      A <code>
        FunctionReference
      </code>
      
       for the public action to run like <code>
        api.dir1.dir2.filename.func
      </code>
      
      .
    </td>
  </tr>
  
  <tr>
    <td>
      ...<code>
        args
      </code>
    </td>
    
    <td>
      <a href="https://nuxt-convex-module.dev/api-reference/reference/client#argsandoptions">
        <code>
          ArgsAndOptions
        </code>
      </a>
      
      <<code>
        Action
      </code>
      
      , <a href="#nuxtoptions">
        <code>
          NuxtOptions
        </code>
      </a>
      
      >
    </td>
    
    <td>
      The arguments object for the action. If this is omitted, the arguments will be <code>
        {}
      </code>
      
      .
    </td>
  </tr>
</tbody>
</table>

#### Returns

`Promise`<[`FunctionReturnType`](https://nuxt-convex-module.dev/api-reference/reference/client#functionreturntype)<`Action`>>

A promise of the action's result.


## Sitemap

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