clerk-nuxt-patterns Skill: What It Does and How to Install It
Makes your coding agent add Clerk sign-in to a Nuxt 3 app: route middleware, server routes, composables and SSR-safe auth.
- Installs
- 14.2K
- on skills.sh
- Stars
- 89
- on GitHub
- Files
- 8
- besides SKILL.md
- Updated
- Oct 2026
- last repo commit
The SKILL.md tells the agent to add the @clerk/nuxt module in nuxt.config.ts, which it says auto-configures middleware, plugins and component auto-imports. It then covers route protection with the built-in auth middleware, auth inside Nitro server routes, the composables and SSR hydration. A pitfalls table lists symptoms and fixes, such as env variables that need the NUXT_PUBLIC_ prefix.
It loads on Nuxt auth, clerkMiddleware in Nuxt or server API route questions. You need a Clerk publishable key and secret key for the app.
Good for
- Nuxt 3 developers adding Clerk
- Teams that protect Nitro server routes
- Anyone fixing hydration mismatches on signed-in pages
Install clerk-nuxt-patterns
Claude Code
- 1
Copy this prompt.
Install the clerk-nuxt-patterns skill in Claude Code. Run this command: /plugin marketplace add clerk/skills /plugin install clerk@clerk-skills Then check that it loaded and tell me how to use it.
- 2
Paste it into Claude Code. It shows the change and asks before running it.
Pick one route. The plugin installs all 20 skills in the Clerk repo (counted from the repo tree) and adds the Clerk MCP server from the repo's .mcp.json, which points at https://mcp.clerk.com/mcp. The skills-only routes install just this skill and no MCP server config. The README says to open /plugin, go to Marketplaces, select clerk-skills and enable auto-update if you want updates.
From the project README. Source.
What's in the skill
When it loads
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.
Sections in SKILL.md
- What Do You Need?
- References
- Setup
- Mental Model
- Minimal Pattern
- Common Pitfalls
- Org-Aware Pattern
- See Also
- Docs
Key facts
- Installs on skills.sh
- 14,159 (Nov 2, 2026)
- GitHub stars
- 89 for the whole clerk/skills repo (Nov 2, 2026)
- Last repo commit
- Oct 30, 2026
What it includes
Add @clerk/nuxt to nuxt.config.ts and set the two env keys.
The SKILL.md shows an npm install of @clerk/nuxt, the two env variable names and a one-line modules entry.
Try: “Add Clerk to my Nuxt 3 app”
Runs code ·
Module setupProtect pages with definePageMeta and the built-in auth middleware.
Covers the built-in auth middleware, custom route middleware, server middleware and redirect URLs. Source: references/nuxt-middleware.md.
Try: “Make /dashboard require sign-in in Nuxt”
Write ·
Route middlewareCheck the signed-in user inside Nitro routes with event.context.auth.
Covers auth context in Nitro, using clerkClient, organization-scoped routes and error codes. Source: references/server-api-routes.md.
Try: “Protect my /api/orders Nitro route with Clerk”
Write ·
Server API routesUse useAuth, useUser, useClerk, useSignIn and useSignUp in components.
Covers the composables, which the SKILL.md says are auto-imported, and the difference between refs and values. Source: references/composables.md.
Write ·
ComposablesAvoid hydration mismatches and fetch with auth headers.
Covers the server and client boundary, hydration safety, useFetch with auth and Pinia state hydration. Source: references/ssr-auth.md.
Try: “Fix the hydration mismatch on my signed-in header”
Write ·
SSR-safe authShow organization admin UI from orgId and orgRole.
A template example that checks orgId and shows an admin panel for org:admin.
Write ·
Org-aware pattern
From the official docs
Permissions
Low risk
The skill makes an agent change code in your project and add Clerk keys to your env file, so a wrong edit lands in your own app. Review the diff before you commit it and keep the secret key out of git.
What it can do
- Read your data
- Create and change things
- Delete things
- Read-only mode
Watch out for
It edits files in your project
The SKILL.md setup runs an npm install of `@clerk/nuxt`, edits `nuxt.config.ts` and puts a publishable key and a secret key in your `.env`. Review the diff and keep CLERK_SECRET_KEY out of version control. github.com
The plugin route also adds the Clerk MCP server
The plugin's .mcp.json registers https://mcp.clerk.com/mcp. Use the skills CLI route if you only want this skill. github.com
Security advisories
No published security advisories as of Nov 2, 2026.
Technical details
| Turning on read-only | No read-only mode. |
|---|---|
| Talks to | WebFetch tool (the frontmatter allows it; the SKILL.md links point at clerk.com/docs) |
| Sign-in and keys | The SKILL.md shows Clerk keys going into your project's env file. |
| Scopes |
|
Questions
What does clerk-nuxt-patterns do?
It makes your coding agent write Clerk sign-in code for Nuxt 3: the @clerk/nuxt module, route middleware, auth in server API routes and SSR-safe composables.
How do I install clerk-nuxt-patterns?
Use the install box above. The Claude Code plugin route installs every Clerk skill and the Clerk MCP server, and the skills CLI route installs only this skill. Pick one route, not both, or you get the skills twice.
Is clerk-nuxt-patterns official?
Yes. It is published in Clerk's own clerk/skills repository, and the plugin.json in that repo lists Clerk as the author.
Does clerk-nuxt-patterns work in the Claude app or Codex?
Codex, Cursor and GitHub Copilot CLI each have a plugin install in the README. The README does not document uploading Clerk skills to the Claude app, and this skill's job is to change code in a local project, so the install box has no Claude app tab.
Does it need a Clerk account or API key?
You need a Clerk publishable key and secret key for the app you are building. The SKILL.md setup puts them in .env as NUXT_PUBLIC_CLERK_PUBLISHABLE_KEY and NUXT_CLERK_SECRET_KEY.
Is clerk-nuxt-patterns safe to install?
Its SKILL.md makes the agent change files in your project and use Clerk keys from your env file, and its frontmatter allows the WebFetch tool. Our advice: read each change before you commit it, and keep the secret key out of git.
clerk-nuxt-patterns vs clerk-vue-patterns?
Use clerk-nuxt-patterns for Nuxt. Use clerk-vue-patterns for a plain Vue 3 app. The Vue skill's SKILL.md says "For Nuxt, use clerk-nuxt-patterns instead."
Information
updated Nov 2, 2026
- Repository
- clerk/skills
- Folder
skills/clerk-nuxt-patterns
Sources
Docs, issue trackers and discussions this page is built from.
Show all 4Hide
- clerk-nuxt-patterns SKILL.md · github.com
- clerk/skills README · github.com
- clerk plugin.json · github.com
- clerk .mcp.json · github.com