skills.rest
divinaarmuela
divinaarmuelaCOMMUNITY
Explore all skills by this author →
GitHub

clerk-nuxt-patterns

Implements Clerk authentication patterns for Nuxt 3 apps including middleware, composables, and server routes.

Updated Apr 19, 2026
Search Tags:#authentication#vue#middleware#ssr#composables#clerk#nuxt
One-click install
npx skills add https://github.com/divinaarmuela/Content --skill clerk-nuxt-patterns-divinaarmuela
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: clerk-nuxt-patterns
Source: https://github.com/divinaarmuela/Content/tree/main/.claude/skills/clerk-nuxt-patterns
Command: npx skills add https://github.com/divinaarmuela/Content --skill clerk-nuxt-patterns-divinaarmuela

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @clerk/nuxt, and includes references (resource) components.

What problem does it solve? Adding authentication to a Nuxt 3 application involves many moving parts: route protection, server API auth, SSR hydration, and organization support. This Skill provides proven patterns for integrating @clerk/nuxt so you avoid common pitfalls like hydration mismatches, undefined composables on the server, and unprotected routes. ## Core Features & Use Cases - Route Protection: Use the built-in auth middleware via definePageMeta or create custom route middleware with useAuth for redirect logic. - Server API Auth: Access event.context.auth in Nitro server routes and use clerkClient from @clerk/nuxt/server to fetch user data with proper 401/403 handling. - Composables & SSR: Use auto-imported useAuth, useUser, and useClerk composables with SSR-safe patterns that avoid hydration mismatches. - Use Case: You are building a Nuxt SaaS dashboard and need to protect /dashboard, return the current user from a Nitro API route, and add organization switching. This Skill gives you the exact middleware, server route, and OrganizationSwitcher patterns to implement all three. ## Quick Start Ask the AI to protect the /dashboard route in your Nuxt 3 app with Clerk authentication and redirect unauthenticated users to the sign-in page.

Frequently Asked Questions about clerk-nuxt-patterns

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I protect a route in Nuxt 3 with Clerk?▼

Add definePageMeta({ middleware: 'auth' }) to the page component. The @clerk/nuxt module auto-registers this auth middleware, which redirects unauthenticated users to the sign-in page before rendering.

How do I get the current user in a Nuxt server API route?▼

Access event.context.auth inside a Nitro event handler to get the userId, then call clerkClient(event).users.getUser(userId) imported from @clerk/nuxt/server. Throw createError with statusCode 401 when userId is missing.

Why does useAuth return undefined on the server in Nuxt?▼

The useAuth composable is client-reactive and not available in Nitro server contexts. In server routes, use event.context.auth instead, which @clerk/nuxt populates automatically for every request.

How do I fix Clerk hydration mismatch errors in Nuxt?▼

Hydration mismatches occur when auth-dependent content renders differently on server and client. Wrap auth-gated content in <ClientOnly> or check isLoaded before rendering, and rely on middleware redirects for protected pages.

What environment variables does @clerk/nuxt require?▼

Set NUXT_PUBLIC_CLERK_PUBLISHABLE_KEY for the public key and NUXT_CLERK_SECRET_KEY for the secret key in your .env file. Nuxt requires the NUXT_PUBLIC_ prefix for client-exposed values and NUXT_ for server-only values.

How do I add organization switching to a Nuxt Clerk app?▼

Render the auto-imported <OrganizationSwitcher /> component in your header, then read orgId and orgRole from useAuth() to scope dashboard content. Handle the case where orgId is null by prompting the user to select an organization.

Related Skills

Explore More Software Engineering Skills→
RajAryanIITBHURajAryanIITBHU

clerk-nuxt-patterns

Protect Nuxt 3 routes and Nitro API endpoints with Clerk authentication middleware.

Community
Intermediate
aaravminaaravmin
1

clerk-custom-ui

Customize Clerk authentication flows and UI components with hooks and theming.

Community
Intermediate
LostovayneLostovayne
2

clerk-orgs

Configure Clerk Organizations for multi-tenant RBAC and org-scoped access.

Community
Advanced
Aditya07024Aditya07024

clerk-nuxt-patterns

Implement Clerk authentication patterns for Nuxt 3 applications with route protection.

Community
Intermediate