Skip to main content
Docs

clerkPlugin

The clerkPlugin is required to integrate Clerk into your Vue application, providing session and user context to Clerk's composables and components.

Usage

To configure Clerk with Vue, you must initialize clerkPlugin. It's required to pass your Clerk as an option. You can add an if statement to check that the key is imported properly. This prevents the app from running without the Publishable Key and catches TypeScript errors.

The clerkPlugin accepts optional options, such as { signInForceRedirectUrl: '/dashboard' }. See the properties sectionVue.js Icon for more information.

src/main.ts
import { createApp } from 'vue'
import App from './App.vue'
import { clerkPlugin } from '@clerk/vue'

const PUBLISHABLE_KEY = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY

if (!PUBLISHABLE_KEY) {
  throw new Error('Add your Clerk Publishable Key to the .env.local file')
}

const app = createApp(App)
// clerkPlugin requires your Clerk Publishable Key
// It can accept other options, such as { signInForceRedirectUrl: '/dashboard' }
app.use(clerkPlugin, { publishableKey: PUBLISHABLE_KEY })
app.mount('#app')

To update Clerk options at runtime, use the updateClerkOptions()Vue.js Icon function.

Properties

  • Name
    afterMultiSessionSingleSignOutUrl?
    Type
    null | string
    Description

    The full URL or path to navigate to after signing out the current user is complete. This option applies to multi-session applications.

  • Name
    afterSignOutUrl?
    Type
    null | string
    Description

    Full URL or path to navigate to after successful sign out.

  • Name
    allowedRedirectOrigins?
    Type
    (string | RegExp)[]
    Description

    An optional array of domains to validate user-provided redirect URLs against. If no match is made, the redirect is considered unsafe and the default redirect will be used with a warning logged in the console.

  • Name
    allowedRedirectProtocols?
    Type
    string[]
    Description

    An optional array of protocols to validate user-provided redirect URLs against. If no match is made, the redirect is considered unsafe and the default redirect will be used with a warning logged in the console.

  • Name
    appearance?
    Type
    ExtractAppearanceType<TUi, Appearance>
    Description

    Optional object to style your components. Will only affect Clerk Components and not Account Portal pages.

  • Name
    domain?
    Type
    string | (url: URL) => string
    Description

    Required if your application is a satellite application. Sets the domain of the satellite application.

  • Name
    experimental?
    Type
    Autocomplete<{ commerce: boolean; persistClient: boolean; rethrowOfflineNetworkErrors: boolean; }, Record<string, any>>
    Description

    Enable experimental flags to gain access to new features. These flags are not guaranteed to be stable and may change drastically in between patch or minor versions.

  • Name
    initialState?
    Type
    Serializable<{ actor: undefined | { [x: string]: unknown; sub: string; type?: "agent"; }; factorVerificationAge: [number, number]; organization: undefined | OrganizationResourceJavaScript Icon; orgId: undefined | string; orgPermissions: undefined | string[]; orgRole: undefined | string; orgSlug: undefined | string; session: undefined | SessionResourceJavaScript Icon; sessionClaims: JwtPayload; sessionId: undefined | string; sessionStatus: SessionStatusClaimJavaScript Icon; user: undefined | UserResourceJavaScript Icon; userId: undefined | string; }>
    Description

    Provide an initial state of the Clerk client during server-side rendering. You don't need to set this value yourself unless you're developing an SDK.

  • Name
    isSatellite?
    Type
    boolean | (url: URL) => boolean
    Description

    A boolean that indicates whether the application is a satellite application.

  • Name
    localization?
    Type
    LocalizationResource
    Description

    Optional object to localize your components. Will only affect Clerk Components and not Account Portal pages.

  • Name
    newSubscriptionRedirectUrl?
    Type
    null | string
    Description

    The URL to navigate to after the user completes the checkout and clicks the "Continue" button.

  • Name
    nonce?
    Type
    string
    Description

    This nonce value will be passed through to the @clerk/clerk-js script tag. Use it to implement a strict-dynamic CSP. Requires the dynamic prop to also be set.

  • Name
    prefetchUI?
    Type
    boolean
    Description

    Controls prefetching of the @clerk/ui script. - false - Skip prefetching the UI (for custom UIs using Control Components) - undefined (default) - Prefetch UI normally

  • Name
    proxyUrl?
    Type
    string | (url: URL) => string | (url: URL) => string
    Description

    Required for applications that run behind a reverse proxy. The URL that Clerk will proxy requests to. Can be either a relative path (/__clerk) or a full URL (https://<your-domain>/__clerk).

  • Name
    publishableKey
    Type
    string
    Description

    The Clerk Publishable Key for your instance. This can be found on the API keys page in the Clerk Dashboard.

  • Name
    routerPush?
    Type
    (to: string, metadata?: { windowNavigate: (to: string | URL) => void; }) => unknown
    Description

    A function which takes the destination path as an argument and performs a "push" navigation.

  • Name
    routerReplace?
    Type
    (to: string, metadata?: { windowNavigate: (to: string | URL) => void; }) => unknown
    Description

    A function which takes the destination path as an argument and performs a "replace" navigation.

  • Name
    satelliteAutoSync?
    Type
    boolean
    Description

    Controls whether satellite apps automatically sync with the primary domain on initial page load. When false (default), satellite apps will skip the automatic handshake if no session cookies exist, and only trigger the handshake after an explicit sign-in action. This provides the best performance by showing the satellite app immediately without attempting to sync state first. When true, satellite apps will automatically trigger a handshake redirect to sync authentication state with the primary domain on first load, even if no session cookies exist. Use this if you want users who are already signed in on the primary domain to be automatically recognized on the satellite. Defaults to false.

  • Name
    sdkMetadata?
    Type
    { environment?: string; name: string; version: string; }
    Description

    Contains information about the SDK that the host application is using. You don't need to set this value yourself unless you're developing an SDK.

  • Name
    sdkMetadata.environment?
    Type
    string
    Description

    Typically this will be the NODE_ENV that the SDK is currently running in.

  • Name
    sdkMetadata.name
    Type
    string
    Description

    The npm package name of the SDK.

  • Name
    sdkMetadata.version
    Type
    string
    Description

    The npm package version of the SDK.

  • Name
    selectInitialSession?
    Type
    (client: ClientResource) => null | SignedInSessionResourceJavaScript Icon
    Description

    By default, the last signed-in session is used during client initialization. This option allows you to override that behavior, e.g. by selecting a specific session.

  • Name
    signInFallbackRedirectUrl?
    Type
    null | string
    Description

    The fallback URL to redirect to after the user signs in, if there's no redirect_url in the path already. It's recommended to use the environment variable instead. Defaults to '/'.

  • Name
    signInForceRedirectUrl?
    Type
    null | string
    Description

    This URL will always be redirected to after the user signs in. It's recommended to use the environment variable instead.

  • Name
    signInUrl?
    Type
    string
    Description

    This URL will be used for any redirects that might happen and needs to point to your primary application on the client-side. This option is optional for production instances. It is required to be set for a satellite application in a development instance. It's recommended to use the environment variable instead.

  • Name
    signUpFallbackRedirectUrl?
    Type
    null | string
    Description

    The fallback URL to redirect to after the user signs up, if there's no redirect_url in the path already. It's recommended to use the environment variable instead. Defaults to '/'.

  • Name
    signUpForceRedirectUrl?
    Type
    null | string
    Description

    This URL will always be redirected to after the user signs up. It's recommended to use the environment variable instead.

  • Name
    signUpUrl?
    Type
    string
    Description

    This URL will be used for any redirects that might happen and needs to point to your primary application on the client-side. This option is optional for production instances but must be set for a satellite application in a development instance. It's recommended to use the environment variable instead.

  • Name
    standardBrowser?
    Type
    boolean
    Description

    By default, ClerkJS is loaded with the assumption that cookies can be set (browser setup). On native platforms this value must be set to false.

  • Name
    supportEmail?
    Type
    string
    Description

    Optional support email for display in authentication screens. Will only affect Clerk Components and not Account Portal pages.

  • Name
    taskUrls?
    Type
    Partial<Record<"choose-organization" | "reset-password" | "setup-mfa", string>>
    Description

    Customize the URL paths users are redirected to after sign-in or sign-up when specific session tasks need to be completed. When undefined, it uses Clerk's default task flow URLs. Defaults to undefined.

  • Name
    telemetry?
    Type
    false | { debug?: boolean; disabled?: boolean; perEventSampling?: boolean; }
    Description

    Controls whether or not Clerk will collect telemetry data. If set to debug, telemetry events are only logged to the console and not sent to Clerk.

  • Name
    touchSession?
    Type
    boolean
    Description

    By default, the Clerk Frontend API touch endpoint is called during page focus to keep the last active session alive. This option allows you to disable this behavior.

  • Name
    ui?
    Type
    { ClerkUI?: ClerkUIConstructor | Promise<ClerkUIConstructor>; } & TUi
    Description

    Clerk UI module. Pass the ui export from @clerk/ui to bundle the UI with your application instead of loading it from the CDN.

  • Name
    unsafe_disableDevelopmentModeConsoleWarning?
    Type
    boolean
    Description

    Disables the console warning that is logged when Clerk is initialized with development keys. [WARNING] The development mode warning is intended to ensure that you don't go to production with a non-production Clerk instance. If you're disabling it, please make sure you don't ship with a non-production Clerk instance! More information: /docs/guides/development/deployment/production

  • Name
    waitlistUrl?
    Type
    string
    Description

    The full URL or path to the waitlist page. If undefined, will redirect to the Account Portal waitlist page.

Feedback

What did you think of this content?

Last updated on

GitHubEdit on GitHub