From features
Implements Clerk authentication patterns in Nuxt 3 using @clerk/nuxt: middleware for route protection, composables (useAuth/useUser), server API routes, and SSR handling. Triggers on Nuxt auth queries.
npx claudepluginhub clerk/skills --plugin mobileThis skill is limited to using the following tools:
| Task | Reference |
Provides Vue 3 Clerk patterns: composables (useAuth, useUser, useClerk, useOrganization), Vue Router guards, Pinia auth store integration. For Vue Clerk auth setup.
Provides Clerk SDK patterns for Next.js authentication: server auth checks, client hooks, middleware protection, and user data access.
Implements authentication in Nuxt 4+ apps with @onmax/nuxt-better-auth, providing useUserSession composable, server auth helpers, route protection, Better Auth plugins, and NuxtHub database integration.
Share bugs, ideas, or general feedback.
| 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 organizations