---
title: "client"
description: "Tools to integrate Convex into Vue applications — generated TypeScript API reference for nuxt-convex-module/client."
canonical_url: "https://nuxt-convex-module.dev/api-reference/reference/client"
---
# client

Tools to integrate Convex into Vue applications.

This module contains:

1. [ConvexVueClient](#convexvueclient), a client for using Convex in Vue.
2. [ConvexClientKey](#convexclientkey), an injection key that stores this client in Vue context.
3. [Authenticated](#authenticated), [Unauthenticated](#unauthenticated), [AuthLoading](#authloading) and [AuthRefreshing](#authrefreshing) helper auth components.
4. Composables [useQuery](#usequery), [useMutation](#usemutation), [useAction](#useaction) and more for accessing this
client from your Vue components.

## Usage

### Creating the client

```typescript
import { ConvexVueClient } from "nuxt-convex-module/client";

// typically loaded from an environment variable
const address = "https://small-mouse-123.convex.cloud"
const convex = new ConvexVueClient(address);
```

### Storing the client in Vue context

```typescript
import { ConvexClientKey } from "nuxt-convex-module/client";

// (the Nuxt module registers a plugin that does this automatically)
app.provide(ConvexClientKey, convex);
```

### Using the auth helpers

```typescript
import { Authenticated, Unauthenticated, AuthLoading, AuthRefreshing } from "nuxt-convex-module/client";

<Authenticated>
  Logged in
</Authenticated>
<Unauthenticated>
  Logged out
</Unauthenticated>
<AuthLoading>
  Still loading
</AuthLoading>
<AuthRefreshing>
  Refreshing token...
</AuthRefreshing>
```

### Using Vue composables

```typescript
import { useQuery, useMutation } from "nuxt-convex-module/client";
import { api } from "../convex/_generated/api";

// In your component's <script setup>:
const counter = useQuery(api.getCounter.default);
const increment = useMutation(api.incrementCounter.default);
// Your component here!
```

## Classes

### ConvexVueClient

Defined in: [src/runtime/vue/client.ts:191](https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/vue/client.ts#L191)

A Convex client for use within Vue.

This loads reactive queries and executes mutations over a WebSocket.

In a Nuxt app the client is provided automatically by the plugin and
available via the [useConvex](#useconvex) composable.

#### Constructors

##### Constructor

```ts
new ConvexVueClient(address, options?): ConvexVueClient;
```

Defined in: [src/runtime/vue/client.ts:212](https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/vue/client.ts#L212)

###### Parameters

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

<tbody>
  <tr>
    <td>
      <code>
        address
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      The url of your Convex deployment, often provided by an environment variable. E.g. <code>
        https://small-mouse-123.convex.cloud
      </code>
      
      .
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        options?
      </code>
    </td>
    
    <td>
      <a href="#convexvueclientoptions">
        <code>
          ConvexVueClientOptions
        </code>
      </a>
    </td>
    
    <td>
      See <a href="#convexvueclientoptions">
        ConvexVueClientOptions
      </a>
      
       for a full description.
    </td>
  </tr>
</tbody>
</table>

###### Returns

[`ConvexVueClient`](#convexvueclient)

#### Accessors

##### url

###### Get Signature

```ts
get url(): string;
```

Defined in: [src/runtime/vue/client.ts:250](https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/vue/client.ts#L250)

Return the address for this client, useful for creating a new client.

Not guaranteed to match the address with which this client was constructed:
it may be canonicalized.

###### Returns

`string`

##### logger

###### Get Signature

```ts
get logger(): Logger;
```

Defined in: [src/runtime/vue/client.ts:587](https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/vue/client.ts#L587)

Get the logger for this client.

###### Returns

`Logger`

The [ConvexLogger](#convexlogger) for this client.

#### Methods

##### setAuth()

```ts
setAuth(
   fetchToken, 
   onChange?, 
   onRefreshChange?
): void;
```

Defined in: [src/runtime/vue/client.ts:293](https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/vue/client.ts#L293)

Set the authentication token to be used for subsequent queries and mutations.
`fetchToken` will be called automatically again if a token expires.
`fetchToken` should return `null` if the token cannot be retrieved, for example
when the user's rights were permanently revoked.

###### Parameters

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

<tbody>
  <tr>
    <td>
      <code>
        fetchToken
      </code>
    </td>
    
    <td>
      <a href="#authtokenfetcher">
        <code>
          AuthTokenFetcher
        </code>
      </a>
    </td>
    
    <td>
      an async function returning the JWT-encoded OpenID Connect Identity Token
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        onChange?
      </code>
    </td>
    
    <td>
      (<code>
        isAuthenticated
      </code>
      
      ) => <code>
        void
      </code>
    </td>
    
    <td>
      a callback that will be called when the authentication status changes
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        onRefreshChange?
      </code>
    </td>
    
    <td>
      (<code>
        isRefreshing
      </code>
      
      ) => <code>
        void
      </code>
    </td>
    
    <td>
      a callback called with <code>
        true
      </code>
      
       when the socket is paused to fetch a replacement token after a server rejection, and <code>
        false
      </code>
      
       when refresh completes
    </td>
  </tr>
</tbody>
</table>

###### Returns

`void`

##### clearAuth()

```ts
clearAuth(): void;
```

Defined in: [src/runtime/vue/client.ts:317](https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/vue/client.ts#L317)

Clear the current authentication token if set.

###### Returns

`void`

##### watchQuery()

```ts
watchQuery<Query>(query, ...argsAndOptions): Watch<FunctionReturnType<Query>>;
```

Defined in: [src/runtime/vue/client.ts:351](https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/vue/client.ts#L351)

Construct a new [Watch](#watch) on a Convex query function.

**Most application code should not call this method directly. Instead use
the useQuery composable.**

The act of creating a watch does nothing, a Watch is stateless.

###### Type Parameters

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

<tbody>
  <tr>
    <td>
      <code>
        Query
      </code>
      
       <em>
        extends
      </em>
      
       | <a href="#functionreference">
        <code>
          FunctionReference
        </code>
      </a>
      
      <<code>
        "query"
      </code>
      
      > | <a href="#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 <a href="https://docs.convex.dev/api/modules/server#functionreference" rel="nofollow">
        <code>
          FunctionReference
        </code>
      </a>
      
       for the public query to run.
    </td>
  </tr>
  
  <tr>
    <td>
      ...<code>
        argsAndOptions
      </code>
    </td>
    
    <td>
      <a href="#argsandoptions">
        <code>
          ArgsAndOptions
        </code>
      </a>
      
      <<code>
        Query
      </code>
      
      , <a href="#watchqueryoptions">
        <code>
          WatchQueryOptions
        </code>
      </a>
      
      >
    </td>
    
    <td>
      -
    </td>
  </tr>
</tbody>
</table>

###### Returns

[`Watch`](#watch)<[`FunctionReturnType`](#functionreturntype)<`Query`>>

The [Watch](#watch) object.

##### prewarmQuery()

```ts
prewarmQuery<Query>(queryOptions): void;
```

Defined in: [src/runtime/vue/client.ts:429](https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/vue/client.ts#L429)

Indicates likely future interest in a query subscription.

The implementation currently immediately subscribes to a query. In the future this method
may prioritize some queries over others, fetch the query result without subscribing, or
do nothing in slow network connections or high load scenarios.

To use this in a Vue component, call useQuery() and ignore the return value.

###### Type Parameters

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

<tbody>
  <tr>
    <td>
      <code>
        Query
      </code>
      
       <em>
        extends
      </em>
      
       | <a href="#functionreference">
        <code>
          FunctionReference
        </code>
      </a>
      
      <<code>
        "query"
      </code>
      
      > | <a href="#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>
        queryOptions
      </code>
    </td>
    
    <td>
      <a href="#queryoptions">
        <code>
          QueryOptions
        </code>
      </a>
      
      <<code>
        Query
      </code>
      
      > & { <code>
        extendSubscriptionFor?
      </code>
      
      : <code>
        number
      </code>
      
      ; }
    </td>
    
    <td>
      A query (function reference from an api object) and its args, plus an optional extendSubscriptionFor for how long to subscribe to the query.
    </td>
  </tr>
</tbody>
</table>

###### Returns

`void`

##### mutation()

```ts
mutation<Mutation>(mutation, ...argsAndOptions): Promise<FunctionReturnType<Mutation>>;
```

Defined in: [src/runtime/vue/client.ts:488](https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/vue/client.ts#L488)

Execute a mutation function.

###### Type Parameters

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

<tbody>
  <tr>
    <td>
      <code>
        Mutation
      </code>
      
       <em>
        extends
      </em>
      
       | <a href="#functionreference">
        <code>
          FunctionReference
        </code>
      </a>
      
      <<code>
        "mutation"
      </code>
      
      > | <a href="#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 <a href="https://docs.convex.dev/api/modules/server#functionreference" rel="nofollow">
        <code>
          FunctionReference
        </code>
      </a>
      
       for the public mutation to run.
    </td>
  </tr>
  
  <tr>
    <td>
      ...<code>
        argsAndOptions
      </code>
    </td>
    
    <td>
      <a href="#argsandoptions">
        <code>
          ArgsAndOptions
        </code>
      </a>
      
      <<code>
        Mutation
      </code>
      
      , <a href="#mutationoptions">
        <code>
          MutationOptions
        </code>
      </a>
      
      <<a href="#functionargs">
        <code>
          FunctionArgs
        </code>
      </a>
      
      <<code>
        Mutation
      </code>
      
      >>>
    </td>
    
    <td>
      -
    </td>
  </tr>
</tbody>
</table>

###### Returns

`Promise`<[`FunctionReturnType`](#functionreturntype)<`Mutation`>>

A promise of the mutation's result.

##### action()

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

Defined in: [src/runtime/vue/client.ts:509](https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/vue/client.ts#L509)

Execute an action function.

###### Type Parameters

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

<tbody>
  <tr>
    <td>
      <code>
        Action
      </code>
      
       <em>
        extends
      </em>
      
       | <a href="#functionreference">
        <code>
          FunctionReference
        </code>
      </a>
      
      <<code>
        "action"
      </code>
      
      > | <a href="#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 <a href="https://docs.convex.dev/api/modules/server#functionreference" rel="nofollow">
        <code>
          FunctionReference
        </code>
      </a>
      
       for the public action to run.
    </td>
  </tr>
  
  <tr>
    <td>
      ...<code>
        args
      </code>
    </td>
    
    <td>
      <a href="#optionalrestargs">
        <code>
          OptionalRestArgs
        </code>
      </a>
      
      <<code>
        Action
      </code>
      
      >
    </td>
    
    <td>
      An arguments object for the action. If this is omitted, the arguments will be <code>
        {}
      </code>
      
      .
    </td>
  </tr>
</tbody>
</table>

###### Returns

`Promise`<[`FunctionReturnType`](#functionreturntype)<`Action`>>

A promise of the action's result.

##### query()

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

Defined in: [src/runtime/vue/client.ts:529](https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/vue/client.ts#L529)

Fetch a query result once.

**Most application code should subscribe to queries instead, using
the useQuery composable.**

###### Type Parameters

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

<tbody>
  <tr>
    <td>
      <code>
        Query
      </code>
      
       <em>
        extends
      </em>
      
       | <a href="#functionreference">
        <code>
          FunctionReference
        </code>
      </a>
      
      <<code>
        "query"
      </code>
      
      > | <a href="#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 <a href="https://docs.convex.dev/api/modules/server#functionreference" rel="nofollow">
        <code>
          FunctionReference
        </code>
      </a>
      
       for the public query to run.
    </td>
  </tr>
  
  <tr>
    <td>
      ...<code>
        args
      </code>
    </td>
    
    <td>
      <a href="#optionalrestargs">
        <code>
          OptionalRestArgs
        </code>
      </a>
      
      <<code>
        Query
      </code>
      
      >
    </td>
    
    <td>
      An arguments object for the query. If this is omitted, the arguments will be <code>
        {}
      </code>
      
      .
    </td>
  </tr>
</tbody>
</table>

###### Returns

`Promise`<[`FunctionReturnType`](#functionreturntype)<`Query`>>

A promise of the query's result.

##### connectionState()

```ts
connectionState(): ConnectionState;
```

Defined in: [src/runtime/vue/client.ts:559](https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/vue/client.ts#L559)

**Experimental**

Get the current [ConnectionState](#connectionstate) between the client and the Convex
deployment.

###### Returns

[`ConnectionState`](#connectionstate)

The [ConnectionState](#connectionstate) with the Convex deployment.
May change in a minor release — see STABILITY.md.

##### subscribeToConnectionState()

```ts
subscribeToConnectionState(cb): () => void;
```

Defined in: [src/runtime/vue/client.ts:576](https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/vue/client.ts#L576)

**Experimental**

Subscribe to the [ConnectionState](#connectionstate) between the client and the Convex
deployment, calling a callback each time it changes.

Subscribed callbacks will be called when any part of ConnectionState changes.
ConnectionState may grow in future versions (e.g. to provide a array of
inflight requests) in which case callbacks would be called more frequently.
ConnectionState may also *lose* properties in future versions as we figure
out what information is most useful. As such this API is considered unstable.

###### Parameters

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

<tbody>
  <tr>
    <td>
      <code>
        cb
      </code>
    </td>
    
    <td>
      (<code>
        connectionState
      </code>
      
      ) => <code>
        void
      </code>
    </td>
  </tr>
</tbody>
</table>

###### Returns

An unsubscribe function to stop listening.
May change in a minor release — see STABILITY.md.

() => `void`

##### close()

```ts
close(): Promise<void>;
```

Defined in: [src/runtime/vue/client.ts:599](https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/vue/client.ts#L599)

Close any network handles associated with this client and stop all subscriptions.

Call this method when you're done with a [ConvexVueClient](#convexvueclient) to
dispose of its sockets and resources.

###### Returns

`Promise`<`void`>

A `Promise` fulfilled when the connection has been completely closed.

## Interfaces

### ConvexAuthProviderOptions

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

Options for [provideConvexAuth](#provideconvexauth) — the Vue translation of the props of
upstream's `ConvexProviderWithAuth` component.

#### Properties

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

<tbody>
  <tr>
    <td>
      <a id="client">
        
      </a>
      
       <code>
        client
      </code>
    </td>
    
    <td>
      <a href="#iconvexvueclient">
        <code>
          IConvexVueClient
        </code>
      </a>
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/vue/auth/index.ts#L76" rel="nofollow">
        src/runtime/vue/auth/index.ts:76
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="useauth">
        
      </a>
      
       <code>
        useAuth
      </code>
    </td>
    
    <td>
      () => { <code>
        isLoading
      </code>
      
      : <code>
        MaybeRefOrGetter
      </code>
      
      <<code>
        boolean
      </code>
      
      >; <code>
        isAuthenticated
      </code>
      
      : <code>
        MaybeRefOrGetter
      </code>
      
      <<code>
        boolean
      </code>
      
      >; <code>
        fetchAccessToken
      </code>
      
      : <code>
        MaybeRef
      </code>
      
      <<a href="#authtokenfetcher">
        <code>
          AuthTokenFetcher
        </code>
      </a>
      
      >; <code>
        authVersion?
      </code>
      
      : <code>
        unknown
      </code>
      
      ; }
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/vue/auth/index.ts#L77" rel="nofollow">
        src/runtime/vue/auth/index.ts:77
      </a>
    </td>
  </tr>
</tbody>
</table>

---

### Watch

Defined in: [src/runtime/vue/client.ts:52](https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/vue/client.ts#L52)

A watch on the output of a Convex query function.

Derived from upstream's `Watch` (per-member docs live there), extended with
the internal `localQueryLogs`, which is stripped from the published
`convex/react` types but present at runtime.

#### Extends

- `Watch`<`T`>

#### Type Parameters

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

<tbody>
  <tr>
    <td>
      <code>
        T
      </code>
    </td>
  </tr>
</tbody>
</table>

#### Methods

##### onUpdate()

```ts
onUpdate(callback): () => void;
```

Defined in: node_modules/convex/dist/esm-types/react/client.d.ts:83

Initiate a watch on the output of a query.

This will subscribe to this query and call
the callback whenever the query result changes.

**Important: If the client is already subscribed to this query with the
same arguments this callback will not be invoked until the query result is
updated.** To get the current, local result call
react.Watch.localQueryResult.

###### Parameters

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

<tbody>
  <tr>
    <td>
      <code>
        callback
      </code>
    </td>
    
    <td>
      () => <code>
        void
      </code>
    </td>
    
    <td>
      Function that is called whenever the query result changes.
    </td>
  </tr>
</tbody>
</table>

###### Returns

- A function that disposes of the subscription.

() => `void`

###### Inherited from

```ts
ConvexWatch.onUpdate
```

##### localQueryResult()

```ts
localQueryResult(): T | undefined;
```

Defined in: node_modules/convex/dist/esm-types/react/client.d.ts:94

Get the current result of a query.

This will only return a result if we're already subscribed to the query
and have received a result from the server or the query value has been set
optimistically.

###### Returns

`T` | `undefined`

The result of the query or `undefined` if it isn't known.

###### Throws

An error if the query encountered an error on the server.

###### Inherited from

```ts
ConvexWatch.localQueryResult
```

##### journal()

```ts
journal(): QueryJournal | undefined;
```

Defined in: node_modules/convex/dist/esm-types/react/client.d.ts:100

Get the current browser.QueryJournal for this query.

If we have not yet received a result for this query, this will be `undefined`.

###### Returns

[`QueryJournal`](#queryjournal) | `undefined`

###### Inherited from

```ts
ConvexWatch.journal
```

---

### PaginatedWatch

Defined in: [src/runtime/vue/client.ts:64](https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/vue/client.ts#L64)

A watch on the output of a paginated Convex query function.

#### Type Parameters

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

<tbody>
  <tr>
    <td>
      <code>
        T
      </code>
    </td>
  </tr>
</tbody>
</table>

#### Methods

##### onUpdate()

```ts
onUpdate(callback): () => void;
```

Defined in: [src/runtime/vue/client.ts:74](https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/vue/client.ts#L74)

Initiate a watch on the output of a paginated query.

This will subscribe to this query and call
the callback whenever the query result changes.

###### Parameters

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

<tbody>
  <tr>
    <td>
      <code>
        callback
      </code>
    </td>
    
    <td>
      () => <code>
        void
      </code>
    </td>
    
    <td>
      Function that is called whenever the query result changes.
    </td>
  </tr>
</tbody>
</table>

###### Returns

- A function that disposes of the subscription.

() => `void`

##### localQueryResult()

```ts
localQueryResult(): 
  | {
  results: T[];
  status: PaginationStatus;
  loadMore: (numItems) => boolean;
}
  | undefined;
```

Defined in: [src/runtime/vue/client.ts:81](https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/vue/client.ts#L81)

Get the current result of a paginated query.

###### Returns

| {
`results`: `T`<span>



</span>

;
`status`: `PaginationStatus`;
`loadMore`: (`numItems`) => `boolean`;
}
| `undefined`

The current results, status, and loadMore function, or `undefined` if not loaded.

---

### WatchQueryOptions

Defined in: [src/runtime/vue/client.ts:96](https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/vue/client.ts#L96)

Options for [ConvexVueClient.watchQuery](#watchquery).

#### Properties

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

<tbody>
  <tr>
    <td>
      <a id="journal-1">
        
      </a>
      
       <code>
        journal?
      </code>
    </td>
    
    <td>
      <a href="#queryjournal">
        <code>
          QueryJournal
        </code>
      </a>
    </td>
    
    <td>
      An (optional) journal produced from a previous execution of this query function. If there is an existing subscription to a query function with the same name and arguments, this journal will have no effect.
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/vue/client.ts#L104" rel="nofollow">
        src/runtime/vue/client.ts:104
      </a>
    </td>
  </tr>
</tbody>
</table>

---

### MutationOptions

Defined in: [src/runtime/vue/client.ts:117](https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/vue/client.ts#L117)

Options for [ConvexVueClient.mutation](#mutation).

#### Type Parameters

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

<tbody>
  <tr>
    <td>
      <code>
        Args
      </code>
      
       <em>
        extends
      </em>
      
       <code>
        Record
      </code>
      
      <<code>
        string
      </code>
      
      , <a href="#value">
        <code>
          Value
        </code>
      </a>
      
      >
    </td>
  </tr>
</tbody>
</table>

#### Properties

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

<tbody>
  <tr>
    <td>
      <a id="optimisticupdate-1">
        
      </a>
      
       <code>
        optimisticUpdate?
      </code>
    </td>
    
    <td>
      <a href="#optimisticupdate">
        <code>
          OptimisticUpdate
        </code>
      </a>
      
      <<code>
        Args
      </code>
      
      >
    </td>
    
    <td>
      An optimistic update to apply along with this mutation. An optimistic update locally updates queries while a mutation is pending. Once the mutation completes, the update will be rolled back.
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/vue/client.ts#L124" rel="nofollow">
        src/runtime/vue/client.ts:124
      </a>
    </td>
  </tr>
</tbody>
</table>

---

### ConvexVueClientOptions

Defined in: [src/runtime/vue/client.ts:140](https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/vue/client.ts#L140)

Options for [ConvexVueClient](#convexvueclient).

#### Extends

- `BaseConvexClientOptions`

#### Properties

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

<tbody>
  <tr>
    <td>
      <a id="unsavedchangeswarning">
        
      </a>
      
       <code>
        unsavedChangesWarning?
      </code>
    </td>
    
    <td>
      <code>
        public
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      Whether to prompt the user if they have unsaved changes pending when navigating away or closing a web page. This is only possible when the <code>
        window
      </code>
      
       object exists, i.e. in a browser. The default value is <code>
        true
      </code>
      
       in browsers.
    </td>
    
    <td>
      <code>
        BaseConvexClientOptions.unsavedChangesWarning
      </code>
    </td>
    
    <td>
      node_modules/convex/dist/esm-types/browser/sync/client.d.ts:23
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="websocketconstructor">
        
      </a>
      
       <code>
        webSocketConstructor?
      </code>
    </td>
    
    <td>
      <code>
        public
      </code>
    </td>
    
    <td>
      { (<code>
        url
      </code>
      
      , <code>
        protocols?
      </code>
      
      ): <code>
        WebSocket
      </code>
      
      ; <code>
        prototype
      </code>
      
      : <code>
        WebSocket
      </code>
      
      ; <code>
        CONNECTING
      </code>
      
      : <code>
        0
      </code>
      
      ; <code>
        OPEN
      </code>
      
      : <code>
        1
      </code>
      
      ; <code>
        CLOSING
      </code>
      
      : <code>
        2
      </code>
      
      ; <code>
        CLOSED
      </code>
      
      : <code>
        3
      </code>
      
      ; }
    </td>
    
    <td>
      Specifies an alternate <a href="https://developer.mozilla.org/en-US/docs/Web/API/WebSocket" rel="nofollow">
        WebSocket
      </a>
      
       constructor to use for client communication with the Convex cloud. The default behavior is to use <code>
        WebSocket
      </code>
      
       from the global environment.
    </td>
    
    <td>
      <code>
        BaseConvexClientOptions.webSocketConstructor
      </code>
    </td>
    
    <td>
      node_modules/convex/dist/esm-types/browser/sync/client.d.ts:30
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        webSocketConstructor.prototype
      </code>
    </td>
    
    <td>
      <code>
        public
      </code>
    </td>
    
    <td>
      <code>
        WebSocket
      </code>
    </td>
    
    <td>
      -
    </td>
    
    <td>
      -
    </td>
    
    <td>
      node_modules/typescript/lib/lib.dom.d.ts:40936
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        webSocketConstructor.CONNECTING
      </code>
    </td>
    
    <td>
      <code>
        readonly
      </code>
    </td>
    
    <td>
      <code>
        0
      </code>
    </td>
    
    <td>
      -
    </td>
    
    <td>
      -
    </td>
    
    <td>
      node_modules/typescript/lib/lib.dom.d.ts:40938
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        webSocketConstructor.OPEN
      </code>
    </td>
    
    <td>
      <code>
        readonly
      </code>
    </td>
    
    <td>
      <code>
        1
      </code>
    </td>
    
    <td>
      -
    </td>
    
    <td>
      -
    </td>
    
    <td>
      node_modules/typescript/lib/lib.dom.d.ts:40939
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        webSocketConstructor.CLOSING
      </code>
    </td>
    
    <td>
      <code>
        readonly
      </code>
    </td>
    
    <td>
      <code>
        2
      </code>
    </td>
    
    <td>
      -
    </td>
    
    <td>
      -
    </td>
    
    <td>
      node_modules/typescript/lib/lib.dom.d.ts:40940
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        webSocketConstructor.CLOSED
      </code>
    </td>
    
    <td>
      <code>
        readonly
      </code>
    </td>
    
    <td>
      <code>
        3
      </code>
    </td>
    
    <td>
      -
    </td>
    
    <td>
      -
    </td>
    
    <td>
      node_modules/typescript/lib/lib.dom.d.ts:40941
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="verbose">
        
      </a>
      
       <code>
        verbose?
      </code>
    </td>
    
    <td>
      <code>
        public
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      Adds additional logging for debugging purposes. The default value is <code>
        false
      </code>
      
      .
    </td>
    
    <td>
      <code>
        BaseConvexClientOptions.verbose
      </code>
    </td>
    
    <td>
      node_modules/convex/dist/esm-types/browser/sync/client.d.ts:36
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="logger">
        
      </a>
      
       <code>
        logger?
      </code>
    </td>
    
    <td>
      <code>
        public
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
      
       | <code>
        Logger
      </code>
    </td>
    
    <td>
      A logger, <code>
        true
      </code>
      
      , or <code>
        false
      </code>
      
      . If not provided or <code>
        true
      </code>
      
      , logs to the console. If <code>
        false
      </code>
      
      , logs are not printed anywhere. You can construct your own logger to customize logging to log elsewhere. A logger is an object with 4 methods: log(), warn(), error(), and logVerbose(). These methods can receive multiple arguments of any types, like console.log().
    </td>
    
    <td>
      <code>
        BaseConvexClientOptions.logger
      </code>
    </td>
    
    <td>
      node_modules/convex/dist/esm-types/browser/sync/client.d.ts:45
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="reportdebuginfotoconvex">
        
      </a>
      
       <code>
        reportDebugInfoToConvex?
      </code>
    </td>
    
    <td>
      <code>
        public
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      Sends additional metrics to Convex for debugging purposes. The default value is <code>
        false
      </code>
      
      .
    </td>
    
    <td>
      <code>
        BaseConvexClientOptions.reportDebugInfoToConvex
      </code>
    </td>
    
    <td>
      node_modules/convex/dist/esm-types/browser/sync/client.d.ts:51
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="onserverdisconnecterror">
        
      </a>
      
       <code>
        onServerDisconnectError?
      </code>
    </td>
    
    <td>
      <code>
        public
      </code>
    </td>
    
    <td>
      (<code>
        message
      </code>
      
      ) => <code>
        void
      </code>
    </td>
    
    <td>
      This API is experimental: it may change or disappear. A function to call on receiving abnormal WebSocket close messages from the connected Convex deployment. The content of these messages is not stable, it is an implementation detail that may change. Consider this API an observability stopgap until higher level codes with recommendations on what to do are available, which could be a more stable interface instead of <code>
        string
      </code>
      
      . Check <code>
        connectionState
      </code>
      
       for more quantitative metrics about connection status.
    </td>
    
    <td>
      <code>
        BaseConvexClientOptions.onServerDisconnectError
      </code>
    </td>
    
    <td>
      node_modules/convex/dist/esm-types/browser/sync/client.d.ts:65
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="skipconvexdeploymenturlcheck">
        
      </a>
      
       <code>
        skipConvexDeploymentUrlCheck?
      </code>
    </td>
    
    <td>
      <code>
        public
      </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 backend that uses a different URL. The default value is <code>
        false
      </code>
    </td>
    
    <td>
      <code>
        BaseConvexClientOptions.skipConvexDeploymentUrlCheck
      </code>
    </td>
    
    <td>
      node_modules/convex/dist/esm-types/browser/sync/client.d.ts:75
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="authrefreshtokenleewayseconds">
        
      </a>
      
       <code>
        authRefreshTokenLeewaySeconds?
      </code>
    </td>
    
    <td>
      <code>
        public
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      If using auth, the number of seconds before a token expires that we should refresh it. The default value is <code>
        10
      </code>
      
      .
    </td>
    
    <td>
      <code>
        BaseConvexClientOptions.authRefreshTokenLeewaySeconds
      </code>
    </td>
    
    <td>
      node_modules/convex/dist/esm-types/browser/sync/client.d.ts:81
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="expectauth">
        
      </a>
      
       <code>
        expectAuth?
      </code>
    </td>
    
    <td>
      <code>
        public
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      This API is experimental: it may change or disappear. Whether query, mutation, and action requests should be held back until the first auth token can be sent. Opting into this behavior works well for pages that should only be viewed by authenticated clients. Defaults to false, not waiting for an auth token.
    </td>
    
    <td>
      <code>
        BaseConvexClientOptions.expectAuth
      </code>
    </td>
    
    <td>
      node_modules/convex/dist/esm-types/browser/sync/client.d.ts:93
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="initialauthtokenreuse">
        
      </a>
      
       <code>
        initialAuthTokenReuse?
      </code>
    </td>
    
    <td>
      <code>
        public
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      This API is experimental: it may change or disappear. When true, the client reuses the initial cached auth token instead of immediately fetching a fresh one. This avoids a second Authenticate message that causes the server to re-execute all authenticated queries. The cached token's remaining lifetime is estimated using the server's clock skew measurement, and a refresh is scheduled before it expires. Defaults to false, preserving the original behavior of immediately fetching a fresh token after the cached token is confirmed.
    </td>
    
    <td>
      <code>
        BaseConvexClientOptions.initialAuthTokenReuse
      </code>
    </td>
    
    <td>
      node_modules/convex/dist/esm-types/browser/sync/client.d.ts:109
    </td>
  </tr>
</tbody>
</table>

---

### VueAction()

Defined in: [src/runtime/vue/composables/use-action.ts:11](https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/vue/composables/use-action.ts#L11)

An interface to execute a Convex action on the server.

#### Type Parameters

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

<tbody>
  <tr>
    <td>
      <code>
        Action
      </code>
      
       <em>
        extends
      </em>
      
       | <a href="#functionreference">
        <code>
          FunctionReference
        </code>
      </a>
      
      <<code>
        "action"
      </code>
      
      > | <a href="#functionreference_future">
        <code>
          FunctionReference_future
        </code>
      </a>
      
      <<code>
        "action"
      </code>
      
      >
    </td>
  </tr>
</tbody>
</table>

```ts
VueAction(...args): Promise<FunctionReturnType<Action>>;
```

Defined in: [src/runtime/vue/composables/use-action.ts:19](https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/vue/composables/use-action.ts#L19)

Execute the function on the server, returning a `Promise` of its return value.

#### Parameters

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

<tbody>
  <tr>
    <td>
      ...<code>
        args
      </code>
    </td>
    
    <td>
      <a href="#optionalrestargs">
        <code>
          OptionalRestArgs
        </code>
      </a>
      
      <<code>
        Action
      </code>
      
      >
    </td>
    
    <td>
      Arguments for the function to pass up to the server.
    </td>
  </tr>
</tbody>
</table>

#### Returns

`Promise`<[`FunctionReturnType`](#functionreturntype)<`Action`>>

The return value of the server-side function call.

---

### VueMutation()

Defined in: [src/runtime/vue/composables/use-mutation.ts:14](https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/vue/composables/use-mutation.ts#L14)

An interface to execute a Convex mutation function on the server.

#### Type Parameters

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

<tbody>
  <tr>
    <td>
      <code>
        Mutation
      </code>
      
       <em>
        extends
      </em>
      
       | <a href="#functionreference">
        <code>
          FunctionReference
        </code>
      </a>
      
      <<code>
        "mutation"
      </code>
      
      > | <a href="#functionreference_future">
        <code>
          FunctionReference_future
        </code>
      </a>
      
      <<code>
        "mutation"
      </code>
      
      >
    </td>
  </tr>
</tbody>
</table>

```ts
VueMutation(...args): Promise<FunctionReturnType<Mutation>>;
```

Defined in: [src/runtime/vue/composables/use-mutation.ts:21](https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/vue/composables/use-mutation.ts#L21)

Execute the mutation on the server, returning a `Promise` of its return value.

#### Parameters

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

<tbody>
  <tr>
    <td>
      ...<code>
        args
      </code>
    </td>
    
    <td>
      <a href="#optionalrestargs">
        <code>
          OptionalRestArgs
        </code>
      </a>
      
      <<code>
        Mutation
      </code>
      
      >
    </td>
    
    <td>
      Arguments for the mutation to pass up to the server.
    </td>
  </tr>
</tbody>
</table>

#### Returns

`Promise`<[`FunctionReturnType`](#functionreturntype)<`Mutation`>>

The return value of the server-side function call.

#### Methods

##### withOptimisticUpdate()

```ts
withOptimisticUpdate<T>(optimisticUpdate): VueMutation<Mutation>;
```

Defined in: [src/runtime/vue/composables/use-mutation.ts:44](https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/vue/composables/use-mutation.ts#L44)

Define an optimistic update to apply as part of this mutation.

This is a temporary update to the local query results to facilitate a
fast, interactive UI. It enables query results to update before a mutation
executed on the server.

When the mutation is invoked, the optimistic update will be applied.

Optimistic updates can also be used to temporarily remove queries from the
client and create loading experiences until a mutation completes and the
new query results are synced.

The update will be automatically rolled back when the mutation is fully
completed and queries have been updated.

###### Type Parameters

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

<tbody>
  <tr>
    <td>
      <code>
        T
      </code>
      
       <em>
        extends
      </em>
      
       <a href="#optimisticupdate">
        <code>
          OptimisticUpdate
        </code>
      </a>
      
      <<a href="#functionargs">
        <code>
          FunctionArgs
        </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>
        optimisticUpdate
      </code>
    </td>
    
    <td>
      <code>
        T
      </code>
      
       & <code>
        ReturnType
      </code>
      
      <<code>
        T
      </code>
      
      > <em>
        extends
      </em>
      
       <code>
        Promise
      </code>
      
      <<code>
        any
      </code>
      
      > ? <code>
        "Optimistic update handlers must be synchronous"
      </code>
      
       : { }
    </td>
    
    <td>
      The optimistic update to apply.
    </td>
  </tr>
</tbody>
</table>

###### Returns

[`VueMutation`](#vuemutation)<`Mutation`>

A new `VueMutation` with the update configured.

---

### UploadQueueItem

Defined in: [src/runtime/vue/composables/use-upload-queue.ts:17](https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/vue/composables/use-upload-queue.ts#L17)

A single entry in the queue managed by [useUploadQueue](#useuploadqueue).

#### Properties

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

<tbody>
  <tr>
    <td>
      <a id="id">
        
      </a>
      
       <code>
        id
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      Stable id for this queue entry (not the storage id).
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/vue/composables/use-upload-queue.ts#L19" rel="nofollow">
        src/runtime/vue/composables/use-upload-queue.ts:19
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="file">
        
      </a>
      
       <code>
        file
      </code>
    </td>
    
    <td>
      <code>
        Blob
      </code>
    </td>
    
    <td>
      The file or blob being uploaded.
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/vue/composables/use-upload-queue.ts#L21" rel="nofollow">
        src/runtime/vue/composables/use-upload-queue.ts:21
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="status-1">
        
      </a>
      
       <code>
        status
      </code>
    </td>
    
    <td>
      <a href="#uploaditemstatus">
        <code>
          UploadItemStatus
        </code>
      </a>
    </td>
    
    <td>
      Current upload status.
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/vue/composables/use-upload-queue.ts#L23" rel="nofollow">
        src/runtime/vue/composables/use-upload-queue.ts:23
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="progress">
        
      </a>
      
       <code>
        progress
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      Upload progress for this item, from <code>
        0
      </code>
      
       to <code>
        1
      </code>
      
      .
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/vue/composables/use-upload-queue.ts#L25" rel="nofollow">
        src/runtime/vue/composables/use-upload-queue.ts:25
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="storageid">
        
      </a>
      
       <code>
        storageId
      </code>
    </td>
    
    <td>
      <a href="#storageid-1">
        <code>
          StorageId
        </code>
      </a>
      
       | <code>
        null
      </code>
    </td>
    
    <td>
      The storage id once the upload succeeds, or <code>
        null
      </code>
      
      .
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/vue/composables/use-upload-queue.ts#L27" rel="nofollow">
        src/runtime/vue/composables/use-upload-queue.ts:27
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="error">
        
      </a>
      
       <code>
        error
      </code>
    </td>
    
    <td>
      <code>
        Error
      </code>
      
       | <code>
        null
      </code>
    </td>
    
    <td>
      The error if this item failed, or <code>
        null
      </code>
      
      .
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/vue/composables/use-upload-queue.ts#L29" rel="nofollow">
        src/runtime/vue/composables/use-upload-queue.ts:29
      </a>
    </td>
  </tr>
</tbody>
</table>

---

### UseUploadQueueOptions

Defined in: [src/runtime/vue/composables/use-upload-queue.ts:37](https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/vue/composables/use-upload-queue.ts#L37)

Options for [useUploadQueue](#useuploadqueue).

#### Properties

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

<tbody>
  <tr>
    <td>
      <a id="concurrency">
        
      </a>
      
       <code>
        concurrency?
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      Maximum number of uploads to run at once. Defaults to <code>
        3
      </code>
      
      .
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/vue/composables/use-upload-queue.ts#L39" rel="nofollow">
        src/runtime/vue/composables/use-upload-queue.ts:39
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="onitemsuccess">
        
      </a>
      
       <code>
        onItemSuccess?
      </code>
    </td>
    
    <td>
      (<code>
        storageId
      </code>
      
      , <code>
        item
      </code>
      
      ) => <code>
        void
      </code>
      
       | <code>
        Promise
      </code>
      
      <<code>
        void
      </code>
      
      >
    </td>
    
    <td>
      Called when an individual item finishes uploading.
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/vue/composables/use-upload-queue.ts#L41" rel="nofollow">
        src/runtime/vue/composables/use-upload-queue.ts:41
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="onitemerror">
        
      </a>
      
       <code>
        onItemError?
      </code>
    </td>
    
    <td>
      (<code>
        error
      </code>
      
      , <code>
        item
      </code>
      
      ) => <code>
        void
      </code>
    </td>
    
    <td>
      Called when an individual item fails.
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/vue/composables/use-upload-queue.ts#L43" rel="nofollow">
        src/runtime/vue/composables/use-upload-queue.ts:43
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="oncomplete">
        
      </a>
      
       <code>
        onComplete?
      </code>
    </td>
    
    <td>
      (<code>
        items
      </code>
      
      ) => <code>
        void
      </code>
    </td>
    
    <td>
      Called once every queued item has settled (succeeded or failed).
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/vue/composables/use-upload-queue.ts#L45" rel="nofollow">
        src/runtime/vue/composables/use-upload-queue.ts:45
      </a>
    </td>
  </tr>
</tbody>
</table>

---

### VueUploadQueue

Defined in: [src/runtime/vue/composables/use-upload-queue.ts:56](https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/vue/composables/use-upload-queue.ts#L56)

The reactive queue returned by [useUploadQueue](#useuploadqueue).

#### Properties

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

<tbody>
  <tr>
    <td>
      <a id="items">
        
      </a>
      
       <code>
        items
      </code>
    </td>
    
    <td>
      <code>
        Readonly
      </code>
      
      <<code>
        Ref
      </code>
      
      <<a href="#uploadqueueitem">
        <code>
          UploadQueueItem
        </code>
      </a>
      
      <span>
        
      </span>
      
      >>
    </td>
    
    <td>
      Reactive list of queued items, in insertion order.
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/vue/composables/use-upload-queue.ts#L58" rel="nofollow">
        src/runtime/vue/composables/use-upload-queue.ts:58
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="enqueue">
        
      </a>
      
       <code>
        enqueue
      </code>
    </td>
    
    <td>
      (<code>
        files
      </code>
      
      ) => <code>
        void
      </code>
    </td>
    
    <td>
      Add one or more files to the queue; uploading starts automatically.
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/vue/composables/use-upload-queue.ts#L60" rel="nofollow">
        src/runtime/vue/composables/use-upload-queue.ts:60
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="isuploading">
        
      </a>
      
       <code>
        isUploading
      </code>
    </td>
    
    <td>
      <code>
        Readonly
      </code>
      
      <<code>
        Ref
      </code>
      
      <<code>
        boolean
      </code>
      
      >>
    </td>
    
    <td>
      <code>
        true
      </code>
      
       while any item is pending or uploading.
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/vue/composables/use-upload-queue.ts#L62" rel="nofollow">
        src/runtime/vue/composables/use-upload-queue.ts:62
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="progress-1">
        
      </a>
      
       <code>
        progress
      </code>
    </td>
    
    <td>
      <code>
        Readonly
      </code>
      
      <<code>
        Ref
      </code>
      
      <<code>
        number
      </code>
      
      >>
    </td>
    
    <td>
      Aggregate progress across all items, from <code>
        0
      </code>
      
       to <code>
        1
      </code>
      
      .
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/vue/composables/use-upload-queue.ts#L64" rel="nofollow">
        src/runtime/vue/composables/use-upload-queue.ts:64
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="pendingcount">
        
      </a>
      
       <code>
        pendingCount
      </code>
    </td>
    
    <td>
      <code>
        Readonly
      </code>
      
      <<code>
        Ref
      </code>
      
      <<code>
        number
      </code>
      
      >>
    </td>
    
    <td>
      Number of items waiting to start.
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/vue/composables/use-upload-queue.ts#L66" rel="nofollow">
        src/runtime/vue/composables/use-upload-queue.ts:66
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="activecount">
        
      </a>
      
       <code>
        activeCount
      </code>
    </td>
    
    <td>
      <code>
        Readonly
      </code>
      
      <<code>
        Ref
      </code>
      
      <<code>
        number
      </code>
      
      >>
    </td>
    
    <td>
      Number of items currently uploading.
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/vue/composables/use-upload-queue.ts#L68" rel="nofollow">
        src/runtime/vue/composables/use-upload-queue.ts:68
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="cancel">
        
      </a>
      
       <code>
        cancel
      </code>
    </td>
    
    <td>
      () => <code>
        void
      </code>
    </td>
    
    <td>
      Abort all in-flight uploads (queued items stay <code>
        pending
      </code>
      
      ).
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/vue/composables/use-upload-queue.ts#L70" rel="nofollow">
        src/runtime/vue/composables/use-upload-queue.ts:70
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="remove">
        
      </a>
      
       <code>
        remove
      </code>
    </td>
    
    <td>
      (<code>
        id
      </code>
      
      ) => <code>
        void
      </code>
    </td>
    
    <td>
      Remove an item by id, aborting it first if it is uploading.
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/vue/composables/use-upload-queue.ts#L72" rel="nofollow">
        src/runtime/vue/composables/use-upload-queue.ts:72
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="clear">
        
      </a>
      
       <code>
        clear
      </code>
    </td>
    
    <td>
      () => <code>
        void
      </code>
    </td>
    
    <td>
      Abort everything and empty the queue.
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/vue/composables/use-upload-queue.ts#L74" rel="nofollow">
        src/runtime/vue/composables/use-upload-queue.ts:74
      </a>
    </td>
  </tr>
</tbody>
</table>

---

### UploadFileOptions

Defined in: [src/runtime/vue/composables/use-upload.ts:32](https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/vue/composables/use-upload.ts#L32)

Options for the low-level [uploadFile](#uploadfile) helper.

#### Properties

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

<tbody>
  <tr>
    <td>
      <a id="url-1">
        
      </a>
      
       <code>
        url
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      The one-time Convex upload URL from a <code>
        generateUploadUrl
      </code>
      
       mutation.
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/vue/composables/use-upload.ts#L34" rel="nofollow">
        src/runtime/vue/composables/use-upload.ts:34
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="file-1">
        
      </a>
      
       <code>
        file
      </code>
    </td>
    
    <td>
      <code>
        Blob
      </code>
    </td>
    
    <td>
      The file or blob to upload.
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/vue/composables/use-upload.ts#L36" rel="nofollow">
        src/runtime/vue/composables/use-upload.ts:36
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="onprogress">
        
      </a>
      
       <code>
        onProgress?
      </code>
    </td>
    
    <td>
      (<code>
        progress
      </code>
      
      ) => <code>
        void
      </code>
    </td>
    
    <td>
      Receives upload progress as a fraction from <code>
        0
      </code>
      
       to <code>
        1
      </code>
      
      .
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/vue/composables/use-upload.ts#L38" rel="nofollow">
        src/runtime/vue/composables/use-upload.ts:38
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="signal">
        
      </a>
      
       <code>
        signal?
      </code>
    </td>
    
    <td>
      <code>
        AbortSignal
      </code>
    </td>
    
    <td>
      Abort signal to cancel the in-flight upload.
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/vue/composables/use-upload.ts#L40" rel="nofollow">
        src/runtime/vue/composables/use-upload.ts:40
      </a>
    </td>
  </tr>
</tbody>
</table>

---

### UseUploadOptions

Defined in: [src/runtime/vue/composables/use-upload.ts:125](https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/vue/composables/use-upload.ts#L125)

Options for [useUpload](#useupload).

#### Properties

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

<tbody>
  <tr>
    <td>
      <a id="onprogress-1">
        
      </a>
      
       <code>
        onProgress?
      </code>
    </td>
    
    <td>
      (<code>
        progress
      </code>
      
      ) => <code>
        void
      </code>
    </td>
    
    <td>
      Called with upload progress as a fraction from <code>
        0
      </code>
      
       to <code>
        1
      </code>
      
      .
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/vue/composables/use-upload.ts#L127" rel="nofollow">
        src/runtime/vue/composables/use-upload.ts:127
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="onsuccess">
        
      </a>
      
       <code>
        onSuccess?
      </code>
    </td>
    
    <td>
      (<code>
        storageId
      </code>
      
      , <code>
        file
      </code>
      
      ) => <code>
        void
      </code>
      
       | <code>
        Promise
      </code>
      
      <<code>
        void
      </code>
      
      >
    </td>
    
    <td>
      Called once the file is stored, with the new storage id and the file.
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/vue/composables/use-upload.ts#L129" rel="nofollow">
        src/runtime/vue/composables/use-upload.ts:129
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="onerror">
        
      </a>
      
       <code>
        onError?
      </code>
    </td>
    
    <td>
      (<code>
        error
      </code>
      
      , <code>
        file
      </code>
      
      ) => <code>
        void
      </code>
    </td>
    
    <td>
      Called if generating the upload URL or the upload itself fails.
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/vue/composables/use-upload.ts#L131" rel="nofollow">
        src/runtime/vue/composables/use-upload.ts:131
      </a>
    </td>
  </tr>
</tbody>
</table>

---

### VueUpload

Defined in: [src/runtime/vue/composables/use-upload.ts:139](https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/vue/composables/use-upload.ts#L139)

The reactive uploader returned by [useUpload](#useupload).

#### Properties

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

<tbody>
  <tr>
    <td>
      <a id="upload">
        
      </a>
      
       <code>
        upload
      </code>
    </td>
    
    <td>
      (<code>
        file
      </code>
      
      ) => <code>
        Promise
      </code>
      
      <<a href="#storageid-1">
        <code>
          StorageId
        </code>
      </a>
      
       | <code>
        null
      </code>
      
      >
    </td>
    
    <td>
      Upload a file or blob, resolving to its <a href="#storageid-1">
        StorageId
      </a>
      
      . Resolves to <code>
        null
      </code>
      
       (instead of throwing) if the upload fails or is called outside the browser — inspect <a href="#error-1">
        VueUpload.error
      </a>
      
       for the reason.
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/vue/composables/use-upload.ts#L146" rel="nofollow">
        src/runtime/vue/composables/use-upload.ts:146
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="isuploading-1">
        
      </a>
      
       <code>
        isUploading
      </code>
    </td>
    
    <td>
      <code>
        Readonly
      </code>
      
      <<code>
        Ref
      </code>
      
      <<code>
        boolean
      </code>
      
      >>
    </td>
    
    <td>
      <code>
        true
      </code>
      
       while an upload is in flight.
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/vue/composables/use-upload.ts#L148" rel="nofollow">
        src/runtime/vue/composables/use-upload.ts:148
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="progress-2">
        
      </a>
      
       <code>
        progress
      </code>
    </td>
    
    <td>
      <code>
        Readonly
      </code>
      
      <<code>
        Ref
      </code>
      
      <<code>
        number
      </code>
      
      >>
    </td>
    
    <td>
      Upload progress of the current/last upload, from <code>
        0
      </code>
      
       to <code>
        1
      </code>
      
      .
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/vue/composables/use-upload.ts#L150" rel="nofollow">
        src/runtime/vue/composables/use-upload.ts:150
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="error-1">
        
      </a>
      
       <code>
        error
      </code>
    </td>
    
    <td>
      <code>
        Readonly
      </code>
      
      <<code>
        Ref
      </code>
      
      <<code>
        Error
      </code>
      
       | <code>
        null
      </code>
      
      >>
    </td>
    
    <td>
      The error from the most recent failed upload, or <code>
        null
      </code>
      
      .
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/vue/composables/use-upload.ts#L152" rel="nofollow">
        src/runtime/vue/composables/use-upload.ts:152
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="storageid-2">
        
      </a>
      
       <code>
        storageId
      </code>
    </td>
    
    <td>
      <code>
        Readonly
      </code>
      
      <<code>
        Ref
      </code>
      
      <<a href="#storageid-1">
        <code>
          StorageId
        </code>
      </a>
      
       | <code>
        null
      </code>
      
      >>
    </td>
    
    <td>
      The storage id from the most recent successful upload, or <code>
        null
      </code>
      
      .
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/vue/composables/use-upload.ts#L154" rel="nofollow">
        src/runtime/vue/composables/use-upload.ts:154
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="cancel-1">
        
      </a>
      
       <code>
        cancel
      </code>
    </td>
    
    <td>
      () => <code>
        void
      </code>
    </td>
    
    <td>
      Abort the in-flight upload, if any.
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/vue/composables/use-upload.ts#L156" rel="nofollow">
        src/runtime/vue/composables/use-upload.ts:156
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="reset">
        
      </a>
      
       <code>
        reset
      </code>
    </td>
    
    <td>
      () => <code>
        void
      </code>
    </td>
    
    <td>
      Reset <code>
        progress
      </code>
      
      , <code>
        error
      </code>
      
      , and <code>
        storageId
      </code>
      
       back to their initial values.
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/vue/composables/use-upload.ts#L158" rel="nofollow">
        src/runtime/vue/composables/use-upload.ts:158
      </a>
    </td>
  </tr>
</tbody>
</table>

## Type Aliases

### QueryOptions

```ts
type QueryOptions<Query> = {
  query: Query;
  args: FunctionArgs<Query>;
};
```

Defined in: node_modules/convex/dist/esm-types/browser/query_options.d.ts:9

Options for a Convex query: the query function reference and its arguments.

Used with the object-form overload of [useQuery](#usequery).

#### Type Parameters

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

<tbody>
  <tr>
    <td>
      <code>
        Query
      </code>
      
       <em>
        extends
      </em>
      
       | <a href="#functionreference">
        <code>
          FunctionReference
        </code>
      </a>
      
      <<code>
        "query"
      </code>
      
      > | <a href="#functionreference_future">
        <code>
          FunctionReference_future
        </code>
      </a>
      
      <<code>
        "query"
      </code>
      
      >
    </td>
  </tr>
</tbody>
</table>

#### Properties

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

<tbody>
  <tr>
    <td>
      <a id="query-1">
        
      </a>
      
       <code>
        query
      </code>
    </td>
    
    <td>
      <code>
        Query
      </code>
    </td>
    
    <td>
      The query function to run.
    </td>
    
    <td>
      node_modules/convex/dist/esm-types/browser/query_options.d.ts:13
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="args">
        
      </a>
      
       <code>
        args
      </code>
    </td>
    
    <td>
      <a href="#functionargs">
        <code>
          FunctionArgs
        </code>
      </a>
      
      <<code>
        Query
      </code>
      
      >
    </td>
    
    <td>
      The arguments to the query function.
    </td>
    
    <td>
      node_modules/convex/dist/esm-types/browser/query_options.d.ts:17
    </td>
  </tr>
</tbody>
</table>

---

### AuthTokenFetcher

```ts
type AuthTokenFetcher = (args) => Promise<string | null | undefined>;
```

Defined in: node_modules/convex/dist/esm-types/browser/sync/authentication_manager.d.ts:17

An async function returning a JWT. Depending on the auth providers
configured in convex/auth.config.ts, this may be a JWT-encoded OpenID
Connect Identity Token or a traditional JWT.

`forceRefreshToken` is `true` if the server rejected a previously
returned token or the token is anticipated to expiring soon
based on its `exp` time.

See ConvexReactClient.setAuth.

#### Parameters

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

<tbody>
  <tr>
    <td>
      <code>
        args
      </code>
    </td>
    
    <td>
      { <code>
        forceRefreshToken
      </code>
      
      : <code>
        boolean
      </code>
      
      ; }
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        args.forceRefreshToken
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
  </tr>
</tbody>
</table>

#### Returns

`Promise`<`string` | `null` | `undefined`>

---

### ConnectionState

```ts
type ConnectionState = {
  hasInflightRequests: boolean;
  isWebSocketConnected: boolean;
  timeOfOldestInflightRequest: Date | null;
  hasEverConnected: boolean;
  connectionCount: number;
  connectionRetries: number;
  inflightMutations: number;
  inflightActions: number;
};
```

Defined in: node_modules/convex/dist/esm-types/browser/sync/client.d.ts:116

State describing the client's connection with the Convex backend.

#### Properties

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

<tbody>
  <tr>
    <td>
      <a id="hasinflightrequests">
        
      </a>
      
       <code>
        hasInflightRequests
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      -
    </td>
    
    <td>
      node_modules/convex/dist/esm-types/browser/sync/client.d.ts:117
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="iswebsocketconnected">
        
      </a>
      
       <code>
        isWebSocketConnected
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      -
    </td>
    
    <td>
      node_modules/convex/dist/esm-types/browser/sync/client.d.ts:118
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="timeofoldestinflightrequest">
        
      </a>
      
       <code>
        timeOfOldestInflightRequest
      </code>
    </td>
    
    <td>
      <code>
        Date
      </code>
      
       | <code>
        null
      </code>
    </td>
    
    <td>
      -
    </td>
    
    <td>
      node_modules/convex/dist/esm-types/browser/sync/client.d.ts:119
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="haseverconnected">
        
      </a>
      
       <code>
        hasEverConnected
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      True if the client has ever opened a WebSocket to the "ready" state.
    </td>
    
    <td>
      node_modules/convex/dist/esm-types/browser/sync/client.d.ts:123
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="connectioncount">
        
      </a>
      
       <code>
        connectionCount
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      The number of times this client has connected to the Convex backend. A number of things can cause the client to reconnect -- server errors, bad internet, auth expiring. But this number being high is an indication that the client is having trouble keeping a stable connection.
    </td>
    
    <td>
      node_modules/convex/dist/esm-types/browser/sync/client.d.ts:131
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="connectionretries">
        
      </a>
      
       <code>
        connectionRetries
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      The number of times this client has tried (and failed) to connect to the Convex backend.
    </td>
    
    <td>
      node_modules/convex/dist/esm-types/browser/sync/client.d.ts:135
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="inflightmutations">
        
      </a>
      
       <code>
        inflightMutations
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      The number of mutations currently in flight.
    </td>
    
    <td>
      node_modules/convex/dist/esm-types/browser/sync/client.d.ts:139
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="inflightactions">
        
      </a>
      
       <code>
        inflightActions
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      The number of actions currently in flight.
    </td>
    
    <td>
      node_modules/convex/dist/esm-types/browser/sync/client.d.ts:143
    </td>
  </tr>
</tbody>
</table>

---

### OptimisticUpdate

```ts
type OptimisticUpdate<Args> = (localQueryStore, args) => void;
```

Defined in: node_modules/convex/dist/esm-types/browser/sync/optimistic_updates.d.ts:73

A temporary, local update to query results within this client.

This update will always be executed when a mutation is synced to the Convex
server and rolled back when the mutation completes.

Note that optimistic updates can be called multiple times! If the client
loads new data while the mutation is in progress, the update will be replayed
again.

#### Type Parameters

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

<tbody>
  <tr>
    <td>
      <code>
        Args
      </code>
      
       <em>
        extends
      </em>
      
       <code>
        Record
      </code>
      
      <<code>
        string
      </code>
      
      , <a href="#value">
        <code>
          Value
        </code>
      </a>
      
      >
    </td>
  </tr>
</tbody>
</table>

#### Parameters

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

<tbody>
  <tr>
    <td>
      <code>
        localQueryStore
      </code>
    </td>
    
    <td>
      <code>
        OptimisticLocalStore
      </code>
    </td>
    
    <td>
      An interface to read and edit local query results.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        args
      </code>
    </td>
    
    <td>
      <code>
        Args
      </code>
    </td>
    
    <td>
      The arguments to the mutation.
    </td>
  </tr>
</tbody>
</table>

#### Returns

`void`

---

### QueryJournal

```ts
type QueryJournal = string | null;
```

Defined in: node_modules/convex/dist/esm-types/browser/sync/protocol.d.ts:34

A serialized representation of decisions made during a query's execution.

A journal is produced when a query function first executes and is re-used
when a query is re-executed.

Currently this is used to store pagination end cursors to ensure
that pages of paginated queries will always end at the same cursor. This
enables gapless, reactive pagination.

`null` is used to represent empty journals.

---

### PaginatedQueryReference

```ts
type PaginatedQueryReference = FunctionReference<"query", "public", {
  paginationOpts: PaginationOptions;
}, PaginationResult<any>>;
```

Defined in: node_modules/convex/dist/esm-types/react/use_paginated_query.d.ts:16

A [`FunctionReference`](https://docs.convex.dev/api/modules/server#functionreference) that is usable with [usePaginatedQuery](#usepaginatedquery).

This function reference must:

- Refer to a public query
- Have an argument named "paginationOpts" of type server.PaginationOptions
- Have a return type of server.PaginationResult.

---

### UsePaginatedQueryResult

```ts
type UsePaginatedQueryResult<Item> = {
  results: Item[];
  loadMore: (numItems) => void;
} & 
  | {
  status: "LoadingFirstPage";
  isLoading: true;
}
  | {
  status: "CanLoadMore";
  isLoading: false;
}
  | {
  status: "LoadingMore";
  isLoading: true;
}
  | {
  status: "Exhausted";
  isLoading: false;
};
```

Defined in: node_modules/convex/dist/esm-types/react/use_paginated_query.d.ts:80

The result of calling the [usePaginatedQuery](#usepaginatedquery) hook.

This includes:

- `results` - An array of the currently loaded results.
- `isLoading` - Whether the hook is currently loading results.
- `status` - The status of the pagination. The possible statuses are:

  - "LoadingFirstPage": The hook is loading the first page of results.
  - "CanLoadMore": This query may have more items to fetch. Call `loadMore` to
  fetch another page.
  - "LoadingMore": We're currently loading another page of results.
  - "Exhausted": We've paginated to the end of the list.
- `loadMore(n)` A callback to fetch more results. This will only fetch more
results if the status is "CanLoadMore".

#### Type Declaration

<table>
<thead>
  <tr>
    <th>
      Name
    </th>
    
    <th>
      Type
    </th>
    
    <th>
      Defined in
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        results
      </code>
    </td>
    
    <td>
      <code>
        Item
      </code>
      
      <span>
        
      </span>
    </td>
    
    <td>
      node_modules/convex/dist/esm-types/react/use_paginated_query.d.ts:81
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        loadMore()
      </code>
    </td>
    
    <td>
      (<code>
        numItems
      </code>
      
      ) => <code>
        void
      </code>
    </td>
    
    <td>
      node_modules/convex/dist/esm-types/react/use_paginated_query.d.ts:82
    </td>
  </tr>
</tbody>
</table>

#### Type Parameters

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

<tbody>
  <tr>
    <td>
      <code>
        Item
      </code>
    </td>
  </tr>
</tbody>
</table>

---

### PaginationStatus

```ts
type PaginationStatus = UsePaginatedQueryResult<any>["status"];
```

Defined in: node_modules/convex/dist/esm-types/react/use_paginated_query.d.ts:102

The possible pagination statuses in [UsePaginatedQueryResult](#usepaginatedqueryresult).

This is a union of string literal types.

---

### PaginatedQueryArgs

```ts
type PaginatedQueryArgs<Query> = Expand<BetterOmit<FunctionArgs<Query>, "paginationOpts">>;
```

Defined in: node_modules/convex/dist/esm-types/react/use_paginated_query.d.ts:109

Given a [PaginatedQueryReference](#paginatedqueryreference), get the type of the arguments
object for the query, excluding the `paginationOpts` argument.

#### Type Parameters

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

<tbody>
  <tr>
    <td>
      <code>
        Query
      </code>
      
       <em>
        extends
      </em>
      
       <a href="#paginatedqueryreference">
        <code>
          PaginatedQueryReference
        </code>
      </a>
    </td>
  </tr>
</tbody>
</table>

---

### PaginatedQueryItem

```ts
type PaginatedQueryItem<Query> = FunctionReturnType<Query>["page"][number];
```

Defined in: node_modules/convex/dist/esm-types/react/use_paginated_query.d.ts:115

Given a [PaginatedQueryReference](#paginatedqueryreference), get the type of the item being
paginated over.

#### Type Parameters

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

<tbody>
  <tr>
    <td>
      <code>
        Query
      </code>
      
       <em>
        extends
      </em>
      
       <a href="#paginatedqueryreference">
        <code>
          PaginatedQueryReference
        </code>
      </a>
    </td>
  </tr>
</tbody>
</table>

---

### UsePaginatedQueryOptions

```ts
type UsePaginatedQueryOptions<Query, ThrowOnError> = {
  query: Query;
  args: PaginatedQueryArgs<Query> | "skip";
  initialNumItems: number;
  throwOnError?: ThrowOnError;
};
```

Defined in: node_modules/convex/dist/esm-types/react/use_paginated_query2.d.ts:7

Options for object-form [usePaginatedQuery_experimental](#usepaginatedquery_experimental).

#### Type Parameters

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

<tbody>
  <tr>
    <td>
      <code>
        Query
      </code>
      
       <em>
        extends
      </em>
      
       <a href="#paginatedqueryreference">
        <code>
          PaginatedQueryReference
        </code>
      </a>
    </td>
    
    <td>
      -
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        ThrowOnError
      </code>
      
       <em>
        extends
      </em>
      
       <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        false
      </code>
    </td>
  </tr>
</tbody>
</table>

#### Properties

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

<tbody>
  <tr>
    <td>
      <a id="query-5">
        
      </a>
      
       <code>
        query
      </code>
    </td>
    
    <td>
      <code>
        Query
      </code>
    </td>
    
    <td>
      -
    </td>
    
    <td>
      node_modules/convex/dist/esm-types/react/use_paginated_query2.d.ts:8
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="args-2">
        
      </a>
      
       <code>
        args
      </code>
    </td>
    
    <td>
      <a href="#paginatedqueryargs">
        <code>
          PaginatedQueryArgs
        </code>
      </a>
      
      <<code>
        Query
      </code>
      
      > | <code>
        "skip"
      </code>
    </td>
    
    <td>
      -
    </td>
    
    <td>
      node_modules/convex/dist/esm-types/react/use_paginated_query2.d.ts:9
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="initialnumitems">
        
      </a>
      
       <code>
        initialNumItems
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      -
    </td>
    
    <td>
      node_modules/convex/dist/esm-types/react/use_paginated_query2.d.ts:10
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="throwonerror-1">
        
      </a>
      
       <code>
        throwOnError?
      </code>
    </td>
    
    <td>
      <code>
        ThrowOnError
      </code>
    </td>
    
    <td>
      When <code>
        true
      </code>
      
       (default for positional form), errors are thrown and caught by an error boundary. When <code>
        false
      </code>
      
       (default for object form), errors are returned as <code>
        { status: "Error", error: Error }
      </code>
      
       instead of being thrown.
    </td>
    
    <td>
      node_modules/convex/dist/esm-types/react/use_paginated_query2.d.ts:16
    </td>
  </tr>
</tbody>
</table>

---

### UsePaginatedQueryObjectReturnType

```ts
type UsePaginatedQueryObjectReturnType<Query, ThrowOnError> = 
  | {
  data: PaginatedQueryItem<Query>[] | undefined;
  status: "pending";
  canLoadMore: false;
  isLoading: true;
  error: undefined;
  loadMore: (numItems) => void;
}
  | {
  data: PaginatedQueryItem<Query>[];
  status: "success";
  canLoadMore: boolean;
  isLoading: false;
  error: undefined;
  loadMore: (numItems) => void;
}
  | ThrowOnError extends true ? never : {
  data: PaginatedQueryItem<Query>[];
  status: "error";
  canLoadMore: false;
  isLoading: false;
  error: Error;
  loadMore: (numItems) => void;
};
```

Defined in: node_modules/convex/dist/esm-types/react/use_paginated_query2.d.ts:27

Return type of the object-form [usePaginatedQuery_experimental](#usepaginatedquery_experimental) overload.

Uses lowercase query status (`"pending" | "success" | "error"`) and a
`canLoadMore` boolean instead of the TitleCase pagination status strings
used by the positional form.

#### Type Parameters

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

<tbody>
  <tr>
    <td>
      <code>
        Query
      </code>
      
       <em>
        extends
      </em>
      
       <a href="#paginatedqueryreference">
        <code>
          PaginatedQueryReference
        </code>
      </a>
    </td>
    
    <td>
      -
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        ThrowOnError
      </code>
      
       <em>
        extends
      </em>
      
       <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        false
      </code>
    </td>
  </tr>
</tbody>
</table>

---

### RequestForQueries

```ts
type RequestForQueries = Record<string, {
  query: FunctionReference<"query">;
  args: Record<string, Value>;
}>;
```

Defined in: node_modules/convex/dist/esm-types/react/use_queries.d.ts:71

An object representing a request to load multiple queries.

The keys of this object are identifiers and the values are objects containing
the query function and the arguments to pass to it.

This is used as an argument to [useQueries](#usequeries).

---

### FunctionReference

```ts
type FunctionReference<Type, Visibility, Args, ReturnType, ComponentPath> = {
  _type: Type;
  _visibility: Visibility;
  _args: Args;
  _returnType: ReturnType;
  _componentPath: ComponentPath;
  _fn?: ReturnType;
};
```

Defined in: node_modules/convex/dist/esm-types/server/api.d.ts:44

A reference to a registered Convex function.

You can create a [FunctionReference](#functionreference) using the generated `api` utility:

```js
import { api } from "../convex/_generated/api";

const reference = api.myModule.myFunction;
```

If you aren't using code generation, you can create references using
anyApi:

```js
import { anyApi } from "convex/server";

const reference = anyApi.myModule.myFunction;
```

Function references can be used to invoke functions from the client. For
example, in React you can pass references to the react.useQuery hook:

```js
const result = useQuery(api.myModule.myFunction);
```

If you want to accept a `FunctionReference` as a callback argument, prefer
typing the callback parameter as [FunctionReference_future](#functionreference_future).

#### Type Parameters

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

<tbody>
  <tr>
    <td>
      <code>
        Type
      </code>
      
       <em>
        extends
      </em>
      
       <code>
        FunctionType
      </code>
    </td>
    
    <td>
      -
    </td>
    
    <td>
      The type of the function ("query", "mutation", or "action").
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        Visibility
      </code>
      
       <em>
        extends
      </em>
      
       <code>
        FunctionVisibility
      </code>
    </td>
    
    <td>
      <code>
        "public"
      </code>
    </td>
    
    <td>
      The visibility of the function ("public" or "internal").
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        Args
      </code>
      
       <em>
        extends
      </em>
      
       <code>
        DefaultFunctionArgs
      </code>
    </td>
    
    <td>
      <code>
        any
      </code>
    </td>
    
    <td>
      The arguments to this function. This is an object mapping argument names to their types.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        ReturnType
      </code>
    </td>
    
    <td>
      <code>
        any
      </code>
    </td>
    
    <td>
      The return type of this function.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        ComponentPath
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
      
       | <code>
        undefined
      </code>
    </td>
    
    <td>
      -
    </td>
  </tr>
</tbody>
</table>

#### Properties

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

<tbody>
  <tr>
    <td>
      <a id="_type">
        
      </a>
      
       <code>
        _type
      </code>
    </td>
    
    <td>
      <code>
        Type
      </code>
    </td>
    
    <td>
      -
    </td>
    
    <td>
      node_modules/convex/dist/esm-types/server/api.d.ts:45
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="_visibility">
        
      </a>
      
       <code>
        _visibility
      </code>
    </td>
    
    <td>
      <code>
        Visibility
      </code>
    </td>
    
    <td>
      -
    </td>
    
    <td>
      node_modules/convex/dist/esm-types/server/api.d.ts:46
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="_args">
        
      </a>
      
       <del>
        <code>
          _args
        </code>
      </del>
    </td>
    
    <td>
      <code>
        Args
      </code>
    </td>
    
    <td>
      To read the arguments for a <code>
        FunctionReference
      </code>
      
      , prefer <a href="#functionargs">
        FunctionArgs
      </a>
      
      . This slot will be removed in a future version. <strong>
        Deprecated
      </strong>
    </td>
    
    <td>
      node_modules/convex/dist/esm-types/server/api.d.ts:55
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="_returntype">
        
      </a>
      
       <del>
        <code>
          _returnType
        </code>
      </del>
    </td>
    
    <td>
      <code>
        ReturnType
      </code>
    </td>
    
    <td>
      To read the return type of a <code>
        FunctionReference
      </code>
      
      , prefer <a href="#functionreturntype">
        FunctionReturnType
      </a>
      
      . This slot will be removed in a future version. <strong>
        Deprecated
      </strong>
    </td>
    
    <td>
      node_modules/convex/dist/esm-types/server/api.d.ts:64
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="_componentpath">
        
      </a>
      
       <code>
        _componentPath
      </code>
    </td>
    
    <td>
      <code>
        ComponentPath
      </code>
    </td>
    
    <td>
      -
    </td>
    
    <td>
      node_modules/convex/dist/esm-types/server/api.d.ts:65
    </td>
  </tr>
</tbody>
</table>

#### Methods

##### _fn()?

```ts
optional _fn(args, keys): ReturnType;
```

Defined in: node_modules/convex/dist/esm-types/server/api.d.ts:70

To read the arguments or return type of a `FunctionReference`, prefer
[FunctionArgs](#functionargs) and [FunctionReturnType](#functionreturntype).

###### Parameters

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

<tbody>
  <tr>
    <td>
      <code>
        args
      </code>
    </td>
    
    <td>
      <code>
        Args
      </code>
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        keys
      </code>
    </td>
    
    <td>
      <code>
        FunctionReferenceArgKeys
      </code>
      
      <<code>
        Args
      </code>
      
      >
    </td>
  </tr>
</tbody>
</table>

###### Returns

`ReturnType`

---

### FunctionReference_future

```ts
type FunctionReference_future<Type, Visibility, Args, ReturnType, ComponentPath> = {
  _type: Type;
  _visibility: Visibility;
  _componentPath: ComponentPath;
  _fn?: (args, keys) => ReturnType;
};
```

Defined in: node_modules/convex/dist/esm-types/server/api.d.ts:174

A reference to a Convex function whose arguments are checked closer to the
way Convex checks them at runtime.

Use this instead of [FunctionReference](#functionreference) when you accept someone else's
Convex function as a callback and know which arguments you will pass it.

A plain `FunctionReference` gets a couple things backwards: it accepts a
function requiring arguments you never pass, and rejects a function
accepting broader values than you pass. An ordinary TypeScript function type
doesn't map perfectly either: it treats a surplus argument as harmless,
where a Convex validator rejects it.

This type melds regular TypeScript function reference behavior with top
level checking of arguments to prevent surplus arguments from hitting
runtime validation errors. The caveat: a surplus key inside a nested object,
an array element, or one arm of a union passes the type check and fails the
validator at runtime.

```ts
import { FunctionReference_future } from "convex/server";

declare function onComplete(
  fn: FunctionReference_future<
    "mutation",
    "internal",
    { taskId: string; force: boolean },
    null
  >,
): void;

// Takes exactly `{ taskId: string; force: boolean }`.
onComplete(internal.tasks.finish);
// Takes `{ taskId: string | number; force?: boolean }`: calling it is safe.
onComplete(internal.tasks.finishLoosely);
// Requires a `reason` argument that `onComplete` never passes.
onComplete(internal.tasks.finishWithReason);
//          ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ rejected
// Takes only `{ taskId: string }`: its validator would reject `force`.
onComplete(internal.tasks.finishById);
//          ~~~~~~~~~~~~~~~~~~~~~~~~ rejected
```

A value of this type is usable with `ctx.runMutation`,
`ctx.scheduler.runAfter`, `createFunctionHandle`, and everything else in
this package that takes a reference, all of which accept either kind.

It is *not* assignable to a plain `FunctionReference`. Code that wants to
accept both kinds should take
`FunctionReference<...> | FunctionReference_future<...>` and read arguments
and return types through [FunctionArgs](#functionargs) and [FunctionReturnType](#functionreturntype).

Argument checking here relies on `strictFunctionTypes` (implied by `strict`)
and is skipped for projects that disable it. Everything else about the
reference is compared exactly as `FunctionReference` compares it.

#### Type Parameters

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

<tbody>
  <tr>
    <td>
      <code>
        Type
      </code>
      
       <em>
        extends
      </em>
      
       <code>
        FunctionType
      </code>
    </td>
    
    <td>
      -
    </td>
    
    <td>
      The type of the function ("query", "mutation", or "action").
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        Visibility
      </code>
      
       <em>
        extends
      </em>
      
       <code>
        FunctionVisibility
      </code>
    </td>
    
    <td>
      <code>
        "public"
      </code>
    </td>
    
    <td>
      The visibility of the function ("public" or "internal").
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        Args
      </code>
      
       <em>
        extends
      </em>
      
       <code>
        DefaultFunctionArgs
      </code>
    </td>
    
    <td>
      <code>
        any
      </code>
    </td>
    
    <td>
      The arguments the consumer of the reference will pass.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        ReturnType
      </code>
    </td>
    
    <td>
      <code>
        any
      </code>
    </td>
    
    <td>
      The return type of this function.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        ComponentPath
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
      
       | <code>
        undefined
      </code>
    </td>
    
    <td>
      -
    </td>
  </tr>
</tbody>
</table>

#### Properties

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

<tbody>
  <tr>
    <td>
      <a id="_type-1">
        
      </a>
      
       <code>
        _type
      </code>
    </td>
    
    <td>
      <code>
        Type
      </code>
    </td>
    
    <td>
      node_modules/convex/dist/esm-types/server/api.d.ts:175
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="_visibility-1">
        
      </a>
      
       <code>
        _visibility
      </code>
    </td>
    
    <td>
      <code>
        Visibility
      </code>
    </td>
    
    <td>
      node_modules/convex/dist/esm-types/server/api.d.ts:176
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="_componentpath-1">
        
      </a>
      
       <code>
        _componentPath
      </code>
    </td>
    
    <td>
      <code>
        ComponentPath
      </code>
    </td>
    
    <td>
      node_modules/convex/dist/esm-types/server/api.d.ts:177
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="_fn-1">
        
      </a>
      
       <code>
        _fn?
      </code>
    </td>
    
    <td>
      (<code>
        args
      </code>
      
      , <code>
        keys
      </code>
      
      ) => <code>
        ReturnType
      </code>
    </td>
    
    <td>
      node_modules/convex/dist/esm-types/server/api.d.ts:178
    </td>
  </tr>
</tbody>
</table>

---

### FunctionArgs

```ts
type FunctionArgs<FuncRef> = ExtractSignature<FuncRef>["args"];
```

Defined in: node_modules/convex/dist/esm-types/server/api.d.ts:347

Given a [FunctionReference](#functionreference) or [FunctionReference_future](#functionreference_future), get
the arguments of the function.

This is represented as an object mapping argument names to values.

#### Type Parameters

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

<tbody>
  <tr>
    <td>
      <code>
        FuncRef
      </code>
      
       <em>
        extends
      </em>
      
       | <a href="#functionreference">
        <code>
          FunctionReference
        </code>
      </a>
      
      <<code>
        any
      </code>
      
      , <code>
        any
      </code>
      
      > | <a href="#functionreference_future">
        <code>
          FunctionReference_future
        </code>
      </a>
      
      <<code>
        any
      </code>
      
      , <code>
        any
      </code>
      
      >
    </td>
  </tr>
</tbody>
</table>

---

### OptionalRestArgs

```ts
type OptionalRestArgs<FuncRef> = FunctionArgs<FuncRef> extends EmptyObject ? [EmptyObject] : [FunctionArgs<FuncRef>];
```

Defined in: node_modules/convex/dist/esm-types/server/api.d.ts:371

A tuple type of the (maybe optional) arguments to `FuncRef`.

This type is used to make methods involving arguments type safe while allowing
skipping the arguments for functions that don't require arguments.

#### Type Parameters

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

<tbody>
  <tr>
    <td>
      <code>
        FuncRef
      </code>
      
       <em>
        extends
      </em>
      
       | <a href="#functionreference">
        <code>
          FunctionReference
        </code>
      </a>
      
      <<code>
        any
      </code>
      
      , <code>
        any
      </code>
      
      > | <a href="#functionreference_future">
        <code>
          FunctionReference_future
        </code>
      </a>
      
      <<code>
        any
      </code>
      
      , <code>
        any
      </code>
      
      >
    </td>
  </tr>
</tbody>
</table>

---

### ArgsAndOptions

```ts
type ArgsAndOptions<FuncRef, Options> = FunctionArgs<FuncRef> extends EmptyObject ? [EmptyObject, Options] : [FunctionArgs<FuncRef>, Options];
```

Defined in: node_modules/convex/dist/esm-types/server/api.d.ts:381

A tuple type of the (maybe optional) arguments to `FuncRef`, followed by an options
object of type `Options`.

This type is used to make methods like `useQuery` type-safe while allowing

1. Skipping arguments for functions that don't require arguments.
2. Skipping the options object.

#### Type Parameters

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

<tbody>
  <tr>
    <td>
      <code>
        FuncRef
      </code>
      
       <em>
        extends
      </em>
      
       | <a href="#functionreference">
        <code>
          FunctionReference
        </code>
      </a>
      
      <<code>
        any
      </code>
      
      , <code>
        any
      </code>
      
      > | <a href="#functionreference_future">
        <code>
          FunctionReference_future
        </code>
      </a>
      
      <<code>
        any
      </code>
      
      , <code>
        any
      </code>
      
      >
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        Options
      </code>
    </td>
  </tr>
</tbody>
</table>

---

### FunctionReturnType

```ts
type FunctionReturnType<FuncRef> = ExtractSignature<FuncRef>["returnType"];
```

Defined in: node_modules/convex/dist/esm-types/server/api.d.ts:388

Given a [FunctionReference](#functionreference) or [FunctionReference_future](#functionreference_future), get
the return type of the function.

#### Type Parameters

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

<tbody>
  <tr>
    <td>
      <code>
        FuncRef
      </code>
      
       <em>
        extends
      </em>
      
       | <a href="#functionreference">
        <code>
          FunctionReference
        </code>
      </a>
      
      <<code>
        any
      </code>
      
      , <code>
        any
      </code>
      
      > | <a href="#functionreference_future">
        <code>
          FunctionReference_future
        </code>
      </a>
      
      <<code>
        any
      </code>
      
      , <code>
        any
      </code>
      
      >
    </td>
  </tr>
</tbody>
</table>

---

### Value

```ts
type Value = 
  | null
  | bigint
  | number
  | boolean
  | string
  | ArrayBuffer
  | CommitTsPlaceholder
  | Value[]
  | {
[key: string]: Value | undefined;
};
```

Defined in: node_modules/convex/dist/esm-types/values/value.d.ts:45

A value supported by Convex.

Values can be:

- stored inside of documents.
- used as arguments and return types to queries and mutation functions.

You can see the full set of supported types at
[Types](https://docs.convex.dev/using/types).

---

### IConvexVueClient

```ts
type IConvexVueClient = {
  setAuth: void;
  clearAuth: void;
};
```

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

#### Methods

##### setAuth()

```ts
setAuth(
   fetchToken, 
   onChange, 
   onRefreshChange?
): void;
```

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

###### Parameters

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

<tbody>
  <tr>
    <td>
      <code>
        fetchToken
      </code>
    </td>
    
    <td>
      <a href="#authtokenfetcher">
        <code>
          AuthTokenFetcher
        </code>
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        onChange
      </code>
    </td>
    
    <td>
      (<code>
        isAuthenticated
      </code>
      
      ) => <code>
        void
      </code>
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        onRefreshChange?
      </code>
    </td>
    
    <td>
      (<code>
        isRefreshing
      </code>
      
      ) => <code>
        void
      </code>
    </td>
  </tr>
</tbody>
</table>

###### Returns

`void`

##### clearAuth()

```ts
clearAuth(): void;
```

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

###### Returns

`void`

---

### ConvexAuthState

```ts
type ConvexAuthState = {
  isLoading: ComputedRef<boolean>;
  isAuthenticated: ComputedRef<boolean>;
  isRefreshing: ComputedRef<boolean>;
};
```

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

Type representing the state of an auth integration with Convex.

- `isLoading`: the client is still resolving the initial auth state and
waiting for the server to confirm the current token.
- `isAuthenticated`: the server has confirmed the current token.
- `isRefreshing`: the server rejected a previously-confirmed token and the
socket is paused while a replacement is fetched. Only ever `true` when
`isAuthenticated` is also `true`. Routine background token rotation does
not trigger this state.

Each field is a `ComputedRef` (the Vue translation of upstream's re-rendered
plain booleans), so the upstream destructuring idiom stays reactive:
`const { isLoading, isAuthenticated } = useConvexAuth()`.

#### Properties

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

<tbody>
  <tr>
    <td>
      <a id="isloading">
        
      </a>
      
       <code>
        isLoading
      </code>
    </td>
    
    <td>
      <code>
        ComputedRef
      </code>
      
      <<code>
        boolean
      </code>
      
      >
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/vue/auth/index.ts#L36" rel="nofollow">
        src/runtime/vue/auth/index.ts:36
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="isauthenticated">
        
      </a>
      
       <code>
        isAuthenticated
      </code>
    </td>
    
    <td>
      <code>
        ComputedRef
      </code>
      
      <<code>
        boolean
      </code>
      
      >
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/vue/auth/index.ts#L37" rel="nofollow">
        src/runtime/vue/auth/index.ts:37
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="isrefreshing">
        
      </a>
      
       <code>
        isRefreshing
      </code>
    </td>
    
    <td>
      <code>
        ComputedRef
      </code>
      
      <<code>
        boolean
      </code>
      
      >
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/vue/auth/index.ts#L38" rel="nofollow">
        src/runtime/vue/auth/index.ts:38
      </a>
    </td>
  </tr>
</tbody>
</table>

---

### VueMutationOptions

```ts
type VueMutationOptions<Args> = MutationOptions<Args>;
```

Defined in: [src/runtime/vue/client.ts:129](https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/vue/client.ts#L129)

#### Type Parameters

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

<tbody>
  <tr>
    <td>
      <code>
        Args
      </code>
      
       <em>
        extends
      </em>
      
       <code>
        Record
      </code>
      
      <<code>
        string
      </code>
      
      , <a href="#value">
        <code>
          Value
        </code>
      </a>
      
      >
    </td>
  </tr>
</tbody>
</table>

---

### ConvexLogger

```ts
type ConvexLogger = Exclude<BaseConvexClientOptions["logger"], boolean | undefined>;
```

Defined in: [src/runtime/vue/client.ts:148](https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/vue/client.ts#L148)

The logger type accepted by [ConvexVueClientOptions.logger](#logger) — the
public shape of convex's non-exported `Logger`.

---

### UsePaginatedQueryReturnType

```ts
type UsePaginatedQueryReturnType<Query> = {
  results: ComputedRef<PaginatedQueryItem<Query>[]>;
  status: ComputedRef<PaginationStatus>;
  isLoading: ComputedRef<boolean>;
  loadMore: (numItems) => void;
};
```

Defined in: [src/runtime/vue/composables/use-paginated-query.ts:530](https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/vue/composables/use-paginated-query.ts#L530)

Return shape of [usePaginatedQuery](#usepaginatedquery) — the fields of upstream's
`UsePaginatedQueryResult` as `ComputedRef`s plus a *stable* `loadMore`
function. This is the Vue translation of upstream's per-render plain object:
it keeps the documented destructuring idiom reactive,
`const { results, status, loadMore } = usePaginatedQuery(...)`.

(Upstream's name is kept even though the shape is ref-wrapped — the same
treatment as `ConvexAuthState` — so mechanically ported type annotations
keep compiling. The plain union stays available as
[UsePaginatedQueryResult](#usepaginatedqueryresult).)

#### Type Parameters

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

<tbody>
  <tr>
    <td>
      <code>
        Query
      </code>
      
       <em>
        extends
      </em>
      
       <a href="#paginatedqueryreference">
        <code>
          PaginatedQueryReference
        </code>
      </a>
    </td>
  </tr>
</tbody>
</table>

#### Properties

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

<tbody>
  <tr>
    <td>
      <a id="results">
        
      </a>
      
       <code>
        results
      </code>
    </td>
    
    <td>
      <code>
        ComputedRef
      </code>
      
      <<a href="#paginatedqueryitem">
        <code>
          PaginatedQueryItem
        </code>
      </a>
      
      <<code>
        Query
      </code>
      
      ><span>
        
      </span>
      
      >
    </td>
    
    <td>
      -
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/vue/composables/use-paginated-query.ts#L531" rel="nofollow">
        src/runtime/vue/composables/use-paginated-query.ts:531
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="status">
        
      </a>
      
       <code>
        status
      </code>
    </td>
    
    <td>
      <code>
        ComputedRef
      </code>
      
      <<a href="#paginationstatus">
        <code>
          PaginationStatus
        </code>
      </a>
      
      >
    </td>
    
    <td>
      -
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/vue/composables/use-paginated-query.ts#L532" rel="nofollow">
        src/runtime/vue/composables/use-paginated-query.ts:532
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="isloading-1">
        
      </a>
      
       <code>
        isLoading
      </code>
    </td>
    
    <td>
      <code>
        ComputedRef
      </code>
      
      <<code>
        boolean
      </code>
      
      >
    </td>
    
    <td>
      -
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/vue/composables/use-paginated-query.ts#L533" rel="nofollow">
        src/runtime/vue/composables/use-paginated-query.ts:533
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="loadmore">
        
      </a>
      
       <code>
        loadMore
      </code>
    </td>
    
    <td>
      (<code>
        numItems
      </code>
      
      ) => <code>
        void
      </code>
    </td>
    
    <td>
      Fetch <code>
        numItems
      </code>
      
       more results. Stable across state changes; only fetches when <code>
        status
      </code>
      
       is <code>
        'CanLoadMore'
      </code>
      
       (matching the documented semantics).
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/vue/composables/use-paginated-query.ts#L538" rel="nofollow">
        src/runtime/vue/composables/use-paginated-query.ts:538
      </a>
    </td>
  </tr>
</tbody>
</table>

---

### OptionalRestArgsOrSkip

```ts
type OptionalRestArgsOrSkip<FuncRef> = FunctionArgs<FuncRef> extends Record<string, never> ? [MaybeRefOrGetter<Record<string, never> | "skip">] : [MaybeRefOrGetter<FunctionArgs<FuncRef> | "skip">];
```

Defined in: [src/runtime/vue/composables/use-query.ts:16](https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/vue/composables/use-query.ts#L16)

#### Type Parameters

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

<tbody>
  <tr>
    <td>
      <code>
        FuncRef
      </code>
      
       <em>
        extends
      </em>
      
       | <a href="#functionreference">
        <code>
          FunctionReference
        </code>
      </a>
      
      <<code>
        any
      </code>
      
      > | <a href="#functionreference_future">
        <code>
          FunctionReference_future
        </code>
      </a>
      
      <<code>
        any
      </code>
      
      >
    </td>
  </tr>
</tbody>
</table>

---

### UseQueryResult

```ts
type UseQueryResult<QueryResult, ThrowOnError> = ConvexUseQueryResult<QueryResult, ThrowOnError>;
```

Defined in: [src/runtime/vue/composables/use-query.ts:29](https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/vue/composables/use-query.ts#L29)

**Experimental**

Result returned by object-form [useQuery_experimental](#usequery_experimental).

May change in a minor release — see STABILITY.md.

#### Type Parameters

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

<tbody>
  <tr>
    <td>
      <code>
        QueryResult
      </code>
    </td>
    
    <td>
      -
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        ThrowOnError
      </code>
      
       <em>
        extends
      </em>
      
       <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        false
      </code>
    </td>
  </tr>
</tbody>
</table>

---

### GetStorageUrl

```ts
type GetStorageUrl = FunctionReference<"query", "public", {
  storageId: StorageId;
}, string | null>;
```

Defined in: [src/runtime/vue/composables/use-storage-url.ts:12](https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/vue/composables/use-storage-url.ts#L12)

A `getUrl` query: takes `{ storageId }` and returns the file's served URL,
or `null` if the file no longer exists (`await ctx.storage.getUrl(id)`).

---

### UploadItemStatus

```ts
type UploadItemStatus = "pending" | "uploading" | "success" | "error";
```

Defined in: [src/runtime/vue/composables/use-upload-queue.ts:10](https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/vue/composables/use-upload-queue.ts#L10)

Lifecycle status of a single item in an upload queue.

---

### EnqueueInput

```ts
type EnqueueInput = Blob | Blob[] | FileList | null | undefined;
```

Defined in: [src/runtime/vue/composables/use-upload-queue.ts:49](https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/vue/composables/use-upload-queue.ts#L49)

Accepted inputs to [VueUploadQueue.enqueue](#enqueue).

---

### GenerateUploadUrl

```ts
type GenerateUploadUrl = FunctionReference<"mutation", "public", Record<string, never>, string>;
```

Defined in: [src/runtime/vue/composables/use-upload.ts:12](https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/vue/composables/use-upload.ts#L12)

A `generateUploadUrl` mutation: takes no arguments and returns a one-time
Convex upload URL string (`await ctx.storage.generateUploadUrl()`).

---

### StorageId

```ts
type StorageId = GenericId<"_storage">;
```

Defined in: [src/runtime/vue/composables/use-upload.ts:25](https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/vue/composables/use-upload.ts#L25)

A Convex file storage id (`Id<'_storage'>`), branded so it is directly
assignable to mutation/query args validated with `v.id('_storage')`.

---

### Preloaded

```ts
type Preloaded<Query> = {
  __type: Query;
  _name: string;
  _argsJSON: string;
  _valueJSON: string;
};
```

Defined in: [src/runtime/vue/hydration.ts:14](https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/vue/hydration.ts#L14)

The preloaded query payload, which should be passed to a client component
and passed to [usePreloadedQuery](#usepreloadedquery).

#### Type Parameters

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

<tbody>
  <tr>
    <td>
      <code>
        Query
      </code>
      
       <em>
        extends
      </em>
      
       | <a href="#functionreference">
        <code>
          FunctionReference
        </code>
      </a>
      
      <<code>
        "query"
      </code>
      
      > | <a href="#functionreference_future">
        <code>
          FunctionReference_future
        </code>
      </a>
      
      <<code>
        "query"
      </code>
      
      >
    </td>
  </tr>
</tbody>
</table>

#### Properties

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

<tbody>
  <tr>
    <td>
      <a id="__type-10">
        
      </a>
      
       <code>
        __type
      </code>
    </td>
    
    <td>
      <code>
        Query
      </code>
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/vue/hydration.ts#L15" rel="nofollow">
        src/runtime/vue/hydration.ts:15
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="_name">
        
      </a>
      
       <code>
        _name
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/vue/hydration.ts#L16" rel="nofollow">
        src/runtime/vue/hydration.ts:16
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="_argsjson">
        
      </a>
      
       <code>
        _argsJSON
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/vue/hydration.ts#L17" rel="nofollow">
        src/runtime/vue/hydration.ts:17
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="_valuejson">
        
      </a>
      
       <code>
        _valueJSON
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/vue/hydration.ts#L18" rel="nofollow">
        src/runtime/vue/hydration.ts:18
      </a>
    </td>
  </tr>
</tbody>
</table>

---

### ConvexApi

```ts
type ConvexApi = Record<string, Record<string, unknown>>;
```

Defined in: [src/runtime/vue/provide.ts:9](https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/vue/provide.ts#L9)

The consumer's generated Convex `api` object (`#convex/api`). Its exact shape
is app-specific, so it's kept loose here — composables and components cast the
namespaces they consume (`api.billing`, `api.email`, …) to the precise
`FunctionReference` types they expect.

## Variables

### Authenticated

```ts
const Authenticated: DefineComponent<{
}, () => 
  | VNode<RendererNode, RendererElement, {
[key: string]: any;
}>[]
  | null
  | undefined, {
}, {
}, {
}, ComponentOptionsMixin, ComponentOptionsMixin, {
}, string, PublicProps, ToResolvedProps<{
}, {
}>, {
}, {
}, {
}, {
}, string, ComponentProvideOptions, true, {
}, any>;
```

Defined in: [src/runtime/vue/auth/helpers.ts:16](https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/vue/auth/helpers.ts#L16)

Renders the default slot if the client is authenticated.

#### Example

```vue
<Authenticated>
  <p>You are logged in!</p>
</Authenticated>
```

---

### Unauthenticated

```ts
const Unauthenticated: DefineComponent<{
}, () => 
  | VNode<RendererNode, RendererElement, {
[key: string]: any;
}>[]
  | null
  | undefined, {
}, {
}, {
}, ComponentOptionsMixin, ComponentOptionsMixin, {
}, string, PublicProps, ToResolvedProps<{
}, {
}>, {
}, {
}, {
}, {
}, string, ComponentProvideOptions, true, {
}, any>;
```

Defined in: [src/runtime/vue/auth/helpers.ts:41](https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/vue/auth/helpers.ts#L41)

Renders the default slot if the client is using authentication but is not authenticated.

#### Example

```vue
<Unauthenticated>
  <p>Please log in.</p>
</Unauthenticated>
```

---

### AuthLoading

```ts
const AuthLoading: DefineComponent<{
}, () => 
  | VNode<RendererNode, RendererElement, {
[key: string]: any;
}>[]
  | null
  | undefined, {
}, {
}, {
}, ComponentOptionsMixin, ComponentOptionsMixin, {
}, string, PublicProps, ToResolvedProps<{
}, {
}>, {
}, {
}, {
}, {
}, string, ComponentProvideOptions, true, {
}, any>;
```

Defined in: [src/runtime/vue/auth/helpers.ts:67](https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/vue/auth/helpers.ts#L67)

Renders the default slot if the client isn't using authentication or is in the process
of authenticating.

#### Example

```vue
<AuthLoading>
  <p>Checking authentication...</p>
</AuthLoading>
```

---

### AuthRefreshing

```ts
const AuthRefreshing: DefineComponent<{
}, () => 
  | VNode<RendererNode, RendererElement, {
[key: string]: any;
}>[]
  | null
  | undefined, {
}, {
}, {
}, ComponentOptionsMixin, ComponentOptionsMixin, {
}, string, PublicProps, ToResolvedProps<{
}, {
}>, {
}, {
}, {
}, {
}, string, ComponentProvideOptions, true, {
}, any>;
```

Defined in: [src/runtime/vue/auth/helpers.ts:98](https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/vue/auth/helpers.ts#L98)

Renders the default slot while the client is refreshing the auth token for an
already-authenticated session (the server rejected the current token and
the socket is paused while a new one is fetched). Routine background
token rotation does not trigger this state.

Whether used inside of `<Authenticated>` or not, the default slot will only be
rendered if the user is authenticated.

#### Example

```vue
<AuthRefreshing>
  <p>Refreshing token...</p>
</AuthRefreshing>
```

---

### ConvexAuthStateKey

```ts
const ConvexAuthStateKey: InjectionKey<ConvexAuthState>;
```

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

---

### ConvexClientKey

```ts
const ConvexClientKey: InjectionKey<ConvexVueClient>;
```

Defined in: [src/runtime/vue/client.ts:630](https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/vue/client.ts#L630)

Vue injection key for the [ConvexVueClient](#convexvueclient).

---

### ConvexImage

```ts
const ConvexImage: DefineComponent<ExtractPropTypes<{
  getUrl: {
     type: PropType<GetStorageUrl>;
     required: true;
  };
  storageId: {
     type: PropType<string | StorageId | null | undefined>;
     default: undefined;
  };
}>, () => 
  | VNode<RendererNode, RendererElement, {
[key: string]: any;
}>
  | VNode<RendererNode, RendererElement, {
[key: string]: any;
}>[]
  | null, {
}, {
}, {
}, ComponentOptionsMixin, ComponentOptionsMixin, {
}, string, PublicProps, ToResolvedProps<ExtractPropTypes<{
  getUrl: {
     type: PropType<GetStorageUrl>;
     required: true;
  };
  storageId: {
     type: PropType<string | StorageId | null | undefined>;
     default: undefined;
  };
}>, {
}>, {
  storageId: string | StorageId | null | undefined;
}, {
}, {
}, {
}, string, ComponentProvideOptions, true, {
}, any>;
```

Defined in: [src/runtime/vue/components/convex-image.ts:24](https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/vue/components/convex-image.ts#L24)

An `<img>` for a file in Convex storage. Resolves the served URL through
[useStorageUrl](#usestorageurl) and renders the image once it is known; every other
attribute (`alt`, `class`, `loading`, `width`, …) goes onto the `<img>`.

- default slot — rendered while the URL is loading or `storageId` is empty
- `missing` slot — rendered when the file no longer exists (the query returned `null`)

#### Example

```vue
<ConvexImage :get-url="api.files.url" :storage-id="doc.imageId" alt="Cover" class="rounded">
  <div class="skeleton" />
  <template #missing><div class="placeholder" /></template>
</ConvexImage>
```

---

### useConvexAction

```ts
const useConvexAction: <Action>(action) => VueAction<Action> = useAction;
```

Defined in: [src/runtime/vue/composables/use-action.ts:90](https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/vue/composables/use-action.ts#L90)

Construct a new [VueAction](#vueaction).

Returns a function that you can call to execute a Convex action. Actions
can call third-party APIs and perform side effects. The returned function
is stable for the lifetime of the composable (same reference identity).

**Error handling:** Actions can fail (e.g., if an external API is down).
Always wrap action calls in try/catch or handle the rejected promise.

**Note:** In most cases, calling an action directly from a client is an
anti-pattern. Prefer having the client call a mutation that captures the
user's intent (by writing to the database) and then schedules the action
via `ctx.scheduler.runAfter`. This ensures the intent is durably recorded
even if the client disconnects.

Throws an error if no Convex client has been provided.

#### Type Parameters

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

<tbody>
  <tr>
    <td>
      <code>
        Action
      </code>
      
       <em>
        extends
      </em>
      
       | <a href="#functionreference">
        <code>
          FunctionReference
        </code>
      </a>
      
      <<code>
        "action"
      </code>
      
      > | <a href="#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 <a href="https://docs.convex.dev/api/modules/server#functionreference" rel="nofollow">
        <code>
          FunctionReference
        </code>
      </a>
      
       for the public action to run like <code>
        api.dir1.dir2.filename.func
      </code>
      
      .
    </td>
  </tr>
</tbody>
</table>

#### Returns

[`VueAction`](#vueaction)<`Action`>

The [VueAction](#vueaction) object with that name.

#### Example

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

const generate = useAction(api.ai.generateSummary)

async function handleClick() {
  try {
    const summary = await generate({ text: 'Some long text...' })
    console.log(summary)
  } catch (error) {
    console.error('Action failed:', error)
  }
}
</script>
```

---

### useConvexMutation

```ts
const useConvexMutation: <Mutation>(mutation) => VueMutation<Mutation> = useMutation;
```

Defined in: [src/runtime/vue/composables/use-mutation.ts:129](https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/vue/composables/use-mutation.ts#L129)

Construct a new [VueMutation](#vuemutation).

Returns a function that you can call to execute a Convex mutation. The
returned function is stable for the lifetime of the composable (same
reference identity), so it can be safely passed around and memoized.

Mutations can optionally be configured with
[optimistic updates](https://docs.convex.dev/client/react/optimistic-updates)
for instant UI feedback.

Throws an error if no Convex client has been provided.

#### Type Parameters

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

<tbody>
  <tr>
    <td>
      <code>
        Mutation
      </code>
      
       <em>
        extends
      </em>
      
       | <a href="#functionreference">
        <code>
          FunctionReference
        </code>
      </a>
      
      <<code>
        "mutation"
      </code>
      
      > | <a href="#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 <a href="https://docs.convex.dev/api/modules/server#functionreference" rel="nofollow">
        <code>
          FunctionReference
        </code>
      </a>
      
       for the public mutation to run like <code>
        api.dir1.dir2.filename.func
      </code>
      
      .
    </td>
  </tr>
</tbody>
</table>

#### Returns

[`VueMutation`](#vuemutation)<`Mutation`>

The [VueMutation](#vuemutation) object with that name.

#### Example

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

const createTask = useMutation(api.tasks.create)

async function handleClick() {
  await createTask({ text: 'New task' })
}
</script>
```

---

### useConvexPaginatedQuery

```ts
const useConvexPaginatedQuery: <Query>(query, args, options) => UsePaginatedQueryReturnType<Query> = usePaginatedQuery;
```

Defined in: [src/runtime/vue/composables/use-paginated-query.ts:546](https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/vue/composables/use-paginated-query.ts#L546)

Load data reactively from a paginated query to create a growing list.

This can be used to power "infinite scroll" UIs.

#### Type Parameters

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

<tbody>
  <tr>
    <td>
      <code>
        Query
      </code>
      
       <em>
        extends
      </em>
      
       <a href="#paginatedqueryreference">
        <code>
          PaginatedQueryReference
        </code>
      </a>
    </td>
  </tr>
</tbody>
</table>

#### Parameters

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

<tbody>
  <tr>
    <td>
      <code>
        query
      </code>
    </td>
    
    <td>
      <code>
        Query
      </code>
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        args
      </code>
    </td>
    
    <td>
      <code>
        MaybeRefOrGetter
      </code>
      
      <<a href="#paginatedqueryargs">
        <code>
          PaginatedQueryArgs
        </code>
      </a>
      
      <<code>
        Query
      </code>
      
      > | <code>
        "skip"
      </code>
      
      >
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        options
      </code>
    </td>
    
    <td>
      { <code>
        initialNumItems
      </code>
      
      : <code>
        number
      </code>
      
      ; }
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        options.initialNumItems
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
  </tr>
</tbody>
</table>

#### Returns

[`UsePaginatedQueryReturnType`](#usepaginatedqueryreturntype)<`Query`>

#### Example

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

const { results, status, loadMore } = usePaginatedQuery(
  api.messages.list,
  { channel: '#general' },
  { initialNumItems: 5 },
)
</script>

<template>
  <div v-for="{ _id, body } in results" :key="_id">{{ body }}</div>
  <button :disabled="status !== 'CanLoadMore'" @click="loadMore(5)">Load More</button>
</template>
```

---

### useConvexQueries

```ts
const useConvexQueries: (queries) => ShallowRef<Record<string, any>> = useQueries;
```

Defined in: [src/runtime/vue/composables/use-queries.ts:156](https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/vue/composables/use-queries.ts#L156)

Load a variable number of reactive Convex queries.

`useQueries` is similar to [useQuery](#usequery) but it allows
loading multiple queries which can be useful for loading a dynamic number
of queries without violating the rules of composables.

This composable accepts an object whose keys are identifiers for each query and the
values are objects of
`{ query: FunctionReference | FunctionReference_future, args: Record<string, Value> }`.
The `query` is a reference to the Convex query function to load, and the
`args` are the arguments to that function.

The composable returns an object that maps each identifier to the result of the query,
`undefined` if the query is still loading, or an instance of `Error` if the query
threw an exception.

For example if you loaded a query like:

```typescript
const results = useQueries({
  messagesInGeneral: {
    query: "listMessages",
    args: { channel: "#general" }
  }
});
```

then the result would look like:

```typescript
{
  messagesInGeneral: [{
    channel: "#general",
    body: "hello"
    _id: ...,
    _creationTime: ...
  }]
}
```

This composable returns a reactive result that updates
whenever any of the query results change.

Throws an error if no Convex client has been provided (see [useConvex](#useconvex)).

#### Parameters

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

<tbody>
  <tr>
    <td>
      <code>
        queries
      </code>
    </td>
    
    <td>
      <code>
        MaybeRefOrGetter
      </code>
      
      <<code>
        RequestForQueriesCompat
      </code>
      
      >
    </td>
    
    <td>
      An object mapping identifiers to objects of <code>
        {query: string, args: Record<string, Value> }
      </code>
      
       describing which query functions to fetch. Reactive (ref/computed/getter) or plain.
    </td>
  </tr>
</tbody>
</table>

#### Returns

`ShallowRef`<`Record`<`string`, `any`>>

A shallow ref of an object with the same keys as the input. The
values are the result of the query function, `undefined` if it's still
loading, or an `Error` if it threw an exception.

---

### useConvexQuery

```ts
const useConvexQuery: <Query>(query, ...args) => ComputedRef<FunctionReturnType<Query> | undefined> = useQuery;
```

Defined in: [src/runtime/vue/composables/use-query.ts:212](https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/vue/composables/use-query.ts#L212)

Load a reactive query within a Vue component.

This Vue composable subscribes to a Convex query and updates the returned
ref whenever the query result changes. The subscription is managed
automatically -- it starts when the component mounts and stops when it
unmounts.

Throws an error if no Convex client has been provided.

#### Type Parameters

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

<tbody>
  <tr>
    <td>
      <code>
        Query
      </code>
      
       <em>
        extends
      </em>
      
       | <a href="#functionreference">
        <code>
          FunctionReference
        </code>
      </a>
      
      <<code>
        "query"
      </code>
      
      > | <a href="#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 <a href="https://docs.convex.dev/api/modules/server#functionreference" rel="nofollow">
        <code>
          FunctionReference
        </code>
      </a>
      
       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="#optionalrestargsorskip">
        <code>
          OptionalRestArgsOrSkip
        </code>
      </a>
      
      <<code>
        Query
      </code>
      
      >
    </td>
    
    <td>
      The arguments to the query function or the string <code>
        "skip"
      </code>
      
       if the query should not be loaded. Accepts a ref, computed, or getter for reactive args.
    </td>
  </tr>
</tbody>
</table>

#### Returns

`ComputedRef`<[`FunctionReturnType`](#functionreturntype)<`Query`> | `undefined`>

a computed ref with the result of the query. Contains `undefined`
while loading.

#### Example

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

// Reactively loads tasks; the ref updates when data changes:
const tasks = useQuery(api.tasks.list, { completed: false })
// tasks.value is `undefined` while loading

// Pass "skip" (or a reactive getter returning it) to conditionally
// disable the query:
const profile = useQuery(
  api.users.get,
  computed(() => userId.value ? { userId: userId.value } : 'skip'),
)
</script>
```

---

### useConvexStorageUrl

```ts
const useConvexStorageUrl: (getUrl, storageId) => ComputedRef<string | null | undefined> = useStorageUrl;
```

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

Reactively resolve the served URL for a Convex stored file.

Thin wrapper over [useQuery](#usequery) that handles the common ergonomics of
serving stored files: it accepts a reactive storage id and automatically
skips the query (returning `undefined`) while the id is `null`/`undefined`,
so you can bind it straight to an id ref without juggling `'skip'`.

#### Parameters

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

<tbody>
  <tr>
    <td>
      <code>
        getUrl
      </code>
    </td>
    
    <td>
      <a href="#getstorageurl">
        <code>
          GetStorageUrl
        </code>
      </a>
    </td>
    
    <td>
      A <code>
        FunctionReference
      </code>
      
       for the public <code>
        getUrl
      </code>
      
       query.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        storageId
      </code>
    </td>
    
    <td>
      <code>
        MaybeRefOrGetter
      </code>
      
      <<code>
        string
      </code>
      
       | <a href="#storageid-1">
        <code>
          StorageId
        </code>
      </a>
      
       | <code>
        null
      </code>
      
       | <code>
        undefined
      </code>
      
      >
    </td>
    
    <td>
      The storage id to resolve. Accepts a ref, computed, or getter; <code>
        null
      </code>
      
      /<code>
        undefined
      </code>
      
       skips the query.
    </td>
  </tr>
</tbody>
</table>

#### Returns

`ComputedRef`<`string` | `null` | `undefined`>

A computed ref of the served URL: `string | null` once loaded
(`null` if the file is gone), or `undefined` while loading or skipped.

#### Example

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

const { storageId } = useUpload(api.images.generateUploadUrl)
const url = useStorageUrl(api.images.getUrl, storageId)
</script>

<template>
  <img v-if="url" :src="url">
</template>
```

---

### useConvexUploadQueue

```ts
const useConvexUploadQueue: (generateUploadUrl, options) => VueUploadQueue = useUploadQueue;
```

Defined in: [src/runtime/vue/composables/use-upload-queue.ts:253](https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/vue/composables/use-upload-queue.ts#L253)

Upload many files to Convex file storage with bounded concurrency and
per-item reactive progress.

Built on the same flow as [useUpload](#useupload), but manages a queue: call
[VueUploadQueue.enqueue](#enqueue) with one or more files (or a `FileList` from
a multi-file `<input>`) and the queue uploads up to `concurrency` at a time,
exposing per-item and aggregate progress.

#### Parameters

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

<tbody>
  <tr>
    <td>
      <code>
        generateUploadUrl
      </code>
    </td>
    
    <td>
      <a href="#generateuploadurl">
        <code>
          GenerateUploadUrl
        </code>
      </a>
    </td>
    
    <td>
      A <code>
        FunctionReference
      </code>
      
       for the public <code>
        generateUploadUrl
      </code>
      
       mutation.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        options
      </code>
    </td>
    
    <td>
      <a href="#useuploadqueueoptions">
        <code>
          UseUploadQueueOptions
        </code>
      </a>
    </td>
    
    <td>
      Optional <a href="#useuploadqueueoptions">
        UseUploadQueueOptions
      </a>
      
      .
    </td>
  </tr>
</tbody>
</table>

#### Returns

[`VueUploadQueue`](#vueuploadqueue)

A [VueUploadQueue](#vueuploadqueue).

#### Example

```vue
<script setup lang="ts">
import { useUploadQueue, useMutation } from '#imports'
import { api } from '#convex/api'

const saveImage = useMutation(api.images.save)
const { items, enqueue, progress, isUploading } = useUploadQueue(
  api.images.generateUploadUrl,
  { concurrency: 4, onItemSuccess: storageId => saveImage({ storageId }) },
)

function onPick(event: Event) {
  enqueue((event.target as HTMLInputElement).files)
}
</script>

<template>
  <input type="file" multiple @change="onPick">
  <progress v-if="isUploading" :value="progress" />
  <ul>
    <li v-for="item in items" :key="item.id">
      {{ item.status }} — {{ Math.round(item.progress * 100) }}%
    </li>
  </ul>
</template>
```

---

### useConvexUpload

```ts
const useConvexUpload: (generateUploadUrl, options) => VueUpload = useUpload;
```

Defined in: [src/runtime/vue/composables/use-upload.ts:281](https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/vue/composables/use-upload.ts#L281)

Upload files to Convex file storage from a component, with reactive
progress, error, and cancellation state.

Wraps the standard Convex flow — call a `generateUploadUrl` mutation, `POST`
the file to the returned URL, and read back the storage id — and exposes it
as reactive refs. Pass the resulting [StorageId](#storageid-1) to your own mutation
to persist it in your data model.

Uploads are client-only: calling `upload()` during SSR resolves to `null`
and sets [VueUpload.error](#error-1).

#### Parameters

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

<tbody>
  <tr>
    <td>
      <code>
        generateUploadUrl
      </code>
    </td>
    
    <td>
      <a href="#generateuploadurl">
        <code>
          GenerateUploadUrl
        </code>
      </a>
    </td>
    
    <td>
      A <code>
        FunctionReference
      </code>
      
       for the public <code>
        generateUploadUrl
      </code>
      
       mutation.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        options
      </code>
    </td>
    
    <td>
      <a href="#useuploadoptions">
        <code>
          UseUploadOptions
        </code>
      </a>
    </td>
    
    <td>
      Optional <a href="#useuploadoptions">
        UseUploadOptions
      </a>
      
       callbacks.
    </td>
  </tr>
</tbody>
</table>

#### Returns

[`VueUpload`](#vueupload)

A [VueUpload](#vueupload).

#### Example

```vue
<script setup lang="ts">
import { useUpload, useMutation } from '#imports'
import { api } from '#convex/api'

const saveImage = useMutation(api.images.save)
const { upload, isUploading, progress, error } = useUpload(
  api.images.generateUploadUrl,
  { onSuccess: storageId => saveImage({ storageId }) },
)

async function onPick(event: Event) {
  const file = (event.target as HTMLInputElement).files?.[0]
  if (file) await upload(file)
}
</script>

<template>
  <input type="file" :disabled="isUploading" @change="onPick">
  <progress v-if="isUploading" :value="progress" />
  <p v-if="error">{{ error.message }}</p>
</template>
```

---

### ConvexApiKey

```ts
const ConvexApiKey: InjectionKey<ConvexApi>;
```

Defined in: [src/runtime/vue/provide.ts:12](https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/vue/provide.ts#L12)

## Functions

### useConvexAuth()

```ts
function useConvexAuth(): {
  isLoading: ComputedRef<boolean>;
  isAuthenticated: ComputedRef<boolean>;
  isRefreshing: ComputedRef<boolean>;
};
```

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

Get the [ConvexAuthState](#convexauthstate) within a Vue component.

This relies on a Convex auth integration provider being above in the Vue
component tree. See [ConvexAuthState](#convexauthstate) for the meaning of each field.

#### Returns

```ts
{
  isLoading: ComputedRef<boolean>;
  isAuthenticated: ComputedRef<boolean>;
  isRefreshing: ComputedRef<boolean>;
}
```

The current [ConvexAuthState](#convexauthstate).

<table>
<thead>
  <tr>
    <th>
      Name
    </th>
    
    <th>
      Type
    </th>
    
    <th>
      Defined in
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        isLoading
      </code>
    </td>
    
    <td>
      <code>
        ComputedRef
      </code>
      
      <<code>
        boolean
      </code>
      
      >
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/vue/auth/index.ts#L55" rel="nofollow">
        src/runtime/vue/auth/index.ts:55
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        isAuthenticated
      </code>
    </td>
    
    <td>
      <code>
        ComputedRef
      </code>
      
      <<code>
        boolean
      </code>
      
      >
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/vue/auth/index.ts#L56" rel="nofollow">
        src/runtime/vue/auth/index.ts:56
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        isRefreshing
      </code>
    </td>
    
    <td>
      <code>
        ComputedRef
      </code>
      
      <<code>
        boolean
      </code>
      
      >
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/vue/auth/index.ts#L57" rel="nofollow">
        src/runtime/vue/auth/index.ts:57
      </a>
    </td>
  </tr>
</tbody>
</table>

---

### provideConvexAuth()

```ts
function provideConvexAuth(options): ConvexAuthState;
```

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

A replacement for the plain Convex client provide (upstream's
`ConvexProvider`) which additionally provides [ConvexAuthState](#convexauthstate) to
descendants of the calling component.

Use this to integrate any auth provider with Convex. The `useAuth` option
should be a Vue composable that returns the provider's authentication state
and a function to fetch a JWT access token.

If the returned `fetchAccessToken` ref identity (or the optional
`authVersion` value) updates then auth state
will transition to loading and the `fetchAccessToken()` function called again.

See [Custom Auth Integration](https://docs.convex.dev/auth/advanced/custom-auth) for more information.

#### Parameters

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

<tbody>
  <tr>
    <td>
      <code>
        options
      </code>
    </td>
    
    <td>
      <a href="#convexauthprovideroptions">
        <code>
          ConvexAuthProviderOptions
        </code>
      </a>
    </td>
    
    <td>
      Auth integration options including the Convex client and an <code>
        useAuth
      </code>
      
       factory that returns loading state and a token fetcher.
    </td>
  </tr>
</tbody>
</table>

#### Returns

[`ConvexAuthState`](#convexauthstate)

The reactive auth state.

#### Example

```vue
<script setup lang="ts">
import { useAuth } from '~/composables/useMyAuthProvider'  // your auth provider

const client = useConvex()
const authState = provideConvexAuth({ client, useAuth })
</script>
```

---

### createConvexAuthState()

```ts
function createConvexAuthState(options, scope?): ConvexAuthState;
```

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

Build reactive [ConvexAuthState](#convexauthstate) and wire watchers between the
external auth provider and the Convex client, without calling `provide()` —
the body of upstream's `ConvexProviderWithAuth` component.

Use this when you need to install the state at the Nuxt app level
(`nuxtApp.vueApp.provide`) rather than from a component's setup function.

When `scope` is provided, all watchers are created inside that
`EffectScope` so callers can dispose them later.

#### Parameters

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

<tbody>
  <tr>
    <td>
      <code>
        options
      </code>
    </td>
    
    <td>
      <a href="#convexauthprovideroptions">
        <code>
          ConvexAuthProviderOptions
        </code>
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        scope?
      </code>
    </td>
    
    <td>
      <code>
        EffectScope
      </code>
    </td>
  </tr>
</tbody>
</table>

#### Returns

[`ConvexAuthState`](#convexauthstate)

---

### createScopedConvexAuthState()

```ts
function createScopedConvexAuthState(options): {
  state: ConvexAuthState;
  scope: EffectScope;
};
```

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

Create a fresh `EffectScope` and build a Convex auth state inside it.
The scope is returned so the caller can `.stop()` it on teardown.

#### Parameters

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

<tbody>
  <tr>
    <td>
      <code>
        options
      </code>
    </td>
    
    <td>
      <a href="#convexauthprovideroptions">
        <code>
          ConvexAuthProviderOptions
        </code>
      </a>
    </td>
  </tr>
</tbody>
</table>

#### Returns

```ts
{
  state: ConvexAuthState;
  scope: EffectScope;
}
```

<table>
<thead>
  <tr>
    <th>
      Name
    </th>
    
    <th>
      Type
    </th>
    
    <th>
      Defined in
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        state
      </code>
    </td>
    
    <td>
      <a href="#convexauthstate">
        <code>
          ConvexAuthState
        </code>
      </a>
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/vue/auth/index.ts#L303" rel="nofollow">
        src/runtime/vue/auth/index.ts:303
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        scope
      </code>
    </td>
    
    <td>
      <code>
        EffectScope
      </code>
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/vue/auth/index.ts#L303" rel="nofollow">
        src/runtime/vue/auth/index.ts:303
      </a>
    </td>
  </tr>
</tbody>
</table>

---

### useConvex()

```ts
function useConvex(): ConvexVueClient;
```

Defined in: [src/runtime/vue/client.ts:642](https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/vue/client.ts#L642)

Get the [ConvexVueClient](#convexvueclient) within a Vue component.

This relies on the client having been provided under [ConvexClientKey](#convexclientkey)
(the Nuxt plugin does this automatically).

#### Returns

[`ConvexVueClient`](#convexvueclient)

The active [ConvexVueClient](#convexvueclient) object, or `undefined`.

---

### useAction()

```ts
function useAction<Action>(action): VueAction<Action>;
```

Defined in: [src/runtime/vue/composables/use-action.ts:74](https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/vue/composables/use-action.ts#L74)

Construct a new [VueAction](#vueaction).

Returns a function that you can call to execute a Convex action. Actions
can call third-party APIs and perform side effects. The returned function
is stable for the lifetime of the composable (same reference identity).

**Error handling:** Actions can fail (e.g., if an external API is down).
Always wrap action calls in try/catch or handle the rejected promise.

**Note:** In most cases, calling an action directly from a client is an
anti-pattern. Prefer having the client call a mutation that captures the
user's intent (by writing to the database) and then schedules the action
via `ctx.scheduler.runAfter`. This ensures the intent is durably recorded
even if the client disconnects.

Throws an error if no Convex client has been provided.

#### Type Parameters

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

<tbody>
  <tr>
    <td>
      <code>
        Action
      </code>
      
       <em>
        extends
      </em>
      
       | <a href="#functionreference">
        <code>
          FunctionReference
        </code>
      </a>
      
      <<code>
        "action"
      </code>
      
      > | <a href="#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 <a href="https://docs.convex.dev/api/modules/server#functionreference" rel="nofollow">
        <code>
          FunctionReference
        </code>
      </a>
      
       for the public action to run like <code>
        api.dir1.dir2.filename.func
      </code>
      
      .
    </td>
  </tr>
</tbody>
</table>

#### Returns

[`VueAction`](#vueaction)<`Action`>

The [VueAction](#vueaction) object with that name.

#### Example

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

const generate = useAction(api.ai.generateSummary)

async function handleClick() {
  try {
    const summary = await generate({ text: 'Some long text...' })
    console.log(summary)
  } catch (error) {
    console.error('Action failed:', error)
  }
}
</script>
```

---

### useConvexConnectionState()

```ts
function useConvexConnectionState(): ShallowRef<ConnectionState>;
```

Defined in: [src/runtime/vue/composables/use-connection-state.ts:34](https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/vue/composables/use-connection-state.ts#L34)

**Experimental**

Vue composable to get the current [ConnectionState](#connectionstate) and subscribe to changes.

This composable returns a shallow ref of the current connection state that
automatically updates when any part of the connection state changes (e.g.,
when going online/offline, when requests start/complete, etc.).

The shape of ConnectionState may change in the future which may cause this
composable to update more frequently.

Throws an error if no Convex client has been provided.

#### Returns

`ShallowRef`<[`ConnectionState`](#connectionstate)>

The current [ConnectionState](#connectionstate) with the Convex deployment.

May change in a minor release — see STABILITY.md.

#### Example

```vue
<script setup lang="ts">
const conn = useConvexConnectionState()
</script>

<template>
  <span v-if="!conn.isWebSocketConnected">Offline</span>
</template>
```

---

### useMutation()

```ts
function useMutation<Mutation>(mutation): VueMutation<Mutation>;
```

Defined in: [src/runtime/vue/composables/use-mutation.ts:113](https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/vue/composables/use-mutation.ts#L113)

Construct a new [VueMutation](#vuemutation).

Returns a function that you can call to execute a Convex mutation. The
returned function is stable for the lifetime of the composable (same
reference identity), so it can be safely passed around and memoized.

Mutations can optionally be configured with
[optimistic updates](https://docs.convex.dev/client/react/optimistic-updates)
for instant UI feedback.

Throws an error if no Convex client has been provided.

#### Type Parameters

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

<tbody>
  <tr>
    <td>
      <code>
        Mutation
      </code>
      
       <em>
        extends
      </em>
      
       | <a href="#functionreference">
        <code>
          FunctionReference
        </code>
      </a>
      
      <<code>
        "mutation"
      </code>
      
      > | <a href="#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 <a href="https://docs.convex.dev/api/modules/server#functionreference" rel="nofollow">
        <code>
          FunctionReference
        </code>
      </a>
      
       for the public mutation to run like <code>
        api.dir1.dir2.filename.func
      </code>
      
      .
    </td>
  </tr>
</tbody>
</table>

#### Returns

[`VueMutation`](#vuemutation)<`Mutation`>

The [VueMutation](#vuemutation) object with that name.

#### Example

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

const createTask = useMutation(api.tasks.create)

async function handleClick() {
  await createTask({ text: 'New task' })
}
</script>
```

---

### usePaginatedQuery()

```ts
function usePaginatedQuery<Query>(
   query, 
   args, 
   options
): UsePaginatedQueryReturnType<Query>;
```

Defined in: [src/runtime/vue/composables/use-paginated-query.ts:204](https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/vue/composables/use-paginated-query.ts#L204)

Load data reactively from a paginated query to create a growing list.

This can be used to power "infinite scroll" UIs.

#### Type Parameters

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

<tbody>
  <tr>
    <td>
      <code>
        Query
      </code>
      
       <em>
        extends
      </em>
      
       <a href="#paginatedqueryreference">
        <code>
          PaginatedQueryReference
        </code>
      </a>
    </td>
  </tr>
</tbody>
</table>

#### Parameters

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

<tbody>
  <tr>
    <td>
      <code>
        query
      </code>
    </td>
    
    <td>
      <code>
        Query
      </code>
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        args
      </code>
    </td>
    
    <td>
      <code>
        MaybeRefOrGetter
      </code>
      
      <<a href="#paginatedqueryargs">
        <code>
          PaginatedQueryArgs
        </code>
      </a>
      
      <<code>
        Query
      </code>
      
      > | <code>
        "skip"
      </code>
      
      >
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        options
      </code>
    </td>
    
    <td>
      { <code>
        initialNumItems
      </code>
      
      : <code>
        number
      </code>
      
      ; }
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        options.initialNumItems
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
  </tr>
</tbody>
</table>

#### Returns

[`UsePaginatedQueryReturnType`](#usepaginatedqueryreturntype)<`Query`>

#### Example

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

const { results, status, loadMore } = usePaginatedQuery(
  api.messages.list,
  { channel: '#general' },
  { initialNumItems: 5 },
)
</script>

<template>
  <div v-for="{ _id, body } in results" :key="_id">{{ body }}</div>
  <button :disabled="status !== 'CanLoadMore'" @click="loadMore(5)">Load More</button>
</template>
```

---

### resetPaginationId()

```ts
function resetPaginationId(): void;
```

Defined in: [src/runtime/vue/composables/use-paginated-query.ts:512](https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/vue/composables/use-paginated-query.ts#L512)

**Experimental**

Reset pagination id for tests only, so tests know what it is.
May change in a minor release — see STABILITY.md.

#### Returns

`void`

---

### optimisticallyUpdateValueInPaginatedQuery()

```ts
function optimisticallyUpdateValueInPaginatedQuery<Query>(
   localStore, 
   query, 
   args, 
   updateValue
): void;
```

Defined in: [src/runtime/vue/composables/use-paginated-query.ts:553](https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/vue/composables/use-paginated-query.ts#L553)

Optimistically update values in a paginated list.

#### Type Parameters

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

<tbody>
  <tr>
    <td>
      <code>
        Query
      </code>
      
       <em>
        extends
      </em>
      
       <a href="#paginatedqueryreference">
        <code>
          PaginatedQueryReference
        </code>
      </a>
    </td>
  </tr>
</tbody>
</table>

#### Parameters

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

<tbody>
  <tr>
    <td>
      <code>
        localStore
      </code>
    </td>
    
    <td>
      <code>
        OptimisticLocalStore
      </code>
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        query
      </code>
    </td>
    
    <td>
      <code>
        Query
      </code>
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        args
      </code>
    </td>
    
    <td>
      <a href="#paginatedqueryargs">
        <code>
          PaginatedQueryArgs
        </code>
      </a>
      
      <<code>
        Query
      </code>
      
      >
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        updateValue
      </code>
    </td>
    
    <td>
      (<code>
        currentValue
      </code>
      
      ) => <a href="#paginatedqueryitem">
        <code>
          PaginatedQueryItem
        </code>
      </a>
      
      <<code>
        Query
      </code>
      
      >
    </td>
  </tr>
</tbody>
</table>

#### Returns

`void`

---

### insertAtTop()

```ts
function insertAtTop<Query>(options): void;
```

Defined in: [src/runtime/vue/composables/use-paginated-query.ts:595](https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/vue/composables/use-paginated-query.ts#L595)

Insert an item at the top of a paginated list, regardless of sort order.

Only updates if the first page is already loaded — otherwise the insertion
would flash in/out once the real first page arrives.

#### Type Parameters

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

<tbody>
  <tr>
    <td>
      <code>
        Query
      </code>
      
       <em>
        extends
      </em>
      
       <a href="#paginatedqueryreference">
        <code>
          PaginatedQueryReference
        </code>
      </a>
    </td>
  </tr>
</tbody>
</table>

#### Parameters

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

<tbody>
  <tr>
    <td>
      <code>
        options
      </code>
    </td>
    
    <td>
      { <code>
        paginatedQuery
      </code>
      
      : <code>
        Query
      </code>
      
      ; <code>
        argsToMatch?
      </code>
      
      : <code>
        Partial
      </code>
      
      <<a href="#paginatedqueryargs">
        <code>
          PaginatedQueryArgs
        </code>
      </a>
      
      <<code>
        Query
      </code>
      
      >>; <code>
        localQueryStore
      </code>
      
      : <code>
        OptimisticLocalStore
      </code>
      
      ; <code>
        item
      </code>
      
      : <a href="#paginatedqueryitem">
        <code>
          PaginatedQueryItem
        </code>
      </a>
      
      <<code>
        Query
      </code>
      
      >; }
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        options.paginatedQuery
      </code>
    </td>
    
    <td>
      <code>
        Query
      </code>
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        options.argsToMatch?
      </code>
    </td>
    
    <td>
      <code>
        Partial
      </code>
      
      <<a href="#paginatedqueryargs">
        <code>
          PaginatedQueryArgs
        </code>
      </a>
      
      <<code>
        Query
      </code>
      
      >>
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        options.localQueryStore
      </code>
    </td>
    
    <td>
      <code>
        OptimisticLocalStore
      </code>
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        options.item
      </code>
    </td>
    
    <td>
      <a href="#paginatedqueryitem">
        <code>
          PaginatedQueryItem
        </code>
      </a>
      
      <<code>
        Query
      </code>
      
      >
    </td>
  </tr>
</tbody>
</table>

#### Returns

`void`

---

### insertAtBottomIfLoaded()

```ts
function insertAtBottomIfLoaded<Query>(options): void;
```

Defined in: [src/runtime/vue/composables/use-paginated-query.ts:624](https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/vue/composables/use-paginated-query.ts#L624)

Insert an item at the bottom of a paginated list, but only if the final
page has loaded (otherwise it would pop out when the server responds).

#### Type Parameters

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

<tbody>
  <tr>
    <td>
      <code>
        Query
      </code>
      
       <em>
        extends
      </em>
      
       <a href="#paginatedqueryreference">
        <code>
          PaginatedQueryReference
        </code>
      </a>
    </td>
  </tr>
</tbody>
</table>

#### Parameters

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

<tbody>
  <tr>
    <td>
      <code>
        options
      </code>
    </td>
    
    <td>
      { <code>
        paginatedQuery
      </code>
      
      : <code>
        Query
      </code>
      
      ; <code>
        argsToMatch?
      </code>
      
      : <code>
        Partial
      </code>
      
      <<a href="#paginatedqueryargs">
        <code>
          PaginatedQueryArgs
        </code>
      </a>
      
      <<code>
        Query
      </code>
      
      >>; <code>
        localQueryStore
      </code>
      
      : <code>
        OptimisticLocalStore
      </code>
      
      ; <code>
        item
      </code>
      
      : <a href="#paginatedqueryitem">
        <code>
          PaginatedQueryItem
        </code>
      </a>
      
      <<code>
        Query
      </code>
      
      >; }
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        options.paginatedQuery
      </code>
    </td>
    
    <td>
      <code>
        Query
      </code>
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        options.argsToMatch?
      </code>
    </td>
    
    <td>
      <code>
        Partial
      </code>
      
      <<a href="#paginatedqueryargs">
        <code>
          PaginatedQueryArgs
        </code>
      </a>
      
      <<code>
        Query
      </code>
      
      >>
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        options.localQueryStore
      </code>
    </td>
    
    <td>
      <code>
        OptimisticLocalStore
      </code>
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        options.item
      </code>
    </td>
    
    <td>
      <a href="#paginatedqueryitem">
        <code>
          PaginatedQueryItem
        </code>
      </a>
      
      <<code>
        Query
      </code>
      
      >
    </td>
  </tr>
</tbody>
</table>

#### Returns

`void`

---

### insertAtPosition()

```ts
function insertAtPosition<Query>(options): void;
```

Defined in: [src/runtime/vue/composables/use-paginated-query.ts:663](https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/vue/composables/use-paginated-query.ts#L663)

Insert an item at its sorted position across loaded pages of a paginated
query, given a sort order and a function deriving the sort key.

#### Type Parameters

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

<tbody>
  <tr>
    <td>
      <code>
        Query
      </code>
      
       <em>
        extends
      </em>
      
       <a href="#paginatedqueryreference">
        <code>
          PaginatedQueryReference
        </code>
      </a>
    </td>
  </tr>
</tbody>
</table>

#### Parameters

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

<tbody>
  <tr>
    <td>
      <code>
        options
      </code>
    </td>
    
    <td>
      { <code>
        paginatedQuery
      </code>
      
      : <code>
        Query
      </code>
      
      ; <code>
        argsToMatch?
      </code>
      
      : <code>
        Partial
      </code>
      
      <<a href="#paginatedqueryargs">
        <code>
          PaginatedQueryArgs
        </code>
      </a>
      
      <<code>
        Query
      </code>
      
      >>; <code>
        sortOrder
      </code>
      
      : <code>
        "asc"
      </code>
      
       | <code>
        "desc"
      </code>
      
      ; <code>
        sortKeyFromItem
      </code>
      
      : (<code>
        item
      </code>
      
      ) => <a href="#value">
        <code>
          Value
        </code>
      </a>
      
       | <a href="#value">
        <code>
          Value
        </code>
      </a>
      
      <span>
        
      </span>
      
      ; <code>
        localQueryStore
      </code>
      
      : <code>
        OptimisticLocalStore
      </code>
      
      ; <code>
        item
      </code>
      
      : <a href="#paginatedqueryitem">
        <code>
          PaginatedQueryItem
        </code>
      </a>
      
      <<code>
        Query
      </code>
      
      >; }
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        options.paginatedQuery
      </code>
    </td>
    
    <td>
      <code>
        Query
      </code>
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        options.argsToMatch?
      </code>
    </td>
    
    <td>
      <code>
        Partial
      </code>
      
      <<a href="#paginatedqueryargs">
        <code>
          PaginatedQueryArgs
        </code>
      </a>
      
      <<code>
        Query
      </code>
      
      >>
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        options.sortOrder
      </code>
    </td>
    
    <td>
      <code>
        "asc"
      </code>
      
       | <code>
        "desc"
      </code>
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        options.sortKeyFromItem
      </code>
    </td>
    
    <td>
      (<code>
        item
      </code>
      
      ) => <a href="#value">
        <code>
          Value
        </code>
      </a>
      
       | <a href="#value">
        <code>
          Value
        </code>
      </a>
      
      <span>
        
      </span>
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        options.localQueryStore
      </code>
    </td>
    
    <td>
      <code>
        OptimisticLocalStore
      </code>
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        options.item
      </code>
    </td>
    
    <td>
      <a href="#paginatedqueryitem">
        <code>
          PaginatedQueryItem
        </code>
      </a>
      
      <<code>
        Query
      </code>
      
      >
    </td>
  </tr>
</tbody>
</table>

#### Returns

`void`

---

### usePaginatedQuery_experimental()

#### Call Signature

```ts
function usePaginatedQuery_experimental<Query>(
   query, 
   args, 
   options
): UsePaginatedQueryReturnType<Query>;
```

Defined in: [src/runtime/vue/composables/use-paginated-query.ts:866](https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/vue/composables/use-paginated-query.ts#L866)

**Experimental**

Experimental paginated query that adds an object-form overload on top of the
positional [usePaginatedQuery](#usepaginatedquery), mirroring the public name React's
Convex integration exposes (`usePaginatedQuery_experimental`).

The positional overload behaves exactly like [usePaginatedQuery](#usepaginatedquery): it
returns the object-of-refs [UsePaginatedQueryReturnType](#usepaginatedqueryreturntype) (TitleCase
statuses) and throws on error. The object overload returns a `ComputedRef`
of the lowercase-status discriminated union
[UsePaginatedQueryObjectReturnType](#usepaginatedqueryobjectreturntype) — kept whole (not split into refs)
so the `status`/`data`/`error` type narrowing survives — and surfaces errors
via `status: 'error'` (unless `throwOnError: true`).

Note: React backs its experimental hook with the Convex client's native
`PaginatedQueryClient`, which the published `convex` package does not export.
This port reuses our manual page-management implementation, which produces
identical observable results (`results`/`data`, `status`, `loadMore`).

May change in a minor release — see STABILITY.md.

##### Type Parameters

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

<tbody>
  <tr>
    <td>
      <code>
        Query
      </code>
      
       <em>
        extends
      </em>
      
       <a href="#paginatedqueryreference">
        <code>
          PaginatedQueryReference
        </code>
      </a>
    </td>
  </tr>
</tbody>
</table>

##### Parameters

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

<tbody>
  <tr>
    <td>
      <code>
        query
      </code>
    </td>
    
    <td>
      <code>
        Query
      </code>
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        args
      </code>
    </td>
    
    <td>
      <code>
        MaybeRefOrGetter
      </code>
      
      <<code>
        "skip"
      </code>
      
       | <a href="#paginatedqueryargs">
        <code>
          PaginatedQueryArgs
        </code>
      </a>
      
      <<code>
        Query
      </code>
      
      >>
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        options
      </code>
    </td>
    
    <td>
      { <code>
        initialNumItems
      </code>
      
      : <code>
        number
      </code>
      
      ; }
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        options.initialNumItems
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
  </tr>
</tbody>
</table>

##### Returns

[`UsePaginatedQueryReturnType`](#usepaginatedqueryreturntype)<`Query`>

#### Call Signature

```ts
function usePaginatedQuery_experimental<Query, ThrowOnError>(options): ComputedRef<UsePaginatedQueryObjectReturnType<Query, ThrowOnError>>;
```

Defined in: [src/runtime/vue/composables/use-paginated-query.ts:872](https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/vue/composables/use-paginated-query.ts#L872)

**Experimental**

Experimental paginated query that adds an object-form overload on top of the
positional [usePaginatedQuery](#usepaginatedquery), mirroring the public name React's
Convex integration exposes (`usePaginatedQuery_experimental`).

The positional overload behaves exactly like [usePaginatedQuery](#usepaginatedquery): it
returns the object-of-refs [UsePaginatedQueryReturnType](#usepaginatedqueryreturntype) (TitleCase
statuses) and throws on error. The object overload returns a `ComputedRef`
of the lowercase-status discriminated union
[UsePaginatedQueryObjectReturnType](#usepaginatedqueryobjectreturntype) — kept whole (not split into refs)
so the `status`/`data`/`error` type narrowing survives — and surfaces errors
via `status: 'error'` (unless `throwOnError: true`).

Note: React backs its experimental hook with the Convex client's native
`PaginatedQueryClient`, which the published `convex` package does not export.
This port reuses our manual page-management implementation, which produces
identical observable results (`results`/`data`, `status`, `loadMore`).

May change in a minor release — see STABILITY.md.

##### Type Parameters

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

<tbody>
  <tr>
    <td>
      <code>
        Query
      </code>
      
       <em>
        extends
      </em>
      
       <a href="#paginatedqueryreference">
        <code>
          PaginatedQueryReference
        </code>
      </a>
    </td>
    
    <td>
      -
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        ThrowOnError
      </code>
      
       <em>
        extends
      </em>
      
       <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        false
      </code>
    </td>
  </tr>
</tbody>
</table>

##### Parameters

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

<tbody>
  <tr>
    <td>
      <code>
        options
      </code>
    </td>
    
    <td>
      <code>
        MaybeRefOrGetter
      </code>
      
      <<a href="#usepaginatedqueryoptions">
        <code>
          UsePaginatedQueryOptions
        </code>
      </a>
      
      <<code>
        Query
      </code>
      
      , <code>
        ThrowOnError
      </code>
      
      >>
    </td>
  </tr>
</tbody>
</table>

##### Returns

`ComputedRef`<[`UsePaginatedQueryObjectReturnType`](#usepaginatedqueryobjectreturntype)<`Query`, `ThrowOnError`>>

---

### useQueries()

```ts
function useQueries(queries): ShallowRef<Record<string, any>>;
```

Defined in: [src/runtime/vue/composables/use-queries.ts:60](https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/vue/composables/use-queries.ts#L60)

Load a variable number of reactive Convex queries.

`useQueries` is similar to [useQuery](#usequery) but it allows
loading multiple queries which can be useful for loading a dynamic number
of queries without violating the rules of composables.

This composable accepts an object whose keys are identifiers for each query and the
values are objects of
`{ query: FunctionReference | FunctionReference_future, args: Record<string, Value> }`.
The `query` is a reference to the Convex query function to load, and the
`args` are the arguments to that function.

The composable returns an object that maps each identifier to the result of the query,
`undefined` if the query is still loading, or an instance of `Error` if the query
threw an exception.

For example if you loaded a query like:

```typescript
const results = useQueries({
  messagesInGeneral: {
    query: "listMessages",
    args: { channel: "#general" }
  }
});
```

then the result would look like:

```typescript
{
  messagesInGeneral: [{
    channel: "#general",
    body: "hello"
    _id: ...,
    _creationTime: ...
  }]
}
```

This composable returns a reactive result that updates
whenever any of the query results change.

Throws an error if no Convex client has been provided (see [useConvex](#useconvex)).

#### Parameters

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

<tbody>
  <tr>
    <td>
      <code>
        queries
      </code>
    </td>
    
    <td>
      <code>
        MaybeRefOrGetter
      </code>
      
      <<code>
        RequestForQueriesCompat
      </code>
      
      >
    </td>
    
    <td>
      An object mapping identifiers to objects of <code>
        {query: string, args: Record<string, Value> }
      </code>
      
       describing which query functions to fetch. Reactive (ref/computed/getter) or plain.
    </td>
  </tr>
</tbody>
</table>

#### Returns

`ShallowRef`<`Record`<`string`, `any`>>

A shallow ref of an object with the same keys as the input. The
values are the result of the query function, `undefined` if it's still
loading, or an `Error` if it threw an exception.

---

### useQuery()

```ts
function useQuery<Query>(query, ...args): ComputedRef<FunctionReturnType<Query> | undefined>;
```

Defined in: [src/runtime/vue/composables/use-query.ts:80](https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/vue/composables/use-query.ts#L80)

Load a reactive query within a Vue component.

This Vue composable subscribes to a Convex query and updates the returned
ref whenever the query result changes. The subscription is managed
automatically -- it starts when the component mounts and stops when it
unmounts.

Throws an error if no Convex client has been provided.

#### Type Parameters

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

<tbody>
  <tr>
    <td>
      <code>
        Query
      </code>
      
       <em>
        extends
      </em>
      
       | <a href="#functionreference">
        <code>
          FunctionReference
        </code>
      </a>
      
      <<code>
        "query"
      </code>
      
      > | <a href="#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 <a href="https://docs.convex.dev/api/modules/server#functionreference" rel="nofollow">
        <code>
          FunctionReference
        </code>
      </a>
      
       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="#optionalrestargsorskip">
        <code>
          OptionalRestArgsOrSkip
        </code>
      </a>
      
      <<code>
        Query
      </code>
      
      >
    </td>
    
    <td>
      The arguments to the query function or the string <code>
        "skip"
      </code>
      
       if the query should not be loaded. Accepts a ref, computed, or getter for reactive args.
    </td>
  </tr>
</tbody>
</table>

#### Returns

`ComputedRef`<[`FunctionReturnType`](#functionreturntype)<`Query`> | `undefined`>

a computed ref with the result of the query. Contains `undefined`
while loading.

#### Example

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

// Reactively loads tasks; the ref updates when data changes:
const tasks = useQuery(api.tasks.list, { completed: false })
// tasks.value is `undefined` while loading

// Pass "skip" (or a reactive getter returning it) to conditionally
// disable the query:
const profile = useQuery(
  api.users.get,
  computed(() => userId.value ? { userId: userId.value } : 'skip'),
)
</script>
```

---

### useQuery_experimental()

```ts
function useQuery_experimental<Query, ThrowOnError>(options): ComputedRef<UseQueryResult<FunctionReturnType<Query>, ThrowOnError>>;
```

Defined in: [src/runtime/vue/composables/use-query.ts:148](https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/vue/composables/use-query.ts#L148)

**Experimental**

Load a reactive query within a Vue component using an options object.

This is an experimental form of [useQuery](#usequery) that accepts a single
UseQueryOptions object instead of positional arguments.

Consumers are expected to check the returned object `status` field to
make proper use of the result. If an error occurs, it will be present
in the result object unless `throwOnError` is `true`, in which case
the error will be thrown instead.

#### Type Parameters

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

<tbody>
  <tr>
    <td>
      <code>
        Query
      </code>
      
       <em>
        extends
      </em>
      
       | <a href="#functionreference">
        <code>
          FunctionReference
        </code>
      </a>
      
      <<code>
        "query"
      </code>
      
      > | <a href="#functionreference_future">
        <code>
          FunctionReference_future
        </code>
      </a>
      
      <<code>
        "query"
      </code>
      
      >
    </td>
    
    <td>
      -
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        ThrowOnError
      </code>
      
       <em>
        extends
      </em>
      
       <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        false
      </code>
    </td>
  </tr>
</tbody>
</table>

#### Parameters

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

<tbody>
  <tr>
    <td>
      <code>
        options
      </code>
    </td>
    
    <td>
      <code>
        UseQueryOptions
      </code>
      
      <<code>
        Query
      </code>
      
      , <code>
        ThrowOnError
      </code>
      
      >
    </td>
    
    <td>
      Query options. Pass <code>
        args: "skip"
      </code>
      
       to disable the query.
    </td>
  </tr>
</tbody>
</table>

#### Returns

`ComputedRef`<[`UseQueryResult`](#usequeryresult)<[`FunctionReturnType`](#functionreturntype)<`Query`>, `ThrowOnError`>>

a computed ref with the current query state as a
[UseQueryResult](#usequeryresult) object.

May change in a minor release — see STABILITY.md.

#### Example

```vue
<script setup lang="ts">
import { useQuery_experimental as useQuery } from '#imports'
import { api } from '#convex/api'

const state = useQuery({ query: api.tasks.list, args: { completed: false } })
// state.value.status: 'pending' | 'success' | 'error'
</script>
```

---

### useStorageUrl()

```ts
function useStorageUrl(getUrl, storageId): ComputedRef<string | null | undefined>;
```

Defined in: [src/runtime/vue/composables/use-storage-url.ts:50](https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/vue/composables/use-storage-url.ts#L50)

Reactively resolve the served URL for a Convex stored file.

Thin wrapper over [useQuery](#usequery) that handles the common ergonomics of
serving stored files: it accepts a reactive storage id and automatically
skips the query (returning `undefined`) while the id is `null`/`undefined`,
so you can bind it straight to an id ref without juggling `'skip'`.

#### Parameters

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

<tbody>
  <tr>
    <td>
      <code>
        getUrl
      </code>
    </td>
    
    <td>
      <a href="#getstorageurl">
        <code>
          GetStorageUrl
        </code>
      </a>
    </td>
    
    <td>
      A <code>
        FunctionReference
      </code>
      
       for the public <code>
        getUrl
      </code>
      
       query.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        storageId
      </code>
    </td>
    
    <td>
      <code>
        MaybeRefOrGetter
      </code>
      
      <<code>
        string
      </code>
      
       | <a href="#storageid-1">
        <code>
          StorageId
        </code>
      </a>
      
       | <code>
        null
      </code>
      
       | <code>
        undefined
      </code>
      
      >
    </td>
    
    <td>
      The storage id to resolve. Accepts a ref, computed, or getter; <code>
        null
      </code>
      
      /<code>
        undefined
      </code>
      
       skips the query.
    </td>
  </tr>
</tbody>
</table>

#### Returns

`ComputedRef`<`string` | `null` | `undefined`>

A computed ref of the served URL: `string | null` once loaded
(`null` if the file is gone), or `undefined` while loading or skipped.

#### Example

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

const { storageId } = useUpload(api.images.generateUploadUrl)
const url = useStorageUrl(api.images.getUrl, storageId)
</script>

<template>
  <img v-if="url" :src="url">
</template>
```

---

### useUploadQueue()

```ts
function useUploadQueue(generateUploadUrl, options?): VueUploadQueue;
```

Defined in: [src/runtime/vue/composables/use-upload-queue.ts:133](https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/vue/composables/use-upload-queue.ts#L133)

Upload many files to Convex file storage with bounded concurrency and
per-item reactive progress.

Built on the same flow as [useUpload](#useupload), but manages a queue: call
[VueUploadQueue.enqueue](#enqueue) with one or more files (or a `FileList` from
a multi-file `<input>`) and the queue uploads up to `concurrency` at a time,
exposing per-item and aggregate progress.

#### Parameters

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

<tbody>
  <tr>
    <td>
      <code>
        generateUploadUrl
      </code>
    </td>
    
    <td>
      <a href="#generateuploadurl">
        <code>
          GenerateUploadUrl
        </code>
      </a>
    </td>
    
    <td>
      A <code>
        FunctionReference
      </code>
      
       for the public <code>
        generateUploadUrl
      </code>
      
       mutation.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        options
      </code>
    </td>
    
    <td>
      <a href="#useuploadqueueoptions">
        <code>
          UseUploadQueueOptions
        </code>
      </a>
    </td>
    
    <td>
      Optional <a href="#useuploadqueueoptions">
        UseUploadQueueOptions
      </a>
      
      .
    </td>
  </tr>
</tbody>
</table>

#### Returns

[`VueUploadQueue`](#vueuploadqueue)

A [VueUploadQueue](#vueuploadqueue).

#### Example

```vue
<script setup lang="ts">
import { useUploadQueue, useMutation } from '#imports'
import { api } from '#convex/api'

const saveImage = useMutation(api.images.save)
const { items, enqueue, progress, isUploading } = useUploadQueue(
  api.images.generateUploadUrl,
  { concurrency: 4, onItemSuccess: storageId => saveImage({ storageId }) },
)

function onPick(event: Event) {
  enqueue((event.target as HTMLInputElement).files)
}
</script>

<template>
  <input type="file" multiple @change="onPick">
  <progress v-if="isUploading" :value="progress" />
  <ul>
    <li v-for="item in items" :key="item.id">
      {{ item.status }} — {{ Math.round(item.progress * 100) }}%
    </li>
  </ul>
</template>
```

---

### uploadFile()

```ts
function uploadFile(options): Promise<StorageId>;
```

Defined in: [src/runtime/vue/composables/use-upload.ts:58](https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/vue/composables/use-upload.ts#L58)

Upload a single file to a Convex upload URL, resolving to its storage id.

Low-level building block used by [useUpload](#useupload) and
[useUploadQueue](#useuploadqueue). Uses `XMLHttpRequest` so real upload progress and
cancellation are available — `fetch` cannot report request-body progress.

Browser-only: throws if no `XMLHttpRequest` global is available (e.g. during
SSR).

#### Parameters

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

<tbody>
  <tr>
    <td>
      <code>
        options
      </code>
    </td>
    
    <td>
      <a href="#uploadfileoptions">
        <code>
          UploadFileOptions
        </code>
      </a>
    </td>
    
    <td>
      <a href="#uploadfileoptions">
        UploadFileOptions
      </a>
      
      .
    </td>
  </tr>
</tbody>
</table>

#### Returns

`Promise`<[`StorageId`](#storageid-1)>

A promise of the new [StorageId](#storageid-1).

---

### useUpload()

```ts
function useUpload(generateUploadUrl, options?): VueUpload;
```

Defined in: [src/runtime/vue/composables/use-upload.ts:205](https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/vue/composables/use-upload.ts#L205)

Upload files to Convex file storage from a component, with reactive
progress, error, and cancellation state.

Wraps the standard Convex flow — call a `generateUploadUrl` mutation, `POST`
the file to the returned URL, and read back the storage id — and exposes it
as reactive refs. Pass the resulting [StorageId](#storageid-1) to your own mutation
to persist it in your data model.

Uploads are client-only: calling `upload()` during SSR resolves to `null`
and sets [VueUpload.error](#error-1).

#### Parameters

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

<tbody>
  <tr>
    <td>
      <code>
        generateUploadUrl
      </code>
    </td>
    
    <td>
      <a href="#generateuploadurl">
        <code>
          GenerateUploadUrl
        </code>
      </a>
    </td>
    
    <td>
      A <code>
        FunctionReference
      </code>
      
       for the public <code>
        generateUploadUrl
      </code>
      
       mutation.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        options
      </code>
    </td>
    
    <td>
      <a href="#useuploadoptions">
        <code>
          UseUploadOptions
        </code>
      </a>
    </td>
    
    <td>
      Optional <a href="#useuploadoptions">
        UseUploadOptions
      </a>
      
       callbacks.
    </td>
  </tr>
</tbody>
</table>

#### Returns

[`VueUpload`](#vueupload)

A [VueUpload](#vueupload).

#### Example

```vue
<script setup lang="ts">
import { useUpload, useMutation } from '#imports'
import { api } from '#convex/api'

const saveImage = useMutation(api.images.save)
const { upload, isUploading, progress, error } = useUpload(
  api.images.generateUploadUrl,
  { onSuccess: storageId => saveImage({ storageId }) },
)

async function onPick(event: Event) {
  const file = (event.target as HTMLInputElement).files?.[0]
  if (file) await upload(file)
}
</script>

<template>
  <input type="file" :disabled="isUploading" @change="onPick">
  <progress v-if="isUploading" :value="progress" />
  <p v-if="error">{{ error.message }}</p>
</template>
```

---

### usePreloadedQuery()

```ts
function usePreloadedQuery<Query>(preloadedQuery): ComputedRef<FunctionReturnType<Query>>;
```

Defined in: [src/runtime/vue/hydration.ts:51](https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/vue/hydration.ts#L51)

Load a reactive query within a Vue component using a `Preloaded` payload
from the server returned by [preloadQuery](https://nuxt-convex-module.dev/api-reference/reference/server#preloadquery).

This Vue composable returns a computed that updates whenever the query
result changes.

Throws an error if no Convex client has been provided (see [useConvex](#useconvex)).

#### Type Parameters

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

<tbody>
  <tr>
    <td>
      <code>
        Query
      </code>
      
       <em>
        extends
      </em>
      
       | <a href="#functionreference">
        <code>
          FunctionReference
        </code>
      </a>
      
      <<code>
        "query"
      </code>
      
      > | <a href="#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>
        preloadedQuery
      </code>
    </td>
    
    <td>
      <code>
        MaybeRefOrGetter
      </code>
      
      <<a href="#preloaded">
        <code>
          Preloaded
        </code>
      </a>
      
      <<code>
        Query
      </code>
      
      >>
    </td>
    
    <td>
      The <code>
        Preloaded
      </code>
      
       query payload from the server. Accepts a ref, computed, or getter; a fresh payload re-subscribes with the new query and args.
    </td>
  </tr>
</tbody>
</table>

#### Returns

`ComputedRef`<[`FunctionReturnType`](#functionreturntype)<`Query`>>

a computed ref with the result of the query. Initially returns the
result fetched by the server. Subsequently returns the result fetched by the client.

#### Example

```vue
<script setup lang="ts">
import { usePreloadedQuery } from '#imports'

const props = defineProps<{
  preloaded: Preloaded<typeof api.tasks.list>
}>()

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

---

### provideConvexApi()

```ts
function provideConvexApi(api, app?): void;
```

Defined in: [src/runtime/vue/provide.ts:29](https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/vue/provide.ts#L29)

Make the generated Convex `api` available to every `nuxt-convex-module` composable
and component, so `<CheckoutLink>`, `<CustomerPortalLink>`, `useConvexNamespace()`,
… work with zero arguments.

The packaged Nuxt plugin calls this automatically with `#convex/api`. Call it
yourself (e.g. with a custom `api`) only to override that default — pass the
Nuxt `vueApp` so the binding is available during SSR too:

```ts
export default defineNuxtPlugin((nuxtApp) => {
  provideConvexApi(api, nuxtApp.vueApp)
})
```

#### Parameters

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

<tbody>
  <tr>
    <td>
      <code>
        api
      </code>
    </td>
    
    <td>
      <a href="#convexapi">
        <code>
          ConvexApi
        </code>
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        app?
      </code>
    </td>
    
    <td>
      <code>
        App
      </code>
      
      <<code>
        any
      </code>
      
      >
    </td>
  </tr>
</tbody>
</table>

#### Returns

`void`

---

### useConvexApi()

```ts
function useConvexApi(): ConvexApi | undefined;
```

Defined in: [src/runtime/vue/provide.ts:39](https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/vue/provide.ts#L39)

The injected generated `api`, or `undefined` when it hasn't been provided
(e.g. outside a setup context, or before Convex codegen has run). Prefer
[useConvexNamespace](#useconvexnamespace) for feature access.

#### Returns

[`ConvexApi`](#convexapi) | `undefined`

---

### useConvexNamespace()

```ts
function useConvexNamespace<T>(name): T | undefined;
```

Defined in: [src/runtime/vue/provide.ts:51](https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/vue/provide.ts#L51)

The named function group from the generated `api` (e.g. `'polar'`), or
`undefined` when that group isn't scaffolded — letting the feature degrade
to a graceful no-op rather than throwing.

#### Type Parameters

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

<tbody>
  <tr>
    <td>
      <code>
        T
      </code>
    </td>
    
    <td>
      <code>
        Record
      </code>
      
      <<code>
        string
      </code>
      
      , <code>
        unknown
      </code>
      
      >
    </td>
    
    <td>
      The expected shape of the namespace's function references.
    </td>
  </tr>
</tbody>
</table>

#### Parameters

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

<tbody>
  <tr>
    <td>
      <code>
        name
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
  </tr>
</tbody>
</table>

#### Returns

`T` | `undefined`


## Sitemap

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