clerk-nuxt-patterns

# Nuxt Patterns ## What Do You Need? | Task | Reference | |------|-----------| | Protect routes with middleware | references/nuxt-middleware.md | | Auth in server API routes (Nitro) | references/server-api-routes.md | | useAuth / useUser in components | references/composables.md | | SSR-safe auth patterns | references/ssr-auth.md | ## References | Reference | Description | |-----------|-------------| | `references/nuxt-middleware.md` | Route protection, clerkMiddleware() | | `references/server-api-routes.md` | Nitro server route auth | | `references/composables.md` | useAuth, useUser, useClerk | | `references/ssr-auth.md` | SSR hydration, server vs client | ## Setup ``` npm install @clerk/nuxt ``` `.env`: ``` NUXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_... NUXT_CLERK_SECRET_KEY=sk_... ``` `nuxt.config.ts`: ```typescript export default defineNuxtConfig({ modules: ['@clerk/nuxt'], }) ``` This single line auto-configures middleware, plugins, and component auto-imports. ## Mental Model `@clerk/nuxt` auto-imports all Clerk components and composables — no explicit imports needed in `<script setup>`. - **Composables** (`useAuth`, `useUser`) — client-side reactive, inside `<script setup>` - **Server routes** (`clerkClient`) — Nitro server routes, `event.context.auth` - **Middleware** (`clerkMiddleware`) — auto-registered, use `auth().protect()` to lock routes ## Minimal Pattern ```vue <!-- pages/dashboard.vue --> <script setup lang="ts"> definePageMeta({ middleware: 'auth' }...