Api
Configuration
Module configuration options and environment variables.
Configure the Nuxt Convex module in your nuxt.config.ts.
Module Options
nuxt.config.ts
export default defineNuxtConfig({
modules: ['nuxt-convex'],
convex: {
url: 'https://your-deployment.convex.cloud',
storage: true,
},
})
| Option | Type | Default | Description |
|---|---|---|---|
url | string | process.env.CONVEX_URL | Convex deployment URL |
storage | boolean | false | Enable file storage integration |
Environment Variables
| Variable | Description |
|---|---|
CONVEX_URL | Convex deployment URL (set by npx convex dev) |
NUXT_PUBLIC_CONVEX_URL | Alternative, follows Nuxt convention |
The module reads CONVEX_URL first, then falls back to NUXT_PUBLIC_CONVEX_URL. Running npx convex dev sets these automatically.
Virtual Modules
The module provides these virtual imports:
| Import | Purpose |
|---|---|
#convex | Core composables and client |
#convex/api | Generated Convex API types |
#convex/storage | Storage operations (when enabled) |
import { useConvexMutation, useConvexQuery } from '#convex'
import { api } from '#convex/api'
Auto-Imports
These composables are auto-imported globally:
| Composable | Description |
|---|---|
useConvexQuery | Subscribe to reactive data |
useConvexMutation | Execute write operations |
useConvexAction | Call async actions |
useConvex | Get raw client |
When storage is enabled:
| Composable | Description |
|---|---|
useConvexStorage | Low-level storage operations |
useConvexUpload | File upload with progress |
DevTools
In development, the module adds a Convex tab to Nuxt DevTools with an embedded Convex dashboard. Access your data, run functions, and view logs directly from DevTools.
TypeScript
The module generates types automatically. If you need to reference types in your code:
import type { Doc, Id } from '#convex/api'
// Document type
type Task = Doc<'tasks'>
// ID type
type TaskId = Id<'tasks'>