skills.rest
clerk
clerkOFFICIAL
Explore all skills by this author →
Website𝕏@ClerkGitHub

clerk-nuxt-patterns

Protects Nuxt 3 apps with Clerk authentication middleware and Nitro server route guards.

66|4|Updated Jan 6, 2026
Search Tags:#middleware#ssr#auth#clerk#nuxt#nitro#server-api
One-click install
npx skills add https://github.com/clerk/skills --skill clerk-nuxt-patterns-clerk
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: clerk-nuxt-patterns
Source: https://github.com/clerk/skills/tree/main/skills/frameworks/clerk-nuxt-patterns
Command: npx skills add https://github.com/clerk/skills --skill clerk-nuxt-patterns-clerk

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Many Nuxt 3 applications need a secure, SSR-safe authentication model that protects both client routes and server API endpoints without fragile client-only checks. This Skill documents patterns for integrating Clerk via @clerk/nuxt to enforce route protection, authenticate Nitro server routes, and safely surface user and organization context in components and APIs.

Core Features & Use Cases

  • Route protection with middleware: Use the built-in auth middleware or create custom route middleware to redirect unauthenticated users to a sign-in page.
  • Client composables: Use useAuth, useUser, and useClerk in components for reactive auth state, user profile rendering, and client actions.
  • Server API guards: Read auth from event.context.auth or use clerkClient/getAuth in Nitro server routes to return 401/403 and fetch user data securely.
  • SSR and hydration safety: Patterns to avoid hydration mismatches and ensure middleware runs server-side so protected pages render correctly.
  • Org-aware workflows: Examples for reading orgId/orgRole from auth and scoping server and UI content accordingly.

Quick Start

Install @clerk/nuxt, add it to nuxt.config, set NUXT_PUBLIC_CLERK_PUBLISHABLE_KEY and NUXT_CLERK_SECRET_KEY in your environment, then protect a page by adding definePageMeta({ middleware: 'auth' }).

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 Nuxt 3 routes and server APIs with Clerk authentication?▼

To protect Nuxt 3 routes and server APIs with Clerk authentication, apply route middleware to redirect unauthenticated users and read auth context from event.context.auth in Nitro server routes to return 401 or 403 errors.

How does Clerk auth middleware handle SSR and hydration safety in Nuxt?▼

Clerk auth middleware handles SSR and hydration safety by running server-side to verify authentication before rendering, ensuring protected pages render correctly without client-only checks that cause hydration mismatches.

How do I access user and organization context in Nuxt server routes using Clerk?▼

Access user and organization context in Nuxt server routes using Clerk by reading auth data from event.context.auth or utilizing clerkClient and getAuth functions to securely fetch user data and scope content by orgId or orgRole.

What composables are available for client-side auth state in a Nuxt and Clerk integration?▼

The composables available for client-side auth state in a Nuxt and Clerk integration are useAuth, useUser, and useClerk, which provide reactive authentication state, user profile rendering, and client action capabilities within components.

What environment variables are required to configure Clerk in a Nuxt 3 project?▼

Configuring Clerk in a Nuxt 3 project requires setting NUXT_PUBLIC_CLERK_PUBLISHABLE_KEY and NUXT_CLERK_SECRET_KEY in your environment to enable both client-side authentication and secure Nitro server API guards.

Can I create custom route middleware for Clerk authentication instead of the built-in auth middleware?▼

Yes, you can create custom route middleware for Clerk authentication instead of the built-in auth middleware to implement specific redirection logic for unauthenticated users navigating to your protected Nuxt pages.

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
koushik-haitkoushik-hait

clerk-nextjs-patterns

Integrate Clerk authentication into Next.js with server/client auth flows and caching.

Community
Advanced
sudarshan-krishnansudarshan-krishnan

clerk-vue-patterns

Explain Clerk Vue 3 authentication patterns for composables, router guards, and Pinia stores.

Community
Intermediate
sudarshan-krishnansudarshan-krishnan

clerk-nuxt-patterns

Implement Nuxt 3 authentication patterns with @clerk/nuxt for route protection and SSR-safe state.

Community
Intermediate