feat(vue): Introduce Vue SDK Quickstart

docs/index.mdx

@@ -78,6 +78,12 @@ Find all the guides and resources you need to develop with Clerk.
   - [TanStack Start (Beta)](/docs/quickstarts/tanstack-start)
   - Easily add secure and SSR-friendly authentication to your TanStack Start application with Clerk.
   - ![](data:image/webp;base64,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)
+
+  ---
+
+  - [Vue](/docs/quickstarts/vue)
+  - Get started installing and initializing Clerk in a new Vite Vue App.
+  - {<svg viewBox="0 0 196.32 170.02"><path fill="#42b883" d="M120.83 0L98.16 39.26 75.49 0H0l98.16 170.02L196.32 0h-75.49z"/><path fill="#35495e" d="M120.83 0L98.16 39.26 75.49 0H39.26l58.9 102.01L157.06 0h-36.23z"/></svg>}
 </Cards>
 
 ## Explore by backend framework

docs/manifest.json

@@ -75,7 +75,8 @@
                   {
                     "title": "Chrome Extension",
                     "href": "/docs/quickstarts/chrome-extension"
-                  }
+                  },
+                  { "title": "Vue", "href": "/docs/quickstarts/vue", "icon": "vue" }
                 ]
               ]
             },

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.
   - {<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M0 256C0 209.4 12.5 165.6 34.3 127.1L144.1 318.3C166 357.5 207.9 384 256 384C270.3 384 283.1 381.7 296.8 377.4L220.5 509.6C95.9 492.3 0 385.3 0 256zM365.1 321.6C377.4 302.4 384 279.1 384 256C384 217.8 367.2 183.5 340.7 160H493.4C505.4 189.6 512 222.1 512 256C512 397.4 397.4 511.1 256 512L365.1 321.6zM477.8 128H256C193.1 128 142.3 172.1 130.5 230.7L54.2 98.5C101 38.5 174 0 256 0C350.8 0 433.5 51.5 477.8 128V128zM168 256C168 207.4 207.4 168 256 168C304.6 168 344 207.4 344 256C344 304.6 304.6 344 256 344C207.4 344 168 304.6 168 256z" style={{ fill: 'var(--light, black) var(--dark, white)' }} /></svg>}
+
+  ---
+
+  - [Vue](/docs/quickstarts/vue)
+  - Easily add secure, beautiful, and fast authentication to your Vue application with Clerk.
+  - {<svg viewBox="0 0 196.32 170.02"><path fill="#42b883" d="M120.83 0L98.16 39.26 75.49 0H0l98.16 170.02L196.32 0h-75.49z"/><path fill="#35495e" d="M120.83 0L98.16 39.26 75.49 0H39.26l58.9 102.01L157.06 0h-36.23z"/></svg>}
 </Cards>
 
 ## Backend

docs/quickstarts/vue.mdx

@@ -0,0 +1,199 @@
+---
+title: Vue Quickstart
+description: Add authentication and user management to your Vue app with Clerk.
+---
+
+<TutorialHero
+  framework="vue"
+  exampleRepo={[
+    {
+      title: "Vue Quickstart Repo",
+      link: "https://github.com/clerk/clerk-vue-quickstart"
+
+    }
+  ]}
+  beforeYouStart={[
+    {
+      title: "Set up a Clerk application",
+      link: "/docs/quickstarts/setup-clerk",
+      icon: "clerk",
+    }
+  ]}
+>
+  - Create a new Vue app using Vite
+  - Install `@clerk/vue`
+  - Set your Clerk API keys
+  - Add `clerkPlugin`
+  - Create a header with Clerk components for users to sign in and out
+</TutorialHero>
+
+<Steps>
+  ### 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):
+
+  <CodeBlockTabs options={["npm", "yarn", "pnpm"]}>
+    ```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
+    ```
+  </CodeBlockTabs>
+
+  ### 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:
+
+  <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
+    ```
+  </CodeBlockTabs>
+
+  ### Set your Clerk API keys
+
+  <SignedIn>
+    Add your Clerk publishable key to your `.env.local` file. It can always be retrieved from the [**API Keys**](https://dashboard.clerk.com/last-active?path=api-keys) page of your Clerk Dashboard.
+  </SignedIn>
+
+  <SignedOut>
+    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:
+  </SignedOut>
+
+  ```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 it is imported and that it exists. This will prevent running the app without the publishable key, and will also prevent 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
+
+  The `clerkPlugin` Vue plugin provides active session and user context to Clerk's composables and components. You must pass your publishable key as an option when adding the plugin.
+
+  ```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 the [prebuilt control components](/docs/components/overview#what-are-control-components). Create a header using the following components:
+
+  - [`<SignedIn>`](/docs/components/control/signed-in): Children of this component can only be seen while **signed in**.
+  - [`<SignedOut>`](/docs/components/control/signed-out): Children of this component can only be seen while **signed out**.
+  - [`<UserButton />`](/docs/components/user/user-button): Shows the signed-in user's avatar. Selecting it opens a dropdown menu with account management options.
+  - [`<SignInButton />`](/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, [7, 12]] }}
+  <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:
+
+  <CodeBlockTabs options={["npm", "yarn", "pnpm"]}>
+    ```bash {{ filename: 'terminal' }}
+    npm run dev
+    ```
+
+    ```bash {{ filename: 'terminal' }}
+    yarn dev
+    ```
+
+    ```bash {{ filename: 'terminal' }}
+    pnpm dev
+    ```
+  </CodeBlockTabs>
+
+  Visit your app's homepage at [`http://localhost:5173`](http://localhost:5173). Sign up to create your first user.
+</Steps>
+
+## More resources
+
+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/components/overview)
+  - Learn more about Clerk's suite of components that let you quickly add authentication to your app.
+
+  ---
+
+  - [Customization & localization](/docs/customization/overview)
+  - Learn how to customize and localize Clerk components.
+
+  ---
+
+  - [Client-side helpers (composables)](/docs/references/react/use-user)
+  - Learn more about Clerk's client-side helpers and how to use them.
+</Cards>