Vue Quickstart
Before you start
Example repository
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 create vite@latest clerk-vue -- --template vue-ts
cd clerk-vue
npm installpnpm create vite clerk-vue --template vue-ts
cd clerk-vue
pnpm installyarn create vite clerk-vue --template vue-ts
cd clerk-vue
yarn installbunx create-vite clerk-vue --template vue-ts
cd clerk-vue
bun installInstall @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 install @clerk/vuepnpm add @clerk/vueyarn add @clerk/vuebun add @clerk/vueAdd your Clerk to your .env file.
- In the Clerk Dashboard, navigate to the API keys page.
- In the Quick Copy section, copy your Clerk .
- Paste your key into your
.envfile.
The final result should resemble the following:
VITE_CLERK_PUBLISHABLE_KEY=YOUR_PUBLISHABLE_KEYAdd clerkPlugin to your app
clerkPlugin provides session and user context to Clerk's components and composables. 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' }.
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:
- <Show when="signed-in">: Children of this component can only be seen while signed in.
- <Show when="signed-out">: 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.
<script setup lang="ts">
import { Show, SignInButton, SignUpButton, UserButton } from '@clerk/vue'
</script>
<template>
<header>
<Show when="signed-out">
<SignInButton />
<SignUpButton />
</Show>
<Show when="signed-in">
<UserButton />
</Show>
</header>
</template>Run your project
Run your project with the following command:
npm run devpnpm run devyarn devbun run devCreate 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.
Next steps
Explore the most relevant next steps for your SDK using the following guides.
Prebuilt components
Learn how to add Clerk's prebuilt authentication and user-management UI to your app.
Build custom flows
Learn how to build custom user interfaces entirely from scratch using the Clerk API.
Client-side helpers (composables)
Learn more about Clerk's client-side helpers and how to use them.
Update Clerk options at runtime
Learn how to update Clerk's options at runtime in your Vue app.
More to explore
Explore additional Clerk features that help you build, manage, and grow your application.
- Organizations - Organizations are shared accounts that let teams collaborate, manage members and roles, and control access to shared resources.
- Billing - Billing enables you to manage subscriptions, free trials, payments, plans, and billing-related webhook events for B2C and B2B applications.
- Waitlist - Waitlist lets you collect signups and control access to new products or features before launch through a simple, integrated workflow.
Feedback
Last updated on