feat(vue,nuxt): Add Vue and Nuxt SDK docs

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.
   - {<svg viewBox="0 0 32 32"><path fill="#F44250" d="M25.6 15.568a3.196 3.196 0 0 1-3.2 3.19 3.193 3.193 0 0 0-3.2 3.189 3.196 3.196 0 0 1-3.2 3.19 3.193 3.193 0 0 1-2.263-.935 3.172 3.172 0 0 1-.937-2.255 3.193 3.193 0 0 1 3.2-3.19 3.196 3.196 0 0 0 3.2-3.189 3.194 3.194 0 0 0-3.2-3.19 3.193 3.193 0 0 1-3.2-3.189A3.193 3.193 0 0 1 16 6c1.767.001 3.2 1.429 3.2 3.19a3.193 3.193 0 0 0 3.2 3.19c1.768 0 3.2 1.427 3.2 3.19Z"/><path style={{ fill: 'var(--light, #121212) var(--dark, #fff)' }} d="M12.8 15.568a3.195 3.195 0 0 0-3.2-3.19 3.195 3.195 0 0 0-3.2 3.19 3.195 3.195 0 0 0 3.2 3.19c1.767 0 3.2-1.428 3.2-3.19ZM6.4 21.947a3.195 3.195 0 0 0-3.2-3.19 3.195 3.195 0 0 0-3.2 3.19 3.195 3.195 0 0 0 3.2 3.19c1.767 0 3.2-1.429 3.2-3.19ZM32 21.947a3.195 3.195 0 0 0-3.2-3.19 3.195 3.195 0 0 0-3.2 3.19 3.195 3.195 0 0 0 3.2 3.19c1.767 0 3.2-1.429 3.2-3.19Z"/></svg>}
+
+  ---
+
+  - [Vue](/docs/quickstarts/vue)
+  - Get started installing and initializing Clerk in a new Vue + Vite 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

@@ -81,7 +81,8 @@
                   {
                     "title": "Chrome Extension",
                     "href": "/docs/quickstarts/chrome-extension"
-                  }
+                  },
+                  { "title": "Vue", "href": "/docs/quickstarts/vue", "icon": "vue" }
                 ]
               ]
             },
@@ -2666,6 +2667,74 @@
                 ]
               ]
             },
+            {
+              "title": "Vue",
+              "collapse": true,
+              "icon": "vue",
+              "items": [
+                [
+                  { "title": "Overview", "href": "/docs/references/vue/overview" },
+                  {
+                    "title": "Guides",
+                    "items": [
+                      [
+                        {
+                          "title": "Migrating from community SDK",
+                          "href": "/docs/references/vue/migrating-from-vue-community-sdk"
+                        }
+                      ]
+                    ]
+                  },
+                  {
+                    "title": "Client-side Helpers",
+                    "items": [
+                      [
+                        {
+                          "title": "`useUser()`",
+                          "wrap": false,
+                          "href": "/docs/references/vue/use-user"
+                        },
+                        {
+                          "title": "`useClerk()`",
+                          "wrap": false,
+                          "href": "/docs/references/vue/use-clerk"
+                        },
+                        {
+                          "title": "`useAuth()`",
+                          "wrap": false,
+                          "href": "/docs/references/vue/use-auth"
+                        },
+                        {
+                          "title": "`useSignIn()`",
+                          "wrap": false,
+                          "href": "/docs/references/vue/use-sign-in"
+                        },
+                        {
+                          "title": "`useSignUp`",
+                          "wrap": false,
+                          "href": "/docs/references/vue/use-sign-up"
+                        },
+                        {
+                          "title": "`useSession()`",
+                          "wrap": false,
+                          "href": "/docs/references/vue/use-session"
+                        },
+                        {
+                          "title": "`useSessionList()`",
+                          "wrap": false,
+                          "href": "/docs/references/vue/use-session-list"
+                        },
+                        {
+                          "title": "`useOrganization()`",
+                          "wrap": false,
+                          "href": "/docs/references/vue/use-organization"
+                        }
+                      ]
+                    ]
+                  }
+                ]
+              ]
+            },
             {
               "title": "Ruby / Rails",
               "collapse": true,

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,182 @@
+---
+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
+</TutorialHero>
+
+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/).
+
+<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](/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:
+
+  <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. This key can always be retrieved from the [**API Keys**](https://dashboard.clerk.com/last-active?path=api-keys) page in the 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 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:
+
+  - [`<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, [6, 13]] }}
+  <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>

docs/references/vue/migrating-from-vue-community-sdk.mdx

@@ -0,0 +1,55 @@
+---
+title: Migrating from the Vue community SDK
+description: Learn how to migrate from the Vue community SDK to the Clerk Vue SDK.
+---
+
+In December 2024, Clerk introduced official support for Vue. This migration guide covers converting from the [`vue-clerk`](https://vue-clerk.vercel.app) community SDK to Clerk's official SDK. It covers the breaking changes that were introduced and provides examples on how to resolve them.
+
+## Installation
+
+Uninstall the community SDK and install Clerk's new official SDK for Vue.
+
+<CodeBlockTabs options={["npm", "yarn", "pnpm"]}>
+  ```bash {{ filename: 'terminal' }}
+  npm uninstall vue-clerk
+  npm install @clerk/vue
+  ```
+
+  ```bash {{ filename: 'terminal' }}
+  yarn remove vue-clerk
+  yarn add @clerk/vue
+  ```
+
+  ```bash {{ filename: 'terminal' }}
+  pnpm remove vue-clerk
+  pnpm add @clerk/vue
+  ```
+</CodeBlockTabs>
+
+## Breaking changes
+
+### The `useClerk()` composable
+
+The `useClerk()` composable has two important changes:
+
+1. Import path has changed from `vue-clerk` to `@clerk/vue`.
+1. The return value is now a Vue [ref](https://vuejs.org/api/reactivity-core.html#ref) containing the Clerk instance.
+
+The key difference is that you now need to use `clerk.value` to access Clerk methods, since the composable returns a reactive ref.
+
+Update your code as follows:
+
+```vue {{ del: [2, 6], ins: [3, 7] }}
+<script setup>
+import { useClerk } from 'vue-clerk'
+import { useClerk } from '@clerk/vue'
+const clerk = useClerk()
+function signIn() {
+  clerk.openSignIn()
+  clerk.value.openSignIn()
+}
+</script>
+<template>
+  <button @click="signIn">Sign in</button>
+</template>
+```

docs/references/vue/overview.mdx

@@ -0,0 +1,25 @@
+---
+title: Clerk Vue SDK
+description: Learn how to integrate Clerk into your Vue application using the Clerk Vue SDK.
+---
+
+The Vue SDK is built on top of the [Clerk JavaScript SDK](/docs/references/javascript/overview), and is the recommended way to integrate Clerk into your Vue application.
+
+## Custom composables
+
+The Vue SDK provides access to custom composables that provide direct access to the [`Clerk` object](/docs/references/javascript/clerk/clerk), a user's [`User` object](/docs/references/javascript/user/user), and helper methods for authentication flows.
+
+## Framework-specific SDKs
+
+> [!IMPORTANT]
+> If you're building a standard Vue application (client-side only), use `@clerk/vue`. If you're using Nuxt, use the dedicated `@clerk/nuxt` package which includes backend integration.
+
+Clerk offers framework-specific SDKs that are customized to provide the better developer experience and integration with each framework's features. Choose the appropriate SDK based on your framework:
+
+| Framework | Package | Docs |
+| - | - | - |
+| Nuxt | `@clerk/nuxt` | [Nuxt SDK](/docs/references/nuxt/overview) |
+
+## Set up Clerk Vue
+
+Before you can add Clerk to your Vue application, you must create a Clerk app in the Clerk Dashboard. To get started, follow the [setup guide](/docs/quickstarts/setup-clerk). Then, follow the [quickstart guide](/docs/quickstarts/vue) to set up the Vue SDK in your app.