diff --git a/docs/index.mdx b/docs/index.mdx
index 554829ae3a..8684adb8c7 100644
--- a/docs/index.mdx
+++ b/docs/index.mdx
@@ -84,6 +84,12 @@ Find all the guides and resources you need to develop with Clerk.
- [React Router (Beta)](/docs/quickstarts/react-router)
- Easily add secure, edge- and SSR-friendly authentication to React Router with Clerk.
- {}
+
+ ---
+
+ - [Vue](/docs/quickstarts/vue)
+ - Get started installing and initializing Clerk in a new Vue + Vite app.
+ - {}
## Explore by backend framework
diff --git a/docs/manifest.json b/docs/manifest.json
index e702e9ae58..6d2cb7453f 100644
--- a/docs/manifest.json
+++ b/docs/manifest.json
@@ -81,7 +81,8 @@
{
"title": "Chrome Extension",
"href": "/docs/quickstarts/chrome-extension"
- }
+ },
+ { "title": "Vue", "href": "/docs/quickstarts/vue", "icon": "vue" }
]
]
},
diff --git a/docs/quickstarts/overview.mdx b/docs/quickstarts/overview.mdx
index 498b62fe6f..a1c1dce056 100644
--- a/docs/quickstarts/overview.mdx
+++ b/docs/quickstarts/overview.mdx
@@ -65,6 +65,12 @@ description: See the getting started guides and tutorials.
- [Chrome Extension](/docs/quickstarts/chrome-extension)
- Use the Chome Extension SDK to authenticate users in your Chrome extension.
- {}
+
+ ---
+
+ - [Vue](/docs/quickstarts/vue)
+ - Easily add secure, beautiful, and fast authentication to your Vue application with Clerk.
+ - {}
## Backend
diff --git a/docs/quickstarts/vue.mdx b/docs/quickstarts/vue.mdx
new file mode 100644
index 0000000000..62619796c0
--- /dev/null
+++ b/docs/quickstarts/vue.mdx
@@ -0,0 +1,182 @@
+---
+title: Vue Quickstart
+description: Add authentication and user management to your Vue app with Clerk.
+---
+
+
+ - Create a new Vue app using Vite
+ - Install `@clerk/vue`
+ - Set your Clerk API keys
+ - Add `clerkPlugin`
+ - Create a header with Clerk components
+
+
+Clerk's [Vue SDK](/docs/references/vue/overview) 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](https://vuejs.org/) with [TypeScript](https://www.typescriptlang.org/).
+
+
+ ### Create a Vue app using Vite
+
+ Run the following commands to create a new Vue app using [Vite](https://vitejs.dev/guide/#scaffolding-your-first-vite-project):
+
+
+ ```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
+ ```
+
+
+ ### Install `@clerk/vue`
+
+ Clerk's [Vue SDK](/docs/references/vue/overview) gives you access to prebuilt components, composables, and helpers to make user authentication easier.
+
+ Run the following command to install the SDK:
+
+
+ ```bash {{ filename: 'terminal' }}
+ npm install @clerk/vue
+ ```
+
+ ```bash {{ filename: 'terminal' }}
+ yarn add @clerk/vue
+ ```
+
+ ```bash {{ filename: 'terminal' }}
+ pnpm add @clerk/vue
+ ```
+
+
+ ### Set your Clerk API keys
+
+
+ Add your Clerk Publishable Key to your `.env.local` file. This key can always be retrieved from the [**API Keys**](https://dashboard.clerk.com/last-active?path=api-keys) page in the Clerk Dashboard.
+
+
+
+ 1. In the Clerk Dashboard, navigate to the [**API Keys**](https://dashboard.clerk.com/last-active?path=api-keys) page.
+ 1. In the **Quick Copy** section, copy your Clerk Publishable Key.
+ 1. Paste your key into your `.env.local` file.
+
+ The final result should resemble the following:
+
+
+ ```env {{ filename: '.env.local' }}
+ VITE_CLERK_PUBLISHABLE_KEY={{pub_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.
+
+ ```tsx {{ filename: 'src/main.ts', mark: [5, [7, 9]] }}
+ 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.
+
+ ```ts {{ filename: 'src/main.ts', mark: [4, [12, 14]] }}
+ 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](/docs/components/overview#what-are-control-components). The following example creates a header using the following components:
+
+ - [``](/docs/components/control/signed-in): Children of this component can only be seen while **signed in**.
+ - [``](/docs/components/control/signed-out): Children of this component can only be seen while **signed out**.
+ - [``](/docs/components/user/user-button): Shows the signed-in user's avatar. Selecting it opens a dropdown menu with account management options.
+ - [``](/docs/components/unstyled/sign-in-button): An unstyled component that links to the sign-in page or displays the sign-in modal.
+
+ ```vue {{ filename: 'src/App.vue', mark: [2, [6, 13]] }}
+
+
+
+
+
+
+
+
+
+
+
+
+ ```
+
+ ### Create your first user
+
+ Run your project with the following command:
+
+
+ ```bash {{ filename: 'terminal' }}
+ npm run dev
+ ```
+
+ ```bash {{ filename: 'terminal' }}
+ yarn dev
+ ```
+
+ ```bash {{ filename: 'terminal' }}
+ pnpm dev
+ ```
+
+
+ Visit your app's homepage at [`http://localhost:5173`](http://localhost:5173). Sign up to create your first user.
+