How do I install the Clerk Nuxt Patterns skill?

Run npx skillmds@latest add kintsugi-programmer/clerk-nuxt-patterns in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Clerk Nuxt Patterns safe to use?

This skill has not completed SkillMD's automated safety review yet. Independent scanners report: SkillSpector: PASS, Skill Scanner: PASS. Capability flags: executes scripts, makes network calls. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Clerk Nuxt Patterns?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Clerk Nuxt Patterns free to use?

Yes. Installing skills from SkillMD is free. This skill is licensed under MIT.

Who published Clerk Nuxt Patterns?

kintsugi-programmer (@kintsugi-programmer) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Clerk Nuxt Patterns by kintsugi-programmer

Name: Clerk Nuxt Patterns
Rating: 4.2 (5 reviews)
Author: kintsugi-programmer

Clerk Nuxt Patterns

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.

kintsugi-programmer Updated Sep 8, 2026 0 repo stars

File contents

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, use auth().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>

Docs

Nuxt SDK

---name: clerk-nuxt-patternsdescription: 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.license: MIT---# 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`:```typescriptexport 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, use `auth().protect()` to lock routes## Minimal Pattern```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```vue<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 install- `clerk-custom-ui` - Custom flows & appearance- `clerk-orgs` - B2B organizations## Docs[Nuxt SDK](https://clerk.com/docs/nuxt/getting-started/quickstart)

Frequently asked questions