---
title: "nuxt-convex-module"
canonical_url: "https://nuxt-convex-module.dev"
---
# nuxt-convex-module

<u-page-hero :links="[{"label":"get started","to":"/getting-started/introduction","icon":"i-nc-book-open","color":"primary","class":"h-11 min-w-40 justify-center px-5 text-lg hard-cast","ui":{"leadingIcon":"size-4.5","label":"[text-box:trim-both_cap_alphabetic] overflow-visible!"}},{"label":"github","to":"https://github.com/qruto/nuxt-convex-module","target":"_blank","icon":"i-simple-icons-github","color":"neutral","variant":"ghost","class":"text-lg","ui":{"label":"[text-box:trim-both_cap_alphabetic] overflow-visible!"}}]" :ui="{"container":"xl:grid-cols-[minmax(0,1fr)_32rem] xl:gap-x-20","header":"motion-safe:animate-fade-up","title":"landing-billet","description":"mt-8 text-base text-pretty sm:text-lg/7","wrapper":"flex flex-col","footer":"mt-8 sm:mt-10","body":"order-last mt-10"}" className="landing-hero-ground,landing-panel" orientation="horizontal">
<landing-hero-panel>

```ts
const { data: board } =
  await useAsyncQuery(api.reactions.board)
const send = useMutation(api.reactions.send)
```

</landing-hero-panel>

<template v-slot:title="">
<hero-billet>
<span className="billet-part">

Use

</span>

 <span className="billet-part">
<brand-convex>



</brand-convex>

 backend

</span>

<br />

<span className="billet-part">

in a

</span>

 <span className="billet-part">
<brand-nuxt>



</brand-nuxt>

 application

</span>
</hero-billet>
</template>

<template v-slot:description="">
<landing-capabilities>



</landing-capabilities>
</template>

<template v-slot:body="">
<landing-version-chip convex="≥ 1.46" nuxt="≥ 4.6" vue="≥ 3.5">



</landing-version-chip>
</template>

<template v-slot:bottom="">
<landing-services>



</landing-services>
</template>
</u-page-hero>

<u-page-section className="landing-mill-hatch,landing-panel,border-b,border-default" id="names">
<template v-slot:body="">
<landing-coupling>



</landing-coupling>
</template>
</u-page-section>

<u-page-section className="landing-mill-grid,landing-panel,landing-reveal,border-b,border-default" id="ships">
<template v-slot:title="">
<concave-text>

Everything the module ships

</concave-text>
</template>

<template v-slot:body="">
<landing-tour>



</landing-tour>
</template>
</u-page-section>

<u-page-section className="landing-mill-rings,landing-panel,landing-reveal,border-b,border-default" id="live">
<template v-slot:title="">
<concave-text>

One table, live in every client

</concave-text>
</template>

<template v-slot:description="">
<span className="text-primary">

Flip a switch, drag the fader, send a pulse.

</span>

<br />


Every instrument is a row in one table, and every browser on this page has it on the same commit.

</template>

<template v-slot:body="">
<landing-live>

```ts
const { data: switches } =
  await useAsyncQuery(api.switches.list)

const flip = useMutation(api.switches.flip)
  .withOptimisticUpdate((store, { position }) => {
    // the knob moves before the round trip
  })
```

</landing-live>
</template>
</u-page-section>

<u-page-section className="landing-mill-hatch,landing-panel,landing-reveal,border-b,border-default" id="anywhere">
<template v-slot:title="">
<concave-text>

Nuxt, or plain Vue?

</concave-text>
</template>

<template v-slot:description="">

Throw the switch. The setup changes; the component does not.

</template>

<template v-slot:body="">
<landing-anywhere>



</landing-anywhere>
</template>
</u-page-section>

<u-page-section className="landing-mill-knurl,landing-panel,landing-reveal,border-b,border-default" id="deploy" :links="[{"label":"install the kit","to":"/getting-started/installation","trailingIcon":"i-nc-arrow-right","color":"primary","class":"h-11 min-w-40 justify-center px-5 text-lg hard-cast","ui":{"trailingIcon":"size-4.5","label":"[text-box:trim-both_cap_alphabetic] overflow-visible!"}},{"label":"see it running live","to":"/guide/queries","color":"neutral","variant":"outline","class":"h-11 px-5 text-lg","ui":{"label":"[text-box:trim-both_cap_alphabetic] overflow-visible!"}}]">
<template v-slot:title="">
<convex-text>

One prompt, or three moves

</convex-text>
</template>

<template v-slot:body="">
<landing-deploy>

```text
Install nuxt-convex-module, the Convex module for Nuxt, in this project:
run `npx skills add https://nuxt-convex-module.dev --skill nuxt-convex-module -y`,
then follow .agents/skills/nuxt-convex-module/references/install.md.
```

```bash
npx nuxi module add nuxt-convex-module
```

```bash
npm i convex
```

```bash
convex dev --start "nuxt dev"
```

</landing-deploy>
</template>
</u-page-section>

## Resources for Agents

- [API catalog: every service document this site publishes](https://nuxt-convex-module.dev/.well-known/api-catalog)
- [Sitemap (XML)](https://nuxt-convex-module.dev/sitemap.xml)
- [Sitemap (Markdown): every page on the site](https://nuxt-convex-module.dev/sitemap.md)
- [MCP server card: MCP endpoint at https://nuxt-convex-module.dev/mcp](https://nuxt-convex-module.dev/.well-known/mcp/server-card.json)
- [MCP endpoint (streamable HTTP)](https://nuxt-convex-module.dev/mcp)
- [llms.txt: index of the documentation for LLMs](https://nuxt-convex-module.dev/llms.txt)
- [llms-full.txt: the full documentation as a single file](https://nuxt-convex-module.dev/llms-full.txt)
- [Agent skills index: every skill published by this site](https://nuxt-convex-module.dev/.well-known/skills/index.json)
- [Agent skill: nuxt-convex-module](https://nuxt-convex-module.dev/.well-known/skills/nuxt-convex-module/SKILL.md)
- [Agent skill: upstream-parity](https://nuxt-convex-module.dev/.well-known/skills/upstream-parity/SKILL.md)
- [OpenAPI document: every route this site serves to agents](https://nuxt-convex-module.dev/openapi.json)


## Sitemap

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