feat(nuxt): Add Nuxt SDK docs

docs/index.mdx

@@ -87,6 +87,12 @@ Find all the guides and resources you need to develop with Clerk.
 
   ---
 
+  - [Nuxt](/docs/quickstarts/nuxt)
+  - Easily add secure, beautiful, and fast authentication to Nuxt with Clerk.
+  - {<svg viewBox="0 0 300 300"><path fill="#00DC82" d="M168 250h111c3.542 0 6.932-1.244 10-3 3.068-1.756 6.23-3.959 8-7 1.77-3.041 3.002-6.49 3-10.001-.002-3.511-1.227-6.959-3-9.998L222 91c-1.77-3.04-3.933-5.245-7-7s-7.458-3-11-3-6.933 1.245-10 3-5.23 3.96-7 7l-19 33-38-64.002c-1.772-3.04-3.932-6.243-7-7.998s-6.458-2-10-2-6.932.245-10 2c-3.068 1.755-6.228 4.958-8 7.998L2 220c-1.773 3.039-1.998 6.487-2 9.998-.002 3.511.23 6.96 2 10.001 1.77 3.04 4.932 5.244 8 7 3.068 1.756 6.458 3 10 3h70c27.737 0 47.925-12.442 62-36l34-59 18-31 55 94h-73l-18 32Zm-79-32H40l73-126 37 63-24.509 42.725C116.144 213.01 105.488 218 89 218Z"/></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>}

docs/manifest.json

@@ -51,6 +51,11 @@
                     "tag": "(Beta)",
                     "href": "/docs/quickstarts/tanstack-start",
                     "icon": "tanstack"
+                  },
+                  {
+                    "title": "Nuxt",
+                    "href": "/docs/quickstarts/nuxt",
+                    "icon": "nuxt"
                   }
                 ]
               ]
@@ -2691,6 +2696,45 @@
                 ]
               ]
             },
+            {
+              "title": "Nuxt",
+              "collapse": true,
+              "icon": "nuxt",
+              "items": [
+                [
+                  { "title": "Overview", "href": "/docs/references/nuxt/overview" },
+                  {
+                    "title": "Guides",
+                    "items": [
+                      [
+                        {
+                          "title": "Read session and user data",
+                          "wrap": false,
+                          "href": "/docs/references/nuxt/read-session-data"
+                        },
+                        {
+                          "title": "Protecting pages",
+                          "wrap": false,
+                          "href": "/docs/references/nuxt/protecting-pages"
+                        }
+                      ]
+                    ]
+                  },
+                  {
+                    "title": "General Reference",
+                    "items": [
+                      [
+                        {
+                          "title": "`clerkMiddleware()`",
+                          "wrap": false,
+                          "href": "/docs/references/nuxt/clerk-middleware"
+                        }
+                      ]
+                    ]
+                  }
+                ]
+              ]
+            },
             {
               "title": "Vue",
               "collapse": true,
@@ -2755,6 +2799,18 @@
                         }
                       ]
                     ]
+                  },
+                  {
+                    "title": "General Reference",
+                    "items": [
+                      [
+                        {
+                          "title": "`clerkMiddleware()`",
+                          "wrap": false,
+                          "href": "/docs/references/nuxt/clerk-middleware"
+                        }
+                      ]
+                    ]
                   }
                 ]
               ]

docs/manifest.schema.json

@@ -139,7 +139,8 @@
         "user-dotted-circle",
         "vue",
         "x",
-        "expo"
+        "expo",
+        "nuxt"
       ]
     }
   }

docs/quickstarts/nuxt.mdx

@@ -0,0 +1,185 @@
+---
+title: Nuxt Quickstart
+description: Add authentication and user management to your Nuxt app with Clerk.
+---
+
+<TutorialHero
+  framework="vue"
+  exampleRepo={[
+    {
+      title: "Nuxt Quickstart Repo",
+      link: "https://github.com/clerk/clerk-nuxt-quickstart",
+      icon: "clerk"
+    }
+  ]}
+  beforeYouStart={[
+    {
+      title: "Set up a Clerk application",
+      link: "/docs/quickstarts/setup-clerk",
+      icon: "clerk",
+    },
+    {
+      title: "Create a Nuxt application",
+      link: "https://nuxt.com/docs/getting-started/installation",
+      icon: "nuxt"
+    }
+  ]}
+>
+  - Install `@clerk/nuxt`
+  - Set your Clerk API keys
+  - Configure `nuxt.config.ts`
+  - Create a header with Clerk components
+  - Protect your API routes
+</TutorialHero>
+
+<Steps>
+  ## Install `@clerk/nuxt`
+
+  Clerk's [Nuxt SDK](/docs/references/nuxt/overview) gives you access to prebuilt components, Vue 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/nuxt
+    ```
+
+    ```bash {{ filename: 'terminal' }}
+    yarn add @clerk/nuxt
+    ```
+
+    ```bash {{ filename: 'terminal' }}
+    pnpm add @clerk/nuxt
+    ```
+  </CodeBlockTabs>
+
+  ## Set your Clerk API keys
+
+  <SignedIn>
+    Add the following keys to your `.env` file. These keys can always be retrieved from the [**API keys**](https://dashboard.clerk.com/last-active?path=api-keys) page in 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 and secret key.
+    1. Paste your key into your `.env` file.
+
+    The final result should resemble the following:
+  </SignedOut>
+
+  ```env {{ filename: '.env' }}
+  NUXT_PUBLIC_CLERK_PUBLISHABLE_KEY={{pub_key}}
+  NUXT_CLERK_SECRET_KEY={{secret}}
+  ```
+
+  ## Configure `nuxt.config.ts`
+
+  To enable Clerk in your Nuxt app, add `@clerk/nuxt` to your modules array in `nuxt.config.ts`. This automatically configures Clerk's middleware and plugins, and imports Clerk's components.
+
+  ```ts {{ filename: 'nuxt.config.ts', mark: [2] }}
+  export default defineNuxtConfig({
+    modules: ['@clerk/nuxt'],
+  })
+  ```
+
+  ## Create a header with Clerk components
+
+  [Nuxt 3](https://nuxt.com/docs/migration/auto-imports) automatically imports and makes available all components in the `components/` directory globally, without requiring explicit imports. See the [Nuxt docs](https://nuxt.com/docs/guide/concepts/auto-imports) for details.
+
+  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: 'app.vue', mark: [2, [6, 13]] }}
+  <script setup lang="ts">
+  // Components are automatically imported
+  </script>
+
+  <template>
+    <header>
+      <SignedOut>
+        <SignInButton />
+      </SignedOut>
+      <SignedIn>
+        <UserButton />
+      </SignedIn>
+    </header>
+
+    <main>
+      <NuxtPage />
+    </main>
+  </template>
+  ```
+
+  ## Protect your API routes
+
+  API routes in Nuxt 3 are handled by [`eventHandler`](https://nuxt.com/docs/guide/directory-structure/server) functions in the `server/api` directory. Files in this directory automatically become API endpoints matching their path (e.g., `server/api/user.ts` becomes `/api/user`).
+
+  To protect your API routes, use the `event.context.auth` object in your event handlers. This object is automatically injected by Clerk and contains authentication information about the current request.
+
+  The following example protects an API route by checking if a user is authenticated. If the user isn't authenticated, the route returns a 401 Unauthorized error.
+
+  ```ts {{ filename: 'server/api/auth/index.ts' }}
+  export default defineEventHandler((event) => {
+    const { userId } = event.context.auth
+
+    if (!userId) {
+      throw createError({
+        statusCode: 401,
+        statusMessage: 'Unauthorized',
+      })
+    }
+
+    return { userId }
+  })
+  ```
+
+  ## 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:3000`](http://localhost:3000). 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>
+  - [Protect API routes using Clerk Middleware](/docs/references/nuxt/clerk-middleware)
+  - Learn how to protect specific API routes from unauthenticated users.
+
+  ---
+
+  - [Read session and user data](/docs/references/nuxt/read-session-data)
+  - Learn how to use Clerk's composables and helpers to access the active session and user data in your Nuxt app.
+
+  ---
+
+  - [Client-side helpers](/docs/references/nuxt/overview#client-side-helpers)
+  - Learn more about Nuxt client-side helpers and how to use them.
+
+  ---
+
+  - [Clerk + Nuxt Quickstart Repo](https://github.com/clerk/clerk-nuxt-quickstart)
+  - The official companion repo for Clerk's Nuxt Quickstart.
+</Cards>

docs/quickstarts/overview.mdx

@@ -33,6 +33,12 @@ description: See the getting started guides and tutorials.
   - [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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)
+
+  ---
+
+  - [Nuxt](/docs/quickstarts/nuxt)
+  - Easily add secure, beautiful, and fast authentication to Nuxt with Clerk.
+  - {<svg viewBox="0 0 300 300"><path fill="#00DC82" d="M168 250h111c3.542 0 6.932-1.244 10-3 3.068-1.756 6.23-3.959 8-7 1.77-3.041 3.002-6.49 3-10.001-.002-3.511-1.227-6.959-3-9.998L222 91c-1.77-3.04-3.933-5.245-7-7s-7.458-3-11-3-6.933 1.245-10 3-5.23 3.96-7 7l-19 33-38-64.002c-1.772-3.04-3.932-6.243-7-7.998s-6.458-2-10-2-6.932.245-10 2c-3.068 1.755-6.228 4.958-8 7.998L2 220c-1.773 3.039-1.998 6.487-2 9.998-.002 3.511.23 6.96 2 10.001 1.77 3.04 4.932 5.244 8 7 3.068 1.756 6.458 3 10 3h70c27.737 0 47.925-12.442 62-36l34-59 18-31 55 94h-73l-18 32Zm-79-32H40l73-126 37 63-24.509 42.725C116.144 213.01 105.488 218 89 218Z"/></svg>}
 </Cards>
 
 ## Frontend

docs/references/backend/overview.mdx

@@ -60,7 +60,7 @@ To access a resource, you must first instantiate a `clerkClient` instance.
 
     To use the default `clerkClient` instance, set your `CLERK_SECRET_KEY` [environment variable](/docs/deployments/clerk-environment-variables#clerk-publishable-and-secret-keys) and then import the `clerkClient` instance from the SDK as shown in the following example:
 
-    <Tabs items={["Next.js", "Remix", "Fastify", "Astro", "Express"]}>
+    <Tabs items={["Next.js", "Remix", "Fastify", "Astro", "Express", "Nuxt"]}>
       <Tab>
         ```jsx
         import { clerkClient } from '@clerk/nextjs/server'
@@ -88,13 +88,19 @@ To access a resource, you must first instantiate a `clerkClient` instance.
         import { clerkClient } from '@clerk/express'
         ```
       </Tab>
+
+      <Tab>
+        ```js
+        import { clerkClient } from '@clerk/nuxt/server'
+        ```
+      </Tab>
     </Tabs>
 
     ### Instantiate a custom `clerkClient` instance
 
     If you would like to customize the behavior of the JavaScript Backend SDK, you can instantiate a `clerkClient` instance yourself by calling `createClerkClient()` and passing in [`options`](#create-clerk-client-options).
 
-    <Tabs items={["Next.js", "Remix", "Fastify", "Astro", "Tanstack Start", "Express"]}>
+    <Tabs type="framework" items={["Next.js", "Remix", "Fastify", "Astro", "Tanstack Start", "Express", "Nuxt"]}>
       <Tab>
         ```jsx
         import { createClerkClient } from '@clerk/nextjs/server'
@@ -243,6 +249,20 @@ To access a resource, you must first instantiate a `clerkClient` instance.
           ```
         </CodeBlockTabs>
       </Tab>
+
+      <Tab>
+        ```tsx {{ filename: 'server/api/users/index.ts' }}
+        import { createClerkClient } from '@clerk/nuxt/server'
+
+        export default defineEventHandler(async () => {
+          const config = useRuntimeConfig()
+          const clerkClient = createClerkClient({ secretKey: config.clerk.secretKey })
+          const userList = await clerkClient.users.getUserList()
+
+          return { userList }
+        })
+        ```
+      </Tab>
     </Tabs>
   </Tab>
 </Tabs>