Setting the skill. One moment.
Frameworks
Skill 13 of 22
Nuxt 3 auth patterns with @clerk/nuxt - middleware, composables, server API routes, SSR.
1 minute · 180 words · 10 sections
Install
npx skills add clerk/skills --skill clerk-nuxt-patternsnpx skills add clerk/skills/plugin marketplace add clerk/skillsThe first command installs just this skill, by the name in its SKILL.md; the second installs the whole repository.
Frameworks · Clerk…
References
ComposablesAssets
AppAlso bundled
EvalsCredited skills
22 skills · 82 min
| 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 |
| 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 |
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.
@clerk/nuxt auto-imports all Clerk components and composables — no explicit imports needed in <script setup>.
useAuth, useUser) — client-side reactive, inside <script setup>clerkClient) — Nitro server routes, event.context.authclerkMiddleware) — auto-registered, use auth().protect() to lock routes<!-- 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.
| 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 |
<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>clerk-setup - Initial Clerk installclerk-custom-ui - Custom flows & appearanceclerk-orgs - B2B organizationsNuxt 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.
The verbatim description from this skill’s front matter — the string an agent matches on to decide whether to load it.
WebFetchskills/frameworks/clerk-nuxt-patterns/SKILL.mdmain, last pushed 23 September 2026.SKILL.md, not by matching a directory convention. 5 distinct layouts observed: .agents/skills/*/SKILL.md, skills/core/*/SKILL.md, skills/features/*/SKILL.md, skills/frameworks/*/SKILL.md, skills/mobile/*/SKILL.md.h1 and no skipped levels:.claude-plugin/marketplace.json by Clerk, declaring 4 plugins. It is read for editorial metadata only — never as the skill index, which is always the repository tree./clerk/skills.md, and each skill at its own .md URL.8 files · 14 KB
Everything this skill ships beside its prose. All of it is set here, as subchapters of skill 13.
Documentation the agent loads on demand, rather than up front.
Templates, schemas and fixtures the skill draws on.
Everything else published alongside the skill.