RajAryanIITBHU/clerk-nuxt-patterns
.agents/skills/clerk-nuxt-patterns/SKILL.md
Nuxt 3 auth patterns with @clerk/nuxt - middleware, composables, server API routes, SSR. Triggers on: Nuxt auth, useAuth composable, clerkMiddleware Nuxt, server API Clerk, Nuxt route protection.
development
Updated Apr 17, 2026
$ install --global
skillsauthnpx skillsauth add RajAryanIITBHU/bny clerk-nuxt-patternsInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 17, 2026, 12:17 PM4.6s9 files scanned
SKILL.md
- name:
- clerk-nuxt-patterns
- description:
- Nuxt 3 auth patterns with @clerk/nuxt - middleware, composables, server
- API routes, SSR. Triggers on:
- Nuxt auth, useAuth composable, clerkMiddleware Nuxt,
- license:
- MIT
- allowed-tools:
- WebFetch
- author:
- clerk
- version:
- 1.0.0
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:
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, useauth().protect()to lock routes
Minimal Pattern
<!-- pages/dashboard.vue -->
<script setup lang="ts">
definePageMeta({ middleware: 'auth' })
const { userId } = useAuth()
</script>
<template>
<Show when="signed-in">
<p>Hello {{ userId }}</p>
</Show>
</template>
definePageMeta({ middleware: 'auth' })uses the built-in auth middleware from@clerk/nuxt.
Common Pitfalls
| Symptom | Cause | Fix |
|---------|-------|-----|
| Composables return undefined on server | useAuth is client-only | Use event.context.auth in server routes |
| Route not protected | Missing middleware: 'auth' meta | Add definePageMeta({ middleware: 'auth' }) |
| clerkClient not available | Wrong import path | Import from @clerk/nuxt/server |
| Hydration mismatch | Rendering auth state before mounted | Wrap in <ClientOnly> or check isLoaded |
| Env vars not picked up | Wrong prefix | Nuxt requires NUXT_PUBLIC_ for public, NUXT_ for server |
Org-Aware Pattern
<script setup lang="ts">
const { orgId, orgRole } = useAuth()
</script>
<template>
<div v-if="orgId">
<p>Org: {{ orgId }}</p>
<p v-if="orgRole === 'org:admin'">Admin panel</p>
</div>
<div v-else>
<OrganizationSwitcher />
</div>
</template>
See Also
clerk-setup- Initial Clerk installclerk-custom-ui- Custom flows & appearanceclerk-orgs- B2B organizations
Docs
Nuxt SDK
Related Skills
RajAryanIITBHU/clerk-astro-patterns
development
VerifiedTrustedCommunity
Astro patterns with Clerk — middleware, SSR pages, island components, API routes, static vs SSR rendering. Triggers on: astro clerk, clerk astro middleware, astro protected page, clerk island component, astro API route auth, clerk astro SSR.
SKILL.mdUpdated Apr 17, 2026
RajAryanIITBHU/clerk
tools
VerifiedTrustedCommunity
Clerk authentication router. Use when user asks about adding authentication, setting up Clerk, custom sign-in flows, Swift or native iOS auth, native Android auth, Next.js patterns, React patterns, Vue patterns, Nuxt patterns, Astro patterns, TanStack Start patterns, Expo patterns, React Router patterns, Chrome Extension patterns, organizations, syncing users, or testing. Automatically routes to the specific skill based on their task.
SKILL.mdUpdated Apr 17, 2026
RajAryanIITBHU/clerk-webhooks
development
VerifiedTrustedCommunity
Clerk webhooks for real-time events and data syncing. Always output complete, copy-paste-ready webhook handlers with verifyWebhook(req) verification. Listen for user creation, updates, deletion, and organization events. Build event-driven features like database sync, notifications, integrations.
SKILL.mdUpdated Apr 17, 2026
RajAryanIITBHU/clerk-vue-patterns
tools
VerifiedTrustedCommunity
Vue 3 patterns with Clerk — composables (useAuth, useUser, useClerk, useOrganization), Vue Router guards, Pinia auth store integration. Triggers on: vue clerk, useAuth vue, clerk composables, vue router clerk guard, pinia auth clerk. For Nuxt, use clerk-nuxt-patterns instead.
SKILL.mdUpdated Apr 17, 2026