āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā ā š shadcn/directory/clerk/clerk-docs/getting-started/quickstart.vue ā āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
<TutorialHero exampleRepo={[ { title: "Vue Quickstart Repo", link: "https://github.com/clerk/clerk-vue-quickstart"
}
]} beforeYouStart={[ { title: "Set up a Clerk application", link: "/docs/getting-started/quickstart/setup-clerk", icon: "clerk", } ]} />
This tutorial assumes that you're using Vue 3 with TypeScript.
<Steps> ### Create a Vue app using ViteRun the following commands to create a new Vue app using Vite:
<CodeBlockTabs options={["npm", "yarn", "pnpm", "bun"]}>
bash {{ filename: 'terminal' }} npm create vite@latest clerk-vue -- --template vue-ts cd clerk-vue npm install npm run dev
```bash {{ filename: 'terminal' }}
yarn create vite clerk-vue --template vue-ts
cd clerk-vue
yarn install
yarn dev
```
```bash {{ filename: 'terminal' }}
pnpm create vite clerk-vue --template vue-ts
cd clerk-vue
pnpm install
pnpm dev
```
```bash {{ filename: 'terminal' }}
bun create vite clerk-vue --template vue-ts
cd clerk-vue
bun install
bun dev
```
@clerk/vueThe 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:
<CodeBlockTabs options={["npm", "yarn", "pnpm" ]}>
bash {{ filename: 'terminal' }} npm install @clerk/vue
```bash {{ filename: 'terminal' }}
yarn add @clerk/vue
```
```bash {{ filename: 'terminal' }}
pnpm add @clerk/vue
```
The final result should resemble the following:
VITE_CLERK_PUBLISHABLE_KEY={{pub_key}}
clerkPlugin to your appclerkPlugin 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' }. See the reference documentation for more information.
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')
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>
Run your project with the following command:
<CodeBlockTabs options={["npm", "yarn", "pnpm", "bun"]}>
bash {{ filename: 'terminal' }} npm run dev
```bash {{ filename: 'terminal' }}
yarn dev
```
```bash {{ filename: 'terminal' }}
pnpm dev
```
```bash {{ filename: 'terminal' }}
bun dev
```
Visit your app's homepage at http://localhost:5173. Sign up to create your first user.
</Steps>
Learn more about Clerk components, how to customize them, and how to use Clerk's client-side helpers using the following guides.
<Cards> - [Prebuilt components](/docs/reference/components/overview) - Learn more about Clerk's suite of components that let you quickly add authentication to your app.ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā