What problem does it solve? Adding authentication to a Nuxt 3 app with Clerk involves several distinct surfaces — route middleware, Vue composables, Nitro server API routes, and SSR hydration — and mixing them up causes common bugs like undefined composables on the server, hydration mismatches, and unprotected routes. This Skill provides the correct pattern for each surface. ## Core Features & Use Cases - Route Protection: Apply the built-in auth middleware via definePageMeta or write custom route middleware with useAuth and navigateTo redirects. - Server API Auth: Secure Nitro server routes using event.context.auth and clerkClient from @clerk/nuxt/server, returning 401/403 errors correctly. - Component & SSR Patterns: Use auto-imported composables (useAuth, useUser, useClerk) in <script setup>, handle loading states, and avoid hydration mismatches. - Use Case: You are building a Nuxt SaaS dashboard and need to protect /dashboard, expose a /api/user-data endpoint that returns 401 for anonymous requests, and display the signed-in user's profile — this Skill gives the exact code pattern for each. ## Quick Start Ask the assistant to protect the /dashboard route in your Nuxt 3 app with Clerk so unauthenticated users are redirected to the sign-in page.
