Installation

This page gives you one setup path for each supported runtime. Choose the package that matches your app, run npx convex dev, and verify the generated API with a first query.

Before you begin

Make sure you already have:

• a Nuxt app or a Vue 3 app
• a convex/ directory in the same project or in a Nuxt layer that your app can resolve
• a Convex deployment URL

Install the Nuxt package

Use this path for Nuxt apps.

pnpm add nuxt-convex convex

export default defineNuxtConfig({
  modules: ['nuxt-convex'],
})

nuxt-convex reads the deployment URL in this order:

1. convex.url in nuxt.config.ts
2. CONVEX_URL
3. NUXT_PUBLIC_CONVEX_URL

Install the Vue package

Use this path for standalone Vue 3 apps.

pnpm add vue-convex convex

import { convexVue } from 'vue-convex'
import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

app.use(convexVue, {
  url: import.meta.env.VITE_CONVEX_URL,
})

app.mount('#app')

Generate the Convex API

Run Convex once before you write frontend code that imports generated types.

npx convex dev

That command generates:

• convex/_generated/api
• convex/_generated/server
• #convex/api for Nuxt apps through the module alias

Verify the result

Use the Nuxt version when you installed nuxt-convex.

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

const { data, suspense } = useConvexQuery(api.tasks.list, { userId: 'demo' })
await suspense()
</script>

Use the Vue version when you installed vue-convex.

<script setup lang="ts">
import { useConvexQuery } from 'vue-convex'
import { api } from '../convex/_generated/api'

const { data, suspense } = useConvexQuery(api.tasks.list, { userId: 'demo' })
await suspense()
</script>

The setup is working when the import resolves and the first query returns data instead of a missing generated-file error.

Next steps

• Read Nuxt for the module-specific path
• Read Vue for the standalone Vue path
• Read Convex Patterns for the shared backend model