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
This tutorial 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:
npm create vite@latest clerk-vue -- --template vue-ts
cd clerk-vue
npm install
npm run devyarn create vite clerk-vue --template vue-ts
cd clerk-vue
yarn install
yarn devpnpm create vite clerk-vue --template vue-ts
cd clerk-vue
pnpm install
pnpm devbun create vite clerk-vue --template vue-ts
cd clerk-vue
bun install
bun devInstall @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/vueyarn add @clerk/vuepnpm add @clerk/vueAdd your Clerk Publishable Key to your .env.local file. This key can always be retrieved from the API Keys page in the Clerk Dashboard.
- In the Clerk Dashboard, navigate to the API Keys page.
- In the Quick Copy section, copy your Clerk Publishable Key.
- Paste your key into your
.env.localfile.
The final result should resemble the following:
VITE_CLERK_PUBLISHABLE_KEY=YOUR_PUBLISHABLE_KEYImport 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.
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.
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.
<script setup lang="ts">
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:
npm run devyarn devpnpm devbun devVisit your app's homepage at http://localhost:5173. Sign up to create your first user.
More resources
Learn more about Clerk components, how to customize them, and how to use Clerk's client-side helpers using the following guides.
Prebuilt components
Learn more about Clerk's suite of components that let you quickly add authentication to your app.
Customization & localization
Learn how to customize and localize Clerk components.
Client-side helpers (composables)
Learn more about Clerk's client-side helpers and how to use them.
Feedback
Last updated on