Skip to main content

Installation

Install Better Convex Nuxt and verify the generated Convex API alias.

This setup creates a Nuxt 4 app with Convex and the module. Authentication stays disabled until the later auth step.

Prerequisites

  • Node.js 22.12+, 24.11+, or 26+
  • A Convex account
  • pnpm, npm, or another supported Node package manager

Create the applications

Create a Nuxt project if you do not already have one:

bash
pnpm create nuxt@latest my-convex-app
cd my-convex-app

Install Convex and the module:

bash
pnpm add convex better-convex-nuxt

Initialize Convex:

bash
pnpm exec convex dev

The Convex CLI connects or creates a deployment, writes local environment values, creates convex/, and generates convex/_generated/api.

Keep convex dev running while developing backend functions.

Register the Nuxt module

nuxt.config.ts
export default defineNuxtConfig({
  modules: ['better-convex-nuxt'],

  convex: {
    auth: false,
  },
})

The module reads NUXT_PUBLIC_CONVEX_URL first and falls back to CONVEX_URL. Set the public name explicitly when your deployment platform does not expose the Convex CLI environment file during the Nuxt build:

.env
NUXT_PUBLIC_CONVEX_URL=https://your-deployment.convex.cloud

Do not commit deployment credentials or auth secrets. A Convex deployment URL is public configuration; session tokens are not.

Prepare Nuxt types

bash
pnpm exec nuxt prepare

The module registers:

  • #convex/api → your generated convex/_generated/api
  • #convex/server → the supported Nuxt server entry
  • client composable auto-imports
  • server helper auto-imports

Verify the API alias in a temporary component or page:

ts
import { api } from '#convex/api'

console.log(api)

If TypeScript reports that convex/_generated/api is missing, run pnpm exec convex dev or pnpm exec convex codegen.

Expected structure

my-convex-app/
├── app/
├── convex/
│   ├── _generated/
│   │   └── api.d.ts
│   └── tsconfig.json
├── .env.local
├── nuxt.config.ts
└── package.json

Next, build the first real-time page.