---
title: "clerk/client"
description: "Vue login component for use with Clerk — generated TypeScript API reference for nuxt-convex-module/clerk/client."
canonical_url: "https://nuxt-convex-module.dev/api-reference/reference/clerk/client"
---
# clerk/client

Vue login component for use with Clerk.

A Vue/Nuxt port of `convex/react-clerk`. The provider is exposed both as the
[provideConvexAuthFromClerk](#provideconvexauthfromclerk) composable and the thin
[ConvexProviderWithClerk](#convexproviderwithclerk) component wrapper; both adapt `@clerk/vue`'s
`useAuth()` into the generic Convex auth provider
([provideConvexAuth](https://nuxt-convex-module.dev/api-reference/reference/client#provideconvexauth)) — no new auth core, just the SDK shim.

## Interfaces

### ConvexProviderWithClerkOptions

Defined in: [src/runtime/clerk/vue/index.ts:45](https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/clerk/vue/index.ts#L45)

Options for [provideConvexAuthFromClerk](#provideconvexauthfromclerk) / `<ConvexProviderWithClerk>`.

#### Properties

<table>
<thead>
  <tr>
    <th>
      Property
    </th>
    
    <th>
      Type
    </th>
    
    <th>
      Description
    </th>
    
    <th>
      Defined in
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <a id="client">
        
      </a>
      
       <code>
        client?
      </code>
    </td>
    
    <td>
      <a href="https://nuxt-convex-module.dev/api-reference/reference/client#iconvexvueclient">
        <code>
          IConvexVueClient
        </code>
      </a>
    </td>
    
    <td>
      Convex client to authenticate. Defaults to the client <code>
        useConvex()
      </code>
      
       returns.
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/clerk/vue/index.ts#L47" rel="nofollow">
        src/runtime/clerk/vue/index.ts:47
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="useauth-1">
        
      </a>
      
       <code>
        useAuth?
      </code>
    </td>
    
    <td>
      <a href="#useauth">
        <code>
          UseAuth
        </code>
      </a>
    </td>
    
    <td>
      Clerk's <code>
        useAuth
      </code>
      
       composable. Defaults to <code>
        useAuth
      </code>
      
       from <code>
        @clerk/vue
      </code>
      
      .
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/clerk/vue/index.ts#L49" rel="nofollow">
        src/runtime/clerk/vue/index.ts:49
      </a>
    </td>
  </tr>
</tbody>
</table>

## Type Aliases

### UseAuth

```ts
type UseAuth = () => {
  isLoaded: ComputedRef<boolean>;
  isSignedIn: ComputedRef<boolean | undefined>;
  getToken: ComputedRef<(options) => Promise<string | null>>;
  orgId: ComputedRef<string | undefined | null>;
  orgRole: ComputedRef<string | undefined | null>;
  sessionId: ComputedRef<string | undefined | null>;
  sessionClaims: ComputedRef<Record<string, unknown> | undefined | null>;
};
```

Defined in: [src/runtime/clerk/vue/index.ts:25](https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/clerk/vue/index.ts#L25)

#### Returns

```ts
{
  isLoaded: ComputedRef<boolean>;
  isSignedIn: ComputedRef<boolean | undefined>;
  getToken: ComputedRef<(options) => Promise<string | null>>;
  orgId: ComputedRef<string | undefined | null>;
  orgRole: ComputedRef<string | undefined | null>;
  sessionId: ComputedRef<string | undefined | null>;
  sessionClaims: ComputedRef<Record<string, unknown> | undefined | null>;
}
```

<table>
<thead>
  <tr>
    <th>
      Name
    </th>
    
    <th>
      Type
    </th>
    
    <th>
      Defined in
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        isLoaded
      </code>
    </td>
    
    <td>
      <code>
        ComputedRef
      </code>
      
      <<code>
        boolean
      </code>
      
      >
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/clerk/vue/index.ts#L26" rel="nofollow">
        src/runtime/clerk/vue/index.ts:26
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        isSignedIn
      </code>
    </td>
    
    <td>
      <code>
        ComputedRef
      </code>
      
      <<code>
        boolean
      </code>
      
       | <code>
        undefined
      </code>
      
      >
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/clerk/vue/index.ts#L27" rel="nofollow">
        src/runtime/clerk/vue/index.ts:27
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        getToken
      </code>
    </td>
    
    <td>
      <code>
        ComputedRef
      </code>
      
      <(<code>
        options
      </code>
      
      ) => <code>
        Promise
      </code>
      
      <<code>
        string
      </code>
      
       | <code>
        null
      </code>
      
      >>
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/clerk/vue/index.ts#L28" rel="nofollow">
        src/runtime/clerk/vue/index.ts:28
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        orgId
      </code>
    </td>
    
    <td>
      <code>
        ComputedRef
      </code>
      
      <<code>
        string
      </code>
      
       | <code>
        undefined
      </code>
      
       | <code>
        null
      </code>
      
      >
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/clerk/vue/index.ts#L33" rel="nofollow">
        src/runtime/clerk/vue/index.ts:33
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        orgRole
      </code>
    </td>
    
    <td>
      <code>
        ComputedRef
      </code>
      
      <<code>
        string
      </code>
      
       | <code>
        undefined
      </code>
      
       | <code>
        null
      </code>
      
      >
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/clerk/vue/index.ts#L34" rel="nofollow">
        src/runtime/clerk/vue/index.ts:34
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        sessionId
      </code>
    </td>
    
    <td>
      <code>
        ComputedRef
      </code>
      
      <<code>
        string
      </code>
      
       | <code>
        undefined
      </code>
      
       | <code>
        null
      </code>
      
      >
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/clerk/vue/index.ts#L35" rel="nofollow">
        src/runtime/clerk/vue/index.ts:35
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        sessionClaims
      </code>
    </td>
    
    <td>
      <code>
        ComputedRef
      </code>
      
      <<code>
        Record
      </code>
      
      <<code>
        string
      </code>
      
      , <code>
        unknown
      </code>
      
      > | <code>
        undefined
      </code>
      
       | <code>
        null
      </code>
      
      >
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/clerk/vue/index.ts#L39" rel="nofollow">
        src/runtime/clerk/vue/index.ts:39
      </a>
    </td>
  </tr>
</tbody>
</table>

## Variables

### ConvexProviderWithClerk

```ts
const ConvexProviderWithClerk: DefineComponent<ExtractPropTypes<{
  client: {
     type: PropType<IConvexVueClient>;
     default: undefined;
  };
  useAuth: {
     type: PropType<UseAuth>;
     default: undefined;
  };
}>, () => 
  | VNode<RendererNode, RendererElement, {
[key: string]: any;
}>[]
  | undefined, {
}, {
}, {
}, ComponentOptionsMixin, ComponentOptionsMixin, {
}, string, PublicProps, ToResolvedProps<ExtractPropTypes<{
  client: {
     type: PropType<IConvexVueClient>;
     default: undefined;
  };
  useAuth: {
     type: PropType<UseAuth>;
     default: undefined;
  };
}>, {
}>, {
  client: IConvexVueClient;
  useAuth: UseAuth;
}, {
}, {
}, {
}, string, ComponentProvideOptions, true, {
}, any>;
```

Defined in: [src/runtime/clerk/vue/index.ts:95](https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/clerk/vue/index.ts#L95)

A wrapper Vue component which provides a [ConvexVueClient](https://nuxt-convex-module.dev/api-reference/reference/client#convexvueclient)
authenticated with Clerk — the component form of
[provideConvexAuthFromClerk](#provideconvexauthfromclerk), kept as a drop-in parity port of
`convex/react-clerk`'s `<ConvexProviderWithClerk>`. Renders its default
slot once Convex auth is wired.

## Functions

### provideConvexAuthFromClerk()

```ts
function provideConvexAuthFromClerk(options?): ConvexAuthState;
```

Defined in: [src/runtime/clerk/vue/index.ts:76](https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/clerk/vue/index.ts#L76)

A composable which provides a [ConvexVueClient](https://nuxt-convex-module.dev/api-reference/reference/client#convexvueclient)
authenticated with Clerk, exposing the reactive auth state to descendants
via [useConvexAuth](https://nuxt-convex-module.dev/api-reference/reference/client#useconvexauth) — the Vue translation of wrapping the app in
`convex/react-clerk`'s `<ConvexProviderWithClerk>`.

Call it in a top-level component's `setup`. The app must be wrapped by a
configured `clerkPlugin`, from `@clerk/vue`, `@clerk/nuxt` or
another Vue-based Clerk client library and have the corresponding
`useAuth` composable passed in (it defaults to `useAuth` from `@clerk/vue`).

See [Convex Clerk](https://docs.convex.dev/auth/clerk) on how to set up
Convex with Clerk.

#### Parameters

<table>
<thead>
  <tr>
    <th>
      Parameter
    </th>
    
    <th>
      Type
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        options
      </code>
    </td>
    
    <td>
      <a href="#convexproviderwithclerkoptions">
        <code>
          ConvexProviderWithClerkOptions
        </code>
      </a>
    </td>
  </tr>
</tbody>
</table>

#### Returns

[`ConvexAuthState`](https://nuxt-convex-module.dev/api-reference/reference/client#convexauthstate)

#### Example

```vue
<script setup lang="ts">
import { provideConvexAuthFromClerk } from 'nuxt-convex-module/clerk/client'
provideConvexAuthFromClerk()
</script>
```


## Sitemap

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