### Basic <SignUp /> Component Implementation

Source: https://clerk.com/docs/vue/reference/components/authentication/sign-up

This example shows a basic implementation of the <SignUp /> component in a Vue application. Ensure you have the '@clerk/vue' package installed.

```vue
<script setup lang="ts">
import { SignUp } from '@clerk/vue'
</script>

<template>
  <SignUp />
</template>
```

--------------------------------

### Basic <UserProfile /> Implementation

Source: https://clerk.com/docs/vue/reference/components/user/user-profile

This example shows a basic setup for the <UserProfile /> component. Ensure you have the necessary imports from '@clerk/vue'.

```vue
<script setup>
import { UserProfile } from '@clerk/vue'
</script>

<template>
  <UserProfile />
</template>
```

--------------------------------

### Install @clerk/ui package

Source: https://clerk.com/docs/vue/guides/customizing-clerk/appearance-prop/themes

Install the necessary UI package to use Clerk themes. This is a prerequisite for applying themes.

```bash
npm install @clerk/ui
```

--------------------------------

### Run Vue Development Server

Source: https://clerk.com/docs/vue/getting-started/quickstart

Start the development server for your Vue project using Vite.

```bash
npm run dev
```

--------------------------------

### Example Page Using Custom Google One Tap Component

Source: https://clerk.com/docs/vue/guides/development/custom-flows/authentication/google-one-tap

This example demonstrates how to render the CustomGoogleOneTap component on a page to display the Google One Tap sign-in option. It serves as a basic integration point for the custom authentication flow.

```tsx
import { CustomGoogleOneTap } from '@/app/components/CustomGoogleOneTap'

export default function CustomOneTapPage({ children }: { children: React.ReactNode }) {
  return (
    <CustomGoogleOneTap>
      <h1>Google One Tap Example</h1>
    </CustomGoogleOneTap>
  )
}
```

--------------------------------

### Basic <SignIn /> Component Implementation

Source: https://clerk.com/docs/vue/reference/components/authentication/sign-in

This example shows a basic implementation of the <SignIn /> component. Import it and render it within your template.

```vue
<script setup lang="ts">
import { SignIn } from '@clerk/vue'
</script>

<template>
  <SignIn />
</template>
```

--------------------------------

### Basic <CreateOrganization /> Implementation

Source: https://clerk.com/docs/vue/reference/components/organization/create-organization

A basic implementation of the <CreateOrganization /> component. This can serve as a starting point for your own integration.

```vue
<script setup lang="ts">
import { CreateOrganization } from '@clerk/vue'
</script>

<template>
  <CreateOrganization />
</template>
```

--------------------------------

### Access Clerk Object with useClerk()

Source: https://clerk.com/docs/vue/reference/composables/use-clerk

Use the `useClerk()` composable to get access to the Clerk object. This example shows how to call `openSignIn()` to display the sign-in modal.

```vue
<script setup>
import { useClerk } from '@clerk/vue'

const clerk = useClerk()
</script>

<template>
  <button @click="clerk.openSignIn">Sign in</button>
</template>
```

--------------------------------

### Basic PricingTable Implementation

Source: https://clerk.com/docs/vue/reference/components/billing/pricing-table

A simple setup for the PricingTable component in a Vue application. Ensure you have installed the necessary Clerk Vue package.

```vue
<script setup lang="ts">
import { PricingTable } from '@clerk/vue'
</script>

<template>
  <PricingTable />
</template>
```

--------------------------------

### Start Checkout

Source: https://clerk.com/docs/vue/reference/objects/billing

Initiates a new Billing checkout process for the current user or a specified Organization.

```APIDOC
## startCheckout()

### Description
Creates a new Billing checkout for the current user or supplied Organization.

Returns a [BillingCheckoutResource](https://clerk.com/docs/vue/reference/types/billing-checkout-resource.md) object.

### Method Signature
```typescript
function startCheckout(params: CreateCheckoutParams): Promise<BillingCheckoutResource>
```

### Parameters
#### Query Parameters
- **orgId** (string) - Optional - The Organization ID to perform the request on.
- **planId** (string) - Required - The unique identifier for the Plan.
- **planPeriod** ("month" | "annual") - Required - The billing period for the Plan.
- **priceId** (string) - Optional - The specific price ID to check out for, used when the desired price ID is not the current default price.
- **seatsQuantity** (number) - Optional - The number of total seats to check out for.

### Example
```vue
<script setup>
import { useClerk } from '@clerk/vue'

const clerk = useClerk()

const checkout = await clerk.billing.startCheckout({
  planId: 'plan_123',
  planPeriod: 'month',
})
</script>

<template>
  <pre>{{ JSON.stringify(checkout, null, 2) }}</pre>
</template>
```
```

--------------------------------

### authenticateWithSolana

Source: https://clerk.com/docs/vue/reference/objects/clerk

Starts a sign-in flow that uses Solana to authenticate the user using their Solana wallet address.

```APIDOC
## authenticateWithSolana()

### Description
Starts a sign-in flow that uses Solana to authenticate the user using their Solana wallet address.

### Method
```typescript
function authenticateWithSolana(params: AuthenticateWithSolanaParams): Promise<unknown>
```

### Parameters
#### `AuthenticateWithSolanaParams`
- **customNavigate?** (`(to: string) => Promise<unknown>`) - Optional - A function that overrides Clerk's default navigation behavior, allowing custom handling of navigation during sign-up and sign-in flows.
- **legalAccepted?** (`boolean`) - Optional - A boolean indicating whether the user has agreed to the legal compliance documents.
- **redirectUrl?** (`string`) - Optional - The full URL or path to navigate to after a successful sign-in or sign-up.
- **signUpContinueUrl?** (`string`) - Optional - The URL to navigate to if the sign-up process is missing user information.
- **unsafeMetadata?** (`SignUpUnsafeMetadata`) - Optional - Metadata that can be read and set from the frontend. Once the sign-up is complete, the value of this field will be automatically copied to the newly created user's unsafe metadata.
- **walletName** (`string`) - Required - The name of the Solana wallet to use for authentication.
```

--------------------------------

### Authenticate with Solana

Source: https://clerk.com/docs/vue/reference/objects/clerk

Starts a sign-in flow using a Solana wallet for authentication. Requires the wallet name.

```typescript
function authenticateWithSolana(params: AuthenticateWithSolanaParams): Promise<unknown>
```

--------------------------------

### Authenticate with Web3

Source: https://clerk.com/docs/vue/reference/objects/clerk

Starts a sign-in flow using a Web3 wallet browser extension for authentication. Requires specific parameters.

```typescript
function authenticateWithWeb3(params: ClerkAuthenticateWithWeb3Params): Promise<unknown>
```

--------------------------------

### Start Coinbase Wallet Sign-in Flow

Source: https://clerk.com/docs/vue/reference/objects/clerk

Initiates the sign-in process using Coinbase Smart Wallet. This method is useful for authenticating users directly with their Coinbase wallet.

```typescript
function authenticateWithCoinbaseWallet(params?: AuthenticateWithCoinbaseWalletParams): Promise<unknown>
```

--------------------------------

### Get Organization Creation Defaults

Source: https://clerk.com/docs/vue/reference/objects/user

Retrieves the default settings for creating a new organization associated with the current user.

```typescript
function getOrganizationCreationDefaults(): Promise<OrganizationCreationDefaultsResource>
```

--------------------------------

### authenticateWithWeb3

Source: https://clerk.com/docs/vue/reference/objects/clerk

Starts a sign-in flow that uses a Web3 Wallet browser extension to authenticate the user using their Ethereum wallet address.

```APIDOC
## authenticateWithWeb3()

### Description
Starts a sign-in flow that uses a Web3 Wallet browser extension to authenticate the user using their Ethereum wallet address.

### Method
```typescript
function authenticateWithWeb3(params: ClerkAuthenticateWithWeb3Params): Promise<unknown>
```

### Parameters
#### `ClerkAuthenticateWithWeb3Params`
(Parameters for this function are not detailed in the provided source.)
```

--------------------------------

### Basic OrganizationProfile Implementation

Source: https://clerk.com/docs/vue/reference/components/organization/organization-profile

This example shows a basic implementation of the <OrganizationProfile /> component. Import the component and render it within your Vue application's template.

```vue
<script setup lang="ts">
import { OrganizationProfile } from '@clerk/vue'
</script>

<template>
  <OrganizationProfile />
</template>
```

--------------------------------

### create()

Source: https://clerk.com/docs/vue/reference/objects/sign-up-future

Creates a new `SignUp` instance. This method initializes the sign-up lifecycle and can be used to complete sign-up in one step by providing all required parameters. It's intended for advanced use cases; prefer factor-specific methods for common scenarios.

```APIDOC
## create()

### Description
Creates a new `SignUp` instance initialized with the provided parameters. The instance maintains the sign-up lifecycle state through its `status` property, which updates as the authentication flow progresses. Will also deactivate any existing sign-up process the client may already have in progress. Once the sign-up process is complete, call the `signUp.finalize()` method to set the newly created session as the active session.

What you must pass to `params` depends on which [sign-up options](https://clerk.com/docs/guides/configure/auth-strategies/sign-up-sign-up-options.md?sdk=vue) you have enabled in your app's settings in the Clerk Dashboard.

You can complete the sign-up process in one step if you supply the required fields to `create()`. Otherwise, Clerk's sign-up process provides great flexibility and allows users to easily create multi-step sign-up flows.

> The `signUp.create()` method is intended for advanced use cases. For most use cases, prefer the use of the factor-specific methods such as `signUp.password()`, `signUp.sso()`, etc.

### Signature
```typescript
function create(params: SignUpFutureCreateParams): Promise<{ error: null | ClerkError }>
```

### Parameters
#### `SignUpFutureCreateParams`

| Property | Type | Description |
|---|---|---|
| [Properties depend on enabled sign-up options] | [See Clerk documentation for specific types] | [Description of properties based on enabled sign-up options in Clerk Dashboard] |

### Returns
- `Promise<{ error: null | ClerkError }>`: A promise that resolves with an object containing either `null` for `error` on success, or a `ClerkError` object if an error occurred during the creation process.
```

--------------------------------

### prepareVerification()

Source: https://clerk.com/docs/vue/reference/types/web3-wallet

Starts the verification process for the Web3 wallet. The user will be prompted to sign a generated nonce by the browser extension. Returns a `Web3Wallet` object with the signature in the `Verification.message` property. The signature should then be passed to the `attemptVerification()` method.

```APIDOC
## `prepareVerification()`

Starts the verification process for the Web3 wallet. The user will be prompted to sign a generated nonce by the browser extension. Returns a `Web3Wallet` object **with the signature in the `Verification.message` property.** The signature should then be passed to the [attemptVerification()](https://clerk.com/docs/vue/reference/types/web3-wallet.md#attempt-verification) method.

```typescript
function prepareVerification(params: PrepareWeb3WalletVerificationParams): Promise<Web3Wallet>
```
```

--------------------------------

### Create a new SignUp instance

Source: https://clerk.com/docs/vue/reference/objects/sign-up-future

Use `signUp.create()` to initialize a new sign-up process. This method can be used to complete sign-up in one step by providing all required fields in `params`, or to enable multi-step sign-up flows. It deactivates any ongoing sign-up processes. For most use cases, prefer factor-specific methods like `signUp.password()` or `signUp.sso()`.

```typescript
function create(params: SignUpFutureCreateParams): Promise<{ error: null | ClerkError }>
```

--------------------------------

### Retrieve the current Active Organization

Source: https://clerk.com/docs/vue/reference/composables/use-organization

This example shows how to use the `useOrganization()` composable to get the active organization's name. It conditionally renders an `OrganizationSwitcher` if no organization is selected, and displays the organization's name once loaded.

```APIDOC
## Retrieve the current Active Organization

### Description
This example demonstrates how to use the `useOrganization()` composable to access the active [Organization](https://clerk.com/docs/vue/reference/objects/organization.md) object and display its name.

### Usage
```vue
<script setup>
import { OrganizationSwitcher, useOrganization } from '@clerk/vue'

const { organization, isLoaded } = useOrganization()
</script>

<template>
  <div v-if="!organization">
    <OrganizationSwitcher />
  </div>
  <div v-if="isLoaded">
    <p>This current Organization is {{ organization?.name }}</p>
  </div>

  <div v-else>
    <p>Loading...</p>
  </div>
</template>
```
```

--------------------------------

### Google One Tap Component Usage

Source: https://clerk.com/docs/vue/reference/components/authentication/google-one-tap

This example shows a basic implementation of the Google One Tap component in a Vue application. It demonstrates how to import and render the component.

```APIDOC
## GoogleOneTap Component

### Description
The `<GoogleOneTap />` component renders the [Google One Tap](https://developers.google.com/identity/gsi/web/guides/features) UI, allowing users to sign up or sign in to your Clerk application using their Google accounts. It automatically handles sign-in status and redirects.

### Properties

#### cancelOnTapOutside (boolean, optional)
If true, the One Tap prompt closes automatically if the user clicks outside of the prompt. Defaults to true.

#### itpSupport (boolean, optional)
If true, enables the ITP-specific UX when One Tap is rendered on ITP browsers such as Chrome on iOS, Safari, and FireFox. Defaults to true.

#### fedCmSupport (boolean, optional)
If true, enables Google One Tap to use the FedCM API to sign users in. Defaults to true.

#### signInForceRedirectUrl (string, optional)
Specifies a URL to redirect to after a user signs in via Google One Tap. This overrides any other redirect URL configurations.

#### signUpForceRedirectUrl (string, optional)
Specifies a URL to redirect to after a user signs up via Google One Tap. This overrides any other redirect URL configurations.

### Example

```vue
<script setup lang="ts">
import { GoogleOneTap } from '@clerk/vue'
</script>

<template>
  <GoogleOneTap />
</template>
```
```

--------------------------------

### create()

Source: https://clerk.com/docs/vue/reference/types/web3-wallet

Creates a new Web3 wallet.

```APIDOC
## `create()`

Creates a new Web3 wallet.

```typescript
function create(): Promise<Web3Wallet>
```
```

--------------------------------

### Get Notion OAuth Access Token with @clerk/backend

Source: https://clerk.com/docs/vue/guides/configure/auth-strategies/social-connections/overview

Retrieve a user's Notion OAuth access token using the `@clerk/backend` SDK. This example demonstrates how to access authentication details and interact with the Notion API.

```javascript
import { createClerkClient } from '@clerk/backend'

// Initialize clerkClient
const clerkClient = createClerkClient({ secretKey: process.env.CLERK_SECRET_KEY })

async function getNotionData(request) {
  // The `Auth` object gives you access to properties like `isAuthenticated` and `userId`
  // Accessing the `Auth` object differs depending on the SDK you're using
  // https://clerk.com/docs/reference/backend/types/auth-object#how-to-access-the-auth-object
  const { isAuthenticated, userId } = request.auth

  // Protect the route from unauthenticated users
  if (!isAuthenticated) {
    return Response.json({ error: 'Unauthorized' }, { status: 401 })
  }

  // Use the `getUserOauthAccessToken()` method to get the user's OAuth access token
  const provider = 'notion'
  const clerkResponse = await clerkClient.users.getUserOauthAccessToken(userId, provider)
  const accessToken = clerkResponse.data[0]?.token ?? ''
  if (!accessToken) {
    return Response.json({ error: 'Access token not found' }, { status: 403 })
  }

  // Fetch the user data from the Notion API
  // This endpoint fetches a list of users
  // https://developers.notion.com/reference/get-users
  const notionUrl = 'https://api.notion.com/v1/users'

  const notionResponse = await fetch(notionUrl, {
    headers: {
      Authorization: `Bearer ${accessToken}`,
      'Notion-Version': '2022-06-28',
    },
  })

  // Handle the response from the Notion API
  const notionData = await notionResponse.json()

  // Return the Notion data
  return notionData
}
```

--------------------------------

### Get Notion OAuth Access Token with React Router Server

Source: https://clerk.com/docs/vue/guides/configure/auth-strategies/social-connections/overview

Fetch a user's Notion OAuth access token within a React Router server loader function. This example shows how to integrate Clerk's authentication with server-side data fetching for protected routes.

```typescript
import { clerkClient, getAuth } from '@clerk/react-router/server'
import type { Route } from './+types/notion'

export async function loader(args: Route.LoaderArgs) {
  // The `Auth` object gives you access to properties like `isAuthenticated` and `userId`
  // Accessing the `Auth` object differs depending on the SDK you're using
  // https://clerk.com/docs/reference/backend/types/auth-object#how-to-access-the-auth-object
  const { isAuthenticated, userId } = await getAuth(args)

  // Protect the route from unauthenticated users
  if (!isAuthenticated) {
    return new Response('User not authenticated', {
      status: 401,
    })
  }

  const provider = 'notion'

  // Use the `getUserOauthAccessToken()` method to get the user's OAuth access token
  const clerkResponse = await clerkClient(args).users.getUserOauthAccessToken(userId, provider)
  const accessToken = clerkResponse.data[0]?.token ?? ''
  if (!accessToken) {
    return new Response('Access token not found', {
      status: 401,
    })
  }

  // Fetch the user data from the Notion API
  // This endpoint fetches a list of users
  // https://developers.notion.com/reference/get-users
  const notionUrl = 'https://api.notion.com/v1/users'

  const notionResponse = await fetch(notionUrl, {
    headers: {
      Authorization: `Bearer ${accessToken}`,
      'Notion-Version': '2022-06-28',
    },
  })

  // Handle the response from the Notion API
  const notionData = await notionResponse.json()

  // Return the Notion data
  return { notionData }
}
```

--------------------------------

### web3()

Source: https://clerk.com/docs/vue/reference/objects/sign-up-future

Performs a Web3-based sign-up. This method initiates the sign-up process using a Web3 authentication strategy, such as connecting a wallet and signing a message.

```APIDOC
## web3()

### Description
Performs a Web3-based sign-up.

### Method Signature
```typescript
function web3(params: SignUpFutureWeb3Params): Promise<{ error: null | ClerkError }>
```

### Parameters
#### `SignUpFutureWeb3Params`

| Property | Type | Description |
|---|---|---|
| `firstName?` | `string` | The user's first name. Only supported if First and last name is enabled in the instance settings. |
| `lastName?` | `string` | The user's last name. Only supported if First and last name is enabled in the instance settings. |
| `legalAccepted?` | `boolean` | Indicates whether the user has agreed to the legal compliance documents. |
| `locale?` | `string` | The locale to assign to the user in BCP 47 format (e.g., "en-US", "fr-FR"). If omitted, defaults to the browser's locale. |
| `strategy` | `"web3_metamask_signature" | "web3_base_signature" | "web3_coinbase_wallet_signature" | "web3_okx_wallet_signature" | "web3_solana_signature"` | The verification strategy to validate the user's sign-up request. |
| `unsafeMetadata?` | `SignUpUnsafeMetadata` | Metadata that can be read and set from the frontend. Once the sign-up is complete, the value of this field will be automatically copied to the newly created user's unsafe metadata. |

### Returns
- `Promise<{ error: null | ClerkError }>`: A promise that resolves with an object containing either an error or null if the sign-up was successful.
```

--------------------------------

### Install Clerk Vue SDK

Source: https://clerk.com/docs/vue/getting-started/quickstart

Install the official Clerk Vue SDK to enable authentication features in your Vue application.

```bash
npm install @clerk/vue
```

--------------------------------

### Initiate SSO Sign-Up

Source: https://clerk.com/docs/vue/reference/objects/sign-up-future

Use `sso()` to perform a sign-up using Single Sign-On (SSO), including Social/OAuth or Enterprise connections. This method requires `SignUpFutureSSOParams` to specify details like email address, enterprise connection ID, first name, and last name.

```typescript
function sso(params: SignUpFutureSSOParams): Promise<{ error: null | ClerkError }>
```

--------------------------------

### Install @clerk/types Package

Source: https://clerk.com/docs/vue/reference/types/overview

Install the `@clerk/types` package to access Clerk's type definitions. This package is essential for enabling type-safety in your project.

```bash
npm install @clerk/types
```

--------------------------------

### create()

Source: https://clerk.com/docs/vue/reference/objects/client

Creates a new client for the current instance along with its cookie.

```APIDOC
## create()

### Description
Creates a new client for the current instance along with its cookie.

### Method
N/A (SDK Method)

### Parameters
N/A

### Request Example
N/A

### Response
#### Success Response
- **ClientResource** - The newly created client resource.
```

--------------------------------

### Get Billing Plans in Vue.js

Source: https://clerk.com/docs/vue/reference/objects/billing

Fetches a list of all publicly visible billing plans using the `getPlans()` method. Ensure you have imported and accessed the `useClerk` composable to get the `clerk` object.

```typescript
function getPlans(params?: GetPlansParams): Promise<ClerkPaginatedResponse<BillingPlanResource>>
```

```vue
<script setup>
import { useClerk } from '@clerk/vue'

// Use the useClerk composable to access the clerk object
const clerk = useClerk()

// Call the getPlans() method
const plans = await clerk.billing.getPlans()
</script>

<template>
  <pre>{{ JSON.stringify(plans, null, 2) }}</pre>
</template>
```

--------------------------------

### getOrganization()

Source: https://clerk.com/docs/vue/reference/objects/clerk

Gets a single Organization by ID.

```APIDOC
## `getOrganization()`

### Description
Gets a single [Organization](https://clerk.com/docs/vue/reference/objects/organization.md) by ID.

### Method Signature
```typescript
function getOrganization(organizationId: string): Promise<OrganizationResource>
```

### Parameters
- `organizationId` (string) - Required - The ID of the Organization to get.
```

--------------------------------

### load()

Source: https://clerk.com/docs/vue/reference/objects/clerk

Initializes the Clerk object and loads necessary environment configuration and instance settings from the Frontend API. Accepts an optional ClerkOptions object for configuration.

```APIDOC
## `load()`

### Description
Initializes the `Clerk` object and loads all necessary environment configuration and instance settings from the [Frontend API](https://clerk.com/docs/reference/frontend-api).

### Method
`load(opts?: Without<ClerkOptions, 'isSatellite'>): Promise<void>`

### Parameters
#### Options (`opts`)
An optional object that accepts the following props. All props are optional.

- **`afterMultiSessionSingleSignOutUrl`** (string | null) - Optional - The full URL or path to navigate to after signing out the current user is complete. This option applies to [multi-session applications](https://clerk.com/docs/guides/secure/session-options.md?sdk=vue#multi-session-applications).
- **`afterSignOutUrl`** (string | null) - Optional - The full URL or path to navigate to after successful sign out.
```

--------------------------------

### getPlan()

Source: https://clerk.com/docs/vue/reference/objects/billing

Gets a given Billing Plan. Returns a BillingPlanResource object.

```APIDOC
## getPlan()

### Description
Gets a given Billing Plan.

### Method
```typescript
function getPlan(params: GetPlanParams): Promise<BillingPlanResource>
```

### Parameters
#### Query Parameters
- **id** (string) - Required - The ID of the Billing Plan to get.

### Request Example
```vue
<script setup>
import { useClerk } from '@clerk/vue'

const clerk = useClerk()
const plan = await clerk.billing.getPlan({
  id: 'plan_123',
})
</script>

<template>
  <pre>{{ JSON.stringify(plan, null, 2) }}</pre>
</template>
```
```

--------------------------------

### buildSignUpUrl()

Source: https://clerk.com/docs/vue/reference/objects/clerk

Returns the configured URL where the SignUp component is mounted or a custom sign-up page is rendered. It accepts optional redirect options.

```APIDOC
## buildSignUpUrl()

### Description
Returns the configured URL where the `SignUp` component is mounted or a custom sign-up page is rendered.

### Method
```typescript
function buildSignUpUrl(opts?: RedirectOptions): string
```

### Parameters
#### RedirectOptions
- **redirectUrl?** (string | null) - Optional - Full URL or path to navigate to after a successful action.
- **signInFallbackRedirectUrl?** (string | null) - Optional - The fallback URL to redirect to after the user signs in, if there's no `redirect_url` in the path already. Defaults to `'/'`.
- **signInForceRedirectUrl?** (string | null) - Optional - If provided, this URL will always be redirected to after the user signs in.
- **signUpFallbackRedirectUrl?** (string | null) - Optional - The fallback URL to redirect to after the user signs up, if there's no `redirect_url` in the path already. Defaults to `'/'`.
- **signUpForceRedirectUrl?** (string | null) - Optional - If provided, this URL will always be redirected to after the user signs up.
```

--------------------------------

### getPaymentMethods()

Source: https://clerk.com/docs/vue/reference/objects/user

Gets a list of payment methods that have been stored. Returns a ClerkPaginatedResponse of BillingPaymentMethodResource objects.

```APIDOC
## getPaymentMethods()

### Description
Gets a list of payment methods that have been stored.

Returns a [ClerkPaginatedResponse](https://clerk.com/docs/vue/reference/types/clerk-paginated-response.md) of [BillingPaymentMethodResource](https://clerk.com/docs/vue/reference/types/billing-payment-method-resource.md) objects.

### Method Signature
```typescript
function getPaymentMethods(params?: GetPaymentMethodsParams): Promise<ClerkPaginatedResponse<BillingPaymentMethodResource>>
```

### Parameters
#### `GetPaymentMethodsParams`
- `initialPage` (number) - Optional - A number that specifies which page to fetch. For example, if `initialPage` is set to `10`, it will skip the first 9 pages and fetch the 10th page. Defaults to `1`.
- `pageSize` (number) - Optional - A number that specifies the maximum number of results to return per page. Defaults to `10`.
```

--------------------------------

### Create a Web3 Wallet

Source: https://clerk.com/docs/vue/reference/types/web3-wallet

Use this method to create a new Web3 wallet instance. It returns a Promise that resolves with the created Web3Wallet object.

```typescript
function create(): Promise<Web3Wallet>
```

--------------------------------

### getOrganizationSuggestions()

Source: https://clerk.com/docs/vue/reference/objects/user

Gets a list of Organization suggestions for the user. Returns a ClerkPaginatedResponse of OrganizationSuggestionResource objects.

```APIDOC
## getOrganizationSuggestions()

### Description
Gets a list of Organization suggestions for the user.

Returns a [ClerkPaginatedResponse](https://clerk.com/docs/vue/reference/types/clerk-paginated-response.md) of [OrganizationSuggestionResource](https://clerk.com/docs/vue/reference/types/organization-suggestion.md) objects.

### Method Signature
```typescript
function getOrganizationSuggestions(params?: GetUserOrganizationSuggestionsParams): Promise<ClerkPaginatedResponse<OrganizationSuggestionResource>>
```

### Parameters
#### `GetUserOrganizationSuggestionsParams`
- `initialPage` (number) - Optional - A number that specifies which page to fetch. For example, if `initialPage` is set to `10`, it will skip the first 9 pages and fetch the 10th page. Defaults to `1`.
- `pageSize` (number) - Optional - A number that specifies the maximum number of results to return per page. Defaults to `10`.
- `status` (string) - Optional - The status a suggestion can have. Possible values: "pending", "accepted", or an array of these values.
```

--------------------------------

### buildAfterSignUpUrl(params?)

Source: https://clerk.com/docs/vue/reference/objects/clerk

Returns the configured `afterSignUpUrl` of the instance, optionally with query parameters.

```APIDOC
## `buildAfterSignUpUrl(params?)`

### Description
Returns the configured `afterSignUpUrl` of the instance.

### Method
```typescript
function buildAfterSignUpUrl(params?: { params?: URLSearchParams }): string
```

### Parameters
#### Query Parameters
- **params?** (`{ params?: URLSearchParams; }`) - Optional - Optional query parameters to append to the URL.
```

--------------------------------

### getOrganizationMemberships()

Source: https://clerk.com/docs/vue/reference/objects/user

Gets a list of Organization memberships for the user. Returns a ClerkPaginatedResponse of OrganizationMembershipResource objects.

```APIDOC
## getOrganizationMemberships()

### Description
Gets a list of Organization memberships for the user. Returns a [ClerkPaginatedResponse](https://clerk.com/docs/vue/reference/types/clerk-paginated-response.md) of [OrganizationMembershipResource](https://clerk.com/docs/vue/reference/types/organization-membership.md) objects.

### Method Signature
```ts
function getOrganizationMemberships(
  params?: GetUserOrganizationMembershipParams
): Promise<ClerkPaginatedResponse<OrganizationMembershipResource>>
```

### Parameters
#### `GetUserOrganizationMembershipParams`
- `initialPage` (number) - Optional - A number that can be used to skip the first n-1 pages. For example, if initialPage is set to 10, it is will skip the first 9 pages and will fetch the 10th page.
- `pageSize` (number) - Optional - A number that indicates the maximum number of results that should be returned for a specific page.
```

--------------------------------

### Get Provider Slug

Source: https://clerk.com/docs/vue/reference/types/external-account

Retrieves the slug identifier for the external account's provider.

```typescript
function providerSlug(): string
```

--------------------------------

### prepareAffiliationVerification()

Source: https://clerk.com/docs/vue/reference/types/organization-domain-resource

Begins the verification process of a created Organization domain. This is a required step in order to complete the registration of the domain under the Organization.

```APIDOC
## prepareAffiliationVerification()

### Description
Begins the verification process of a created Organization domain. This is a required step in order to complete the registration of the domain under the Organization.

### Method
POST

### Endpoint
/organizations/{organizationId}/domains/{domainId}/prepare-affiliation-verification

### Parameters
#### Request Body
- **affiliationEmailAddress** (string) - Required - An email address that is affiliated with the domain name (e.g. user@example.com).

### Response
#### Success Response (200)
- **organizationDomain** (OrganizationDomain) - The organization domain object with verification initiated.

### Request Example
```json
{
  "affiliationEmailAddress": "user@example.com"
}
```

### Response Example
```json
{
  "id": "123",
  "organizationId": "org_abc",
  "domain": "example.com",
  "status": "pendingVerification",
  "createdAt": "2023-01-01T12:00:00Z",
  "updatedAt": "2023-01-01T12:05:00Z"
}
```
```

--------------------------------

### Get Subscription

Source: https://clerk.com/docs/vue/reference/objects/billing

Retrieves the main Billing Subscription for the current user or a specified Organization.

```APIDOC
## getSubscription()

### Description
Gets the main Billing Subscription for the current user or supplied Organization.

Returns a [BillingSubscriptionResource](https://clerk.com/docs/vue/reference/types/billing-subscription-resource.md) object.

### Method Signature
```typescript
function getSubscription(params: GetSubscriptionParams): Promise<BillingSubscriptionResource>
```

### Parameters
#### Query Parameters
- **orgId** (string) - Optional - The unique identifier for the Organization to get the subscription for.

### Example
```vue
<script setup>
import { useClerk } from '@clerk/vue'

const clerk = useClerk()

const subscription = await clerk.billing.getSubscription({
  orgId: 'org_123',
})
</script>

<template>
  <pre>{{ JSON.stringify(subscription, null, 2) }}</pre>
</template>
```
```

--------------------------------

### Check Sign-up State with useSignUp()

Source: https://clerk.com/docs/vue/reference/composables/use-sign-up

Use the useSignUp() hook to access the SignUp object and its properties like isLoaded and status. This example demonstrates handling the loading state before displaying the sign-up status.

```vue
<script setup>
import { useSignUp } from '@clerk/vue'

const { isLoaded, signUp } = useSignUp()
</script>

<template>
  <div v-if="!isLoaded">
    <!-- Handle loading state -->
  </div>

  <div v-else>The current sign-up attempt status is {{ signUp?.status }}.</div>
</template>
```

--------------------------------

### Start Session Verification

Source: https://clerk.com/docs/vue/reference/objects/session

Initiates the reverification flow for a session. Returns a SessionVerification instance.

```typescript
function startVerification(params: SessionVerifyCreateParams): Promise<SessionVerificationResource>
```

```typescript
type SessionVerifyCreateParams = {
  /**
   * The level of the verification to create.
   */
  level: "first_factor" | "second_factor" | "multi_factor"
}
```

--------------------------------

### getRoles()

Source: https://clerk.com/docs/vue/reference/objects/organization

Gets the list of Roles available. Returns a ClerkPaginatedResponse of RoleResource objects and a `has_role_set_migration` status.

```APIDOC
## getRoles()

### Description
Gets the list of Roles available. Returns a ClerkPaginatedResponse of RoleResource objects and a `has_role_set_migration` status.

When `has_role_set_migration` is `true`, updating Organization membership Roles is not allowed. Learn how to build a custom flow for managing member Roles in an Organization.

### Signature
```typescript
function getRoles(params?: GetRolesParams): Promise<GetRolesResponse>
```

### Parameters
#### Query Parameters
- **initialPage** (number) - Optional - A number that specifies which page to fetch. For example, if `initialPage` is set to `10`, it will skip the first 9 pages and fetch the 10th page. Defaults to `1`.
- **pageSize** (number) - Optional - A number that specifies the maximum number of results to return per page. Defaults to `10`.
```

--------------------------------

### Paginate Organization memberships

Source: https://clerk.com/docs/vue/reference/composables/use-organization

This example demonstrates how to use `useOrganization()` to fetch and display a paginated list of organization memberships. It includes functionality to navigate between pages using 'Previous' and 'Next' buttons.

```APIDOC
## Paginate Organization memberships

### Description
This example demonstrates how to use `useOrganization()` to access the Organization's memberships and implement pagination. It fetches pages of memberships when the "Previous page" or "Next page" buttons are clicked.

### Usage
```vue
<script setup>
import { ref, watchEffect } from 'vue'
import { OrganizationSwitcher, useOrganization } from '@clerk/vue'

const memberships = ref([])
const currentPage = ref(1)
const { organization, isLoaded } = useOrganization()

const pageSize = 5

async function fetchMemberships() {
  if (!organization.value) {
    return
  }

  // Use the `getMemberships()` method on the `organization` object to fetch the organization's memberships.
  const { data } = await organization.value.getMemberships({
    initialPage: currentPage.value,
    pageSize: pageSize,
  })
  memberships.value = data
}

watchEffect(() => {
  if (!organization.value) {
    return
  }

  fetchMemberships()
})

const fetchPrevious = () => currentPage.value--
const fetchNext = () => currentPage.value++
</script>

<template>
  <div v-if="!organization">
    <OrganizationSwitcher />
  </div>

  <div v-else-if="isLoaded">
    <h2>Organization members</h2>

    <ul>
      <li v-for="membership in memberships" :key="membership.id">
        {{ membership.publicUserData.firstName }} {{ membership.publicUserData.lastName }} &lt;{{
          membership.publicUserData.identifier
        }}&gt; :: {{ membership.role }}
      </li>
    </ul>

    <div>
      <button :disabled="currentPage === 1" @click="fetchPrevious">Previous</button>
      <button :disabled="memberships.length < pageSize" @click="fetchNext">Next</button>
    </div>
  </div>

  <div v-else>
    <p>Loading...</p>
  </div>
</template>
```
```

--------------------------------

### redirectToSignUp()

Source: https://clerk.com/docs/vue/reference/objects/clerk

Redirects the user to the sign-up page. This method uses the `navigate()` method internally and returns a promise.

```APIDOC
## redirectToSignUp()

### Description
Redirects to the sign-up URL, as configured in your application's instance settings. This method uses the `navigate()` method under the hood.

Returns a promise that can be `await`ed in order to listen for the navigation to finish. The inner value should not be relied on, as it can change based on the framework it's used within.

### Signature
```typescript
function redirectToSignUp(opts?: SignUpRedirectOptions): Promise<unknown>
```

### Parameters
#### Path Parameters
- **opts?** (SignUpRedirectOptions) - Options to control the redirect.
```

--------------------------------

### useSignUp() Composable

Source: https://clerk.com/docs/vue/reference/composables/use-sign-up

The useSignUp() composable returns an object with properties to manage the sign-up process. It includes a loading state indicator, a function to set the active session, and the SignUp object itself which holds the current attempt status and related methods.

```APIDOC
## useSignUp()

### Description
Provides access to the `SignUp` object, which allows you to check the current state of a sign-up attempt and manage the sign-up flow. This is useful for creating custom sign-up flows.

### Returns

- **isLoaded** (Ref<boolean>) - A boolean that indicates whether Clerk has completed initialization. Initially false, becomes true once Clerk loads.
- **setActive()** (Ref<(params: SetActiveParams) => Promise<void>>) - A function that sets the active session.
- **signUp** (Ref<SignUp>) - An object that contains the current sign-up attempt status and methods to create a new sign-up attempt.

### Usage Example

```vue
<script setup>
import { useSignUp } from '@clerk/vue'

const { isLoaded, signUp } = useSignUp()
</script>

<template>
  <div v-if="!isLoaded">
    <!-- Handle loading state -->
  </div>

  <div v-else>The current sign-up attempt status is {{ signUp?.status }}.</div>
</template>
```
```

--------------------------------

### Get Active Sessions

Source: https://clerk.com/docs/vue/reference/objects/user

Fetches all active sessions for the user. This method is cached and triggers a network request only once.

```typescript
function getSessions(): Promise<SessionWithActivitiesResource[]>
```

--------------------------------

### getPaymentMethods()

Source: https://clerk.com/docs/vue/reference/objects/organization

Gets a list of payment methods that have been stored. Supports filtering by initial page and page size.

```APIDOC
## getPaymentMethods()

### Description
Gets a list of payment methods that have been stored. Returns a ClerkPaginatedResponse of BillingPaymentMethodResource objects.

### Method
```typescript
function getPaymentMethods(params?: GetPaymentMethodsParams): Promise<ClerkPaginatedResponse<BillingPaymentMethodResource>>
```

### Parameters
#### Query Parameters
- **initialPage** (number) - Optional - A number that specifies which page to fetch. Defaults to `1`.
- **pageSize** (number) - Optional - A number that specifies the maximum number of results to return per page. Defaults to `10`.
```

--------------------------------

### Build After Sign Up URL

Source: https://clerk.com/docs/vue/reference/objects/clerk

Returns the configured `afterSignUpUrl` for the Clerk instance. Optionally append query parameters to the URL. Use this to specify where users are redirected after signing up.

```typescript
function buildAfterSignUpUrl(params?: { params?: URLSearchParams }): string
```

--------------------------------

### redirectToCreateOrganization()

Source: https://clerk.com/docs/vue/reference/objects/clerk

Redirects to the configured URL for creating a new organization. This method uses the `navigate()` method internally and returns a promise.

```APIDOC
## redirectToCreateOrganization()

### Description
Redirects to the configured URL where `<CreateOrganization />` is mounted. This method uses the `navigate()` method under the hood.

Returns a promise that can be `await`ed in order to listen for the navigation to finish. The inner value should not be relied on, as it can change based on the framework it's used within.

### Signature
```typescript
function redirectToCreateOrganization(): Promise<unknown>
```
```

--------------------------------

### Get Provider Title

Source: https://clerk.com/docs/vue/reference/types/external-account

Returns the display title for the external account's provider, with 'Account' appended.

```typescript
function providerTitle(): string
```

--------------------------------

### SignIn.create()

Source: https://clerk.com/docs/vue/reference/objects/sign-in-future

Creates a new `SignIn` instance. This method is intended for advanced use cases and allows for flexible, multi-step sign-in flows. For most common scenarios, prefer factor-specific methods like `signIn.password()` or `signIn.emailCode.sendCode()`.

```APIDOC
## `create()`

### Description
Creates a new `SignIn` instance initialized with the provided parameters. The instance maintains the sign-in lifecycle state through its `status` property, which updates as the authentication flow progresses. Once the sign-in process is complete, call the `signIn.finalize()` method to set the newly created session as the active session.

What you must pass to `params` depends on which [sign-in options](https://clerk.com/docs/guides/configure/auth-strategies/sign-up-sign-in-options.md?sdk=vue) you have enabled in your app's settings in the Clerk Dashboard.

You can complete the sign-in process in one step if you supply the required fields to `create()`. Otherwise, Clerk's sign-in process provides great flexibility and allows users to easily create multi-step sign-in flows.

> The `signIn.create()` method is intended for advanced use cases. For most use cases, prefer the use of the factor-specific methods such as `signIn.password()`, `signIn.emailCode.sendCode()`, etc.

### Method Signature
```typescript
function create(params: SignInFutureCreateParams): Promise<{ error: null | ClerkError }>
```

### Parameters
#### `params` (SignInFutureCreateParams)
- Required - An object containing the parameters for creating the sign-in instance. The specific fields required depend on the enabled sign-in options in your Clerk Dashboard.
```

--------------------------------

### Perform Ticket-Based Sign-Up

Source: https://clerk.com/docs/vue/reference/objects/sign-up-future

Use the `ticket()` method to initiate a sign-up process using a ticket or token. This is required when the sign-up strategy is set to 'ticket'.

```typescript
function ticket(params?: SignUpFutureTicketParams): Promise<{ error: null | ClerkError }>
```

--------------------------------

### buildAfterSignInUrl(params?)

Source: https://clerk.com/docs/vue/reference/objects/clerk

Returns the configured `afterSignInUrl` of the instance, optionally with query parameters.

```APIDOC
## `buildAfterSignInUrl(params?)`

### Description
Returns the configured `afterSignInUrl` of the instance.

### Method
```typescript
function buildAfterSignInUrl(params?: { params?: URLSearchParams }): string
```

### Parameters
#### Query Parameters
- **params?** (`{ params?: URLSearchParams; }`) - Optional - Optional query parameters to append to the URL.
```

--------------------------------

### getMemberships()

Source: https://clerk.com/docs/vue/reference/objects/organization

Gets the list of Organization Memberships. Supports filtering by initial page, page size, query, and role.

```APIDOC
## getMemberships()

### Description
Gets the list of Organization Memberships. Returns a ClerkPaginatedResponse of OrganizationMembershipResource objects.

### Method
```typescript
function getMemberships(params?: GetMembersParams): Promise<ClerkPaginatedResponse<OrganizationMembershipResource>>
```

### Parameters
#### Query Parameters
- **initialPage** (number) - Optional - A number that specifies which page to fetch. Defaults to `1`.
- **pageSize** (number) - Optional - A number that specifies the maximum number of results to return per page. Defaults to `10`.
- **query** (string) - Optional - The query to filter the users by.
- **role** (OrganizationCustomRoleKey[]) - Optional - The Role to filter the users by.
```

--------------------------------

### Render drawer in a custom portal container

Source: https://clerk.com/docs/vue/reference/components/billing/plan-details-button

This example shows how to render the Plan details drawer within a custom portal container by specifying the portal ID and root element.

```tsx
const portalRoot = document.getElementById('custom-portal')

<PlanDetailsButton
  planId="cplan_xxx"
  planDetailsProps={{
    portalId: 'custom-portal',
    portalRoot: portalRoot,
  }}
/>
```

--------------------------------

### getPaymentAttempts()

Source: https://clerk.com/docs/vue/reference/objects/billing

Gets a list of payment attempts for the current user or supplied Organization. Returns a ClerkPaginatedResponse of BillingPaymentResource objects.

```APIDOC
## getPaymentAttempts()

### Description
Gets a list of payment attempts for the current user or supplied Organization.

### Method
```typescript
function getPaymentAttempts(params: GetPaymentAttemptsParams): Promise<ClerkPaginatedResponse<BillingPaymentResource>>
```

### Parameters
#### Query Parameters
- **initialPage** (number) - Optional - A number that specifies which page to fetch. For example, if `initialPage` is set to `10`, it will skip the first 9 pages and fetch the 10th page. Defaults to `1`.
- **orgId** (string) - Optional - The Organization ID to perform the request on.
- **pageSize** (number) - Optional - A number that specifies the maximum number of results to return per page. Defaults to `10`.

### Request Example
```vue
<script setup>
import { useClerk } from '@clerk/vue'

const clerk = useClerk()
const paymentAttempts = await clerk.billing.getPaymentAttempts()
</script>

<template>
  <pre>{{ JSON.stringify(paymentAttempts, null, 2) }}</pre>
</template>
```
```

--------------------------------

### getPaymentAttempt()

Source: https://clerk.com/docs/vue/reference/objects/billing

Gets details of a specific payment attempt for the current user or supplied Organization. Returns a BillingPaymentResource object.

```APIDOC
## getPaymentAttempt()

### Description
Gets details of a specific payment attempt for the current user or supplied Organization.

### Method
`getPaymentAttempt(params: GetPaymentAttemptParams): Promise<BillingPaymentResource>`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

#### `GetPaymentAttemptParams`
- **id** (string) - Required - The unique identifier for the payment attempt to get.
- **initialPage?** (number) - Optional - A number that specifies which page to fetch. For example, if `initialPage` is set to `10`, it will skip the first 9 pages and fetch the 10th page. Defaults to `1`.
- **orgId?** (string) - Optional - The Organization ID to perform the request on.
- **pageSize?** (number) - Optional - A number that specifies the maximum number of results to return per page. Defaults to `10`.

### Request Example
```vue
<script setup>
import { useClerk } from '@clerk/vue'

const clerk = useClerk()

const paymentAttempt = await clerk.billing.getPaymentAttempt({
  id: 'payment_attempt_123',
})
</script>

<template>
  <pre>{{ JSON.stringify(paymentAttempt, null, 2) }}</pre>
</template>
```

### Response
#### Success Response (200)
Returns a [BillingPaymentResource](https://clerk.com/docs/vue/reference/types/billing-payment-resource.md) object.

#### Response Example
(Response structure depends on the BillingPaymentResource type)
```

--------------------------------

### Initialize Payment Method

Source: https://clerk.com/docs/vue/reference/objects/organization

Initializes a payment method for the organization using a specified gateway. Currently, only 'stripe' is supported.

```typescript
function initializePaymentMethod(params: InitializePaymentMethodParams): Promise<BillingInitializedPaymentMethodResource>
```

--------------------------------

### Verify MFA Backup Code

Source: https://clerk.com/docs/vue/reference/objects/sign-in-future

Verifies a backup code provided by the user, which was generated during the setup of multi-factor authentication.

```typescript
function verifyBackupCode(params: SignInFutureBackupCodeVerifyParams): Promise<{ error: null | ClerkError }>
```