---
title: "Clerk"
description: "The Vue port of convex/react-clerk — provideConvexAuthFromClerk and ConvexProviderWithClerk, adapting Clerk sessions into Convex auth state."
canonical_url: "https://nuxt-convex-module.dev/components/clerk"
---
# Clerk

> The Vue port of convex/react-clerk — provideConvexAuthFromClerk and ConvexProviderWithClerk, adapting Clerk sessions into Convex auth state.

A Vue port of `convex/react-clerk`: a thin shim that adapts [Clerk](https://clerk.com)'s `useAuth()` into the provider-agnostic [Convex auth state](https://nuxt-convex-module.dev/guide/auth-state). No new auth core — just the SDK adapter.

<upstream-baseline entry="convex/react-clerk" source="convex">

Matches upstream convex@1.46.0 (convex/react-clerk).

</upstream-baseline>

## Install

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

The adapter auto-enables on the next dev run.

## Configure

Set up `@clerk/vue`'s own plugin as Clerk documents, then set `convex.clerk: false` in `nuxt.config.ts` only if you want to force the adapter off. Nothing else is required on the Nuxt side.

Using [`@clerk/nuxt`](https://clerk.com/docs/references/nuxt/overview) instead? It brings `@clerk/vue` along as its own dependency, so auto-detection — which reads your `package.json` — stays off. Switch the adapter on explicitly with `convex: { clerk: true }`.

<note>

Under [`nuxt-security`](https://nuxt-convex-module.dev/getting-started/security), add Clerk's origins to `connect-src` yourself — the module's CSP only knows your Convex deployment. See [adding your own origins](https://nuxt-convex-module.dev/getting-started/security#adding-your-own-origins).

</note>

Convex-side setup (the JWT template and the Clerk provider entry in `auth.config.ts`) is unchanged from [Convex's Clerk guide](https://docs.convex.dev/auth/clerk).

## Use

Call the composable in a top-level component, above anything that reads Convex data:

```vue [app.vue]
<script setup lang="ts">
// A Vue port of `<ConvexProviderWithClerk>`.
provideConvexAuthFromClerk()
</script>

<template>
  <Authenticated>Signed in with Clerk</Authenticated>
  <Unauthenticated>Sign in</Unauthenticated>
</template>
```

The adapter reads Clerk's `useAuth()`. When Clerk's native Convex integration is active (the session token's `aud` claim is `convex`), it fetches the session token directly; otherwise it falls back to the `convex` JWT template. Either way the token is re-fetched when the active organization, the user's org role, or the session changes.

### `<ConvexProviderWithClerk>`

The drop-in component form, for when a wrapper reads better than a setup call:

```vue [app.vue]
<template>
  <ConvexProviderWithClerk>
    <NuxtPage />
  </ConvexProviderWithClerk>
</template>
```

<table>
<thead>
  <tr>
    <th>
      Prop
    </th>
    
    <th>
      Type
    </th>
    
    <th>
      Default
    </th>
    
    <th>
      Purpose
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        client
      </code>
    </td>
    
    <td>
      <code>
        IConvexVueClient
      </code>
    </td>
    
    <td>
      the injected client
    </td>
    
    <td>
      Override the Convex client the auth state is wired into.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        use-auth
      </code>
    </td>
    
    <td>
      <code>
        UseAuth
      </code>
    </td>
    
    <td>
      <code>
        @clerk/vue
      </code>
      
      's <code>
        useAuth
      </code>
    </td>
    
    <td>
      Override the Clerk composable the adapter reads — useful in tests.
    </td>
  </tr>
</tbody>
</table>

Both props are optional here; upstream's React component requires `useAuth`.

## Reference

Full signatures: [`clerk/client`](https://nuxt-convex-module.dev/api-reference/reference/clerk/client). Types via `nuxt-convex-module/clerk/client` (alias `nuxt-convex-module/clerk/vue`), which is self-contained and also works in a [plain Vue](https://nuxt-convex-module.dev/guide/plain-vue) app. Upstream: [Convex + Clerk](https://docs.convex.dev/auth/clerk).

---

- [convex/react-clerk](https://github.com/get-convex/convex-js/tree/main/src/react-clerk)
- [Convex × Clerk docs](https://docs.convex.dev/auth/clerk)


## Sitemap

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