Docs

Vue Quickstart

You will learn the following:

  • Create a new Vue app using Vite
  • Install @clerk/vue
  • Set your Clerk API keys
  • Add clerkPlugin
  • Create a header with Clerk components

Before you start

Example repository

Clerk's Vue SDK provides prebuilt components and composables to make it easy to integrate authentication and user management in your Vue app. This guide assumes that you're using Vue 3 with TypeScript.

Create a Vue app using Vite

Run the following commands to create a new Vue app using Vite:

terminal
npm create vite@latest clerk-vue -- --template vue-ts
cd clerk-vue
npm install
npm run dev
terminal
yarn create vite clerk-vue --template vue-ts
cd clerk-vue
yarn install
yarn dev
terminal
pnpm create vite clerk-vue --template vue-ts
cd clerk-vue
pnpm install
pnpm dev

Install @clerk/vue

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

Run the following command to install the SDK:

terminal
npm install @clerk/vue
terminal
yarn add @clerk/vue
terminal
pnpm add @clerk/vue

Set your Clerk API keys

.env.local
VITE_CLERK_PUBLISHABLE_KEY=YOUR_PUBLISHABLE_KEY

Import the Clerk Publishable Key

In your main.ts file, import your Clerk Publishable Key. 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.

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

createApp(App).mount('#app')

Add clerkPlugin to your app

clerkPlugin provides active session and user context to Clerk's components and composables. It's required to pass your Publishable Key as an option.

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.local 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 or displays the sign-in modal.
src/App.vue
<script>
import { SignedIn, SignedOut, SignInButton, UserButton } from '@clerk/vue'
</script>

<template>
  <header>
    <SignedOut>
      <SignInButton />
    </SignedOut>
    <SignedIn>
      <UserButton />
    </SignedIn>
  </header>
</template>

Create your first user

Run your project with the following command:

terminal
npm run dev
terminal
yarn dev
terminal
pnpm dev

Visit your app's homepage at http://localhost:5173. Sign up to create your first user.

Feedback

What did you think of this content?
Edit this page on GitHub

Last updated on