Vue Quickstart

Before you start

Set up a Clerk application

Example repository

Vue Quickstart Repo

This tutorial assumes that you're using Vue 3 with TypeScript.

Create a new Vue app

If you don't already have a Vue app, run the following commands to create a new one using Vite:

npm

pnpm

yarn

bun

terminal

npm create vite@latest clerk-vue -- --template vue-ts
cd clerk-vue
npm install

terminal

pnpm create vite clerk-vue --template vue-ts
cd clerk-vue
pnpm install

terminal

yarn create vite clerk-vue --template vue-ts
cd clerk-vue
yarn install

terminal

bunx create-vite clerk-vue --template vue-ts
cd clerk-vue
bun install

Install `@clerk/vue`

The Clerk Vue SDK gives you access to prebuilt components, composables, and helpers to make user authentication easier.

Run the following command to install the SDK:

npm

pnpm

yarn

bun

terminal

npm install @clerk/vue

terminal

pnpm add @clerk/vue

terminal

yarn add @clerk/vue

terminal

bun add @clerk/vue

Set your Clerk API keys

.env

VITE_CLERK_PUBLISHABLE_KEY=YOUR_PUBLISHABLE_KEY

clerkPlugin provides session and user context to Clerk's components and composables. It's required to pass your Clerk Publishable Key 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' }.

src/main.ts

import { createApp } from 'vue'
import './style.css'
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 file')
}

const app = createApp(App)
app.use(clerkPlugin, { publishableKey: PUBLISHABLE_KEY })
app.mount('#app')

Create a header with Clerk components

You can control which content signed-in and signed-out users can see with Clerk's prebuilt control components. The following example creates a header using the following components:

<SignedIn>: Children of this component can only be seen while signed in.
<SignedOut>: Children of this component can only be seen while signed out.
<UserButton />: Shows the signed-in user's avatar. Selecting it opens a dropdown menu with account management options.
<SignInButton />: An unstyled component that links to the sign-in page. In this example, since no props or environment variables are set for the sign-in URL, this component links to the Account Portal sign-in page.
<SignUpButton />: An unstyled component that links to the sign-up page. In this example, since no props or environment variables are set for the sign-up URL, this component links to the Account Portal sign-up page.

src/App.vue

<script setup lang="ts">
import { SignedIn, SignedOut, SignInButton, SignUpButton, UserButton } from '@clerk/vue'
</script>

<template>
  <header>
    <!-- Show the sign-in and sign-up buttons when the user is signed out -->
    <SignedOut>
      <SignInButton />
      <SignUpButton />
    </SignedOut>
    <!-- Show the user button when the user is signed in -->
    <SignedIn>
      <UserButton />
    </SignedIn>
  </header>
</template>

Run your project

Run your project with the following command:

npm

pnpm

yarn

bun

terminal

npm run dev

terminal

pnpm run dev

terminal

yarn dev

terminal

bun run dev

Create your first user

Visit your app's homepage at http://localhost:5173.
Select "Sign up" on the page and authenticate to create your first user.

Edit on GitHub

Vue Quickstart

Before you start

Example repository

Create a new Vue app

Install `@clerk/vue`

Set your Clerk API keys

Add `clerkPlugin` to your app

Create a header with Clerk components

Run your project

Create your first user

Next steps

Prebuilt components

Customization & localization

Client-side helpers (composables)

Update Clerk options at runtime

Vue Quickstart

Before you start

Example repository

Feedback