---
title: "Overview"
description: "Every officially supported Convex component and auth provider, what each one adds, and how installing the package switches the integration on."
canonical_url: "https://nuxt-convex-module.dev/components"
---
# Overview

> Every officially supported Convex component and auth provider, what each one adds, and how installing the package switches the integration on.

Core Convex is always on. Everything in this section is **opt-in**: install the package and the integration wires itself up on the next dev run — no extra `modules` entries, and for Clerk, Auth0, Polar and nuxt-security no Nuxt-side configuration at all.

Each one is a port with the **same public API** as its upstream React/Next counterpart, adapted to Vue. Convex's own docs and examples translate line for line.

## Supported packages

<table>
<thead>
  <tr>
    <th>
      Package
    </th>
    
    <th>
      What you get
    </th>
    
    <th>
      Enable
    </th>
    
    <th>
      Subpath
    </th>
    
    <th>
      Upstream version
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <a href="https://nuxt-convex-module.dev/components/better-auth">
        Better Auth
      </a>
      
       — <code>
        @convex-dev/better-auth
      </code>
    </td>
    
    <td>
      <code>
        useBetterAuth
      </code>
      
      , <code>
        /api/auth/**
      </code>
      
       proxy, SSR prefetch, <code>
        convex-auth
      </code>
      
       middleware, <code>
        <AuthBoundary>
      </code>
      
      , <code>
        convexAuth
      </code>
    </td>
    
    <td>
      <code>
        @convex-dev/better-auth
      </code>
      
       + <code>
        better-auth
      </code>
    </td>
    
    <td>
      <code>
        /better-auth/client
      </code>
      
      , <code>
        /better-auth/server
      </code>
    </td>
    
    <td>
      <code>
        0.12.5
      </code>
    </td>
  </tr>
  
  <tr>
    <td>
      <a href="https://nuxt-convex-module.dev/components/clerk">
        Clerk
      </a>
      
       — <code>
        convex/react-clerk
      </code>
    </td>
    
    <td>
      <code>
        provideConvexAuthFromClerk
      </code>
      
       · <code>
        <ConvexProviderWithClerk>
      </code>
    </td>
    
    <td>
      <code>
        @clerk/vue
      </code>
    </td>
    
    <td>
      <code>
        /clerk/client
      </code>
    </td>
    
    <td>
      <code>
        1.46.0
      </code>
    </td>
  </tr>
  
  <tr>
    <td>
      <a href="https://nuxt-convex-module.dev/components/auth0">
        Auth0
      </a>
      
       — <code>
        convex/react-auth0
      </code>
    </td>
    
    <td>
      <code>
        provideConvexAuthFromAuth0
      </code>
      
       · <code>
        <ConvexProviderWithAuth0>
      </code>
    </td>
    
    <td>
      <code>
        @auth0/auth0-vue
      </code>
    </td>
    
    <td>
      <code>
        /auth0/client
      </code>
    </td>
    
    <td>
      <code>
        1.46.0
      </code>
    </td>
  </tr>
  
  <tr>
    <td>
      <a href="https://nuxt-convex-module.dev/components/polar">
        Polar
      </a>
      
       — <code>
        @convex-dev/polar
      </code>
    </td>
    
    <td>
      Billing — <code>
        <CheckoutLink>
      </code>
      
       · <code>
        <CustomerPortalLink>
      </code>
    </td>
    
    <td>
      <code>
        @convex-dev/polar
      </code>
      
       + <code>
        @polar-sh/checkout
      </code>
    </td>
    
    <td>
      <code>
        /polar/client
      </code>
    </td>
    
    <td>
      <code>
        0.9.2
      </code>
    </td>
  </tr>
  
  <tr>
    <td>
      <a href="https://nuxt-convex-module.dev/getting-started/security">
        nuxt-security
      </a>
    </td>
    
    <td>
      A Convex-aware CSP and security headers
    </td>
    
    <td>
      <code>
        nuxt-security
      </code>
    </td>
    
    <td>
      —
    </td>
    
    <td>
      —
    </td>
  </tr>
</tbody>
</table>

Subpaths are `nuxt-convex-module/<subpath>`; each `/client` has a `/vue` alias — the same file under a Vue-flavoured name, see [subpath exports](https://nuxt-convex-module.dev/api-reference#subpath-exports). `/clerk/client`, `/auth0/client`, and `/polar/client` are self-contained, so they also work in a [plain Vue](https://nuxt-convex-module.dev/guide/plain-vue) app; `/better-auth/client` and `/better-auth/server` rely on Nuxt-provided aliases and runtime config. Auto-detection reads your `package.json`: an integration switches on when its package is a dependency of your app.

The authoritative file-by-file map and pinned upstream baselines live in [`PARITY.md`](https://github.com/qruto/nuxt-convex-module/blob/main/PARITY.md).

## Installing

You only ever add **one** module. Install the package you want and it lights up:

**Better Auth**

<pm-install packages="@convex-dev/better-auth@~0.12.0 better-auth@~1.6.11">

```bash [pnpm]
pnpm add @convex-dev/better-auth@~0.12.0 better-auth@~1.6.11
```

```bash [npm]
npm i @convex-dev/better-auth@~0.12.0 better-auth@~1.6.11
```

```bash [yarn]
yarn add @convex-dev/better-auth@~0.12.0 better-auth@~1.6.11
```

```bash [bun]
bun add @convex-dev/better-auth@~0.12.0 better-auth@~1.6.11
```

</pm-install>

**Clerk**

<pm-install packages="@clerk/vue">

```bash [pnpm]
pnpm add @clerk/vue
```

```bash [npm]
npm i @clerk/vue
```

```bash [yarn]
yarn add @clerk/vue
```

```bash [bun]
bun add @clerk/vue
```

</pm-install>

**Auth0**

<pm-install packages="@auth0/auth0-vue">

```bash [pnpm]
pnpm add @auth0/auth0-vue
```

```bash [npm]
npm i @auth0/auth0-vue
```

```bash [yarn]
yarn add @auth0/auth0-vue
```

```bash [bun]
bun add @auth0/auth0-vue
```

</pm-install>

**Polar billing**

<pm-install packages="@convex-dev/polar@~0.9.0 @polar-sh/checkout">

```bash [pnpm]
pnpm add @convex-dev/polar@~0.9.0 @polar-sh/checkout
```

```bash [npm]
npm i @convex-dev/polar@~0.9.0 @polar-sh/checkout
```

```bash [yarn]
yarn add @convex-dev/polar@~0.9.0 @polar-sh/checkout
```

```bash [bun]
bun add @convex-dev/polar@~0.9.0 @polar-sh/checkout
```

</pm-install>

**Security headers**

<pm-install packages="nuxt-security">

```bash [pnpm]
pnpm add nuxt-security
```

```bash [npm]
npm i nuxt-security
```

```bash [yarn]
yarn add nuxt-security
```

```bash [bun]
bun add nuxt-security
```

</pm-install>

Your `modules` array never grows — the integration is detected from the installed package:

```ts [nuxt.config.ts]
export default defineNuxtConfig({
  modules: ['nuxt-convex-module'],
})
```

Auto-detection is the default, not a requirement. Force one on or off — or point Better Auth at your own auth client — through the `convex` key:

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

  convex: {
    // betterAuth: false,
    // betterAuth: { authClient: './app/convex-auth-client' },
    // clerk: false,
    // auth0: false,
    // polar: false,
    // security: false,
    // devScript: false,
    // authRoute: '/api/auth',
  },
})
```

Full option reference: [configuration](https://nuxt-convex-module.dev/getting-started/configuration#module-options-convex).

## Using none of them

Pure Convex with no auth and no billing? Install none of these — you get just the data layer, the module provides a base client on its own, and nothing drags an auth provider or Polar into your bundle.

<callout icon="i-lucide-server">

**Server-only Convex components** have no client integration to port. Install them in your Convex deployment and call their functions from Vue with the ordinary `useMutation` / `useAction` composables, and watch whatever they record with [`useQuery`](https://nuxt-convex-module.dev/guide/queries). Browse them at [convex.dev/components](https://www.convex.dev/components).

</callout>


## Sitemap

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