Installation

Use this guide when you are wiring vue-convex directly into a standalone Vue 3 app.

Before you begin

Make sure you already have:

• a Vue 3 app
• a convex/ directory in the same project
• a Convex deployment URL exposed as VITE_CONVEX_URL

Install the packages

pnpm add vue-convex convex

Register the plugin

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')

If you omit url, the plugin starts disconnected and you need the controller to connect later.

Generate the typed API

Run Convex once before you import generated types from the frontend.

npx convex dev

That command generates convex/_generated/api and convex/_generated/server.

Verify the result

<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>

<template>
  <ul>
    <li v-for="task in data" :key="task._id">
      {{ task.text }}
    </li>
  </ul>
</template>

The setup is working when the generated import resolves and the query returns data.

Next steps

• Read Queries to subscribe to data reactively
• Read Convex Patterns for the backend model behind the generated API