skills.rest
divinaarmuela
divinaarmuelaCOMMUNITY
Explore all skills by this author →
GitHub

clerk-vue-patterns

Implements Clerk authentication in Vue 3 apps using composables, router guards, and Pinia stores.

Updated Apr 19, 2026
Search Tags:#authentication#composables#clerk#pinia#vue 3#vue router#useauth
One-click install
npx skills add https://github.com/divinaarmuela/Content --skill clerk-vue-patterns-divinaarmuela
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: clerk-vue-patterns
Source: https://github.com/divinaarmuela/Content/tree/main/.claude/skills/clerk-vue-patterns
Command: npx skills add https://github.com/divinaarmuela/Content --skill clerk-vue-patterns-divinaarmuela

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @clerk/vue, vue, pinia, vue-router, and includes references (resource) components.

What problem does it solve? Integrating Clerk authentication into a plain Vue 3 application requires knowing the correct composables, reactivity rules, and guard patterns, and mistakes like losing reactivity or gating routes before Clerk initializes cause subtle bugs. ## Core Features & Use Cases - Composables Reference: Covers useAuth, useUser, useClerk, useOrganization, useOrganizationList, and useSignIn/useSignUp from @clerk/vue with correct ref handling. - Vue Router Guards: Provides global and per-route navigation guard patterns, including org-gated routes and isLoaded checks. - Pinia Integration: Shows how to wrap Clerk composables in Pinia stores without copying state and creating stale data. - Use Case: Build a Vue 3 dashboard where unauthenticated users are redirected to sign in, the header shows the current user's name, and users can switch organizations from a dropdown. ## Quick Start Ask the assistant to add Clerk authentication to your Vue 3 app with a sign-in button, a protected dashboard route, and a Pinia auth store.

Frequently Asked Questions about clerk-vue-patterns

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I use Clerk composables in a Vue 3 component?▼

Import useAuth and useUser from @clerk/vue inside a script setup block to get reactive isSignedIn, userId, and user refs. Use isSignedIn to conditionally render content and call signOut() for logout.

How to protect Vue Router routes with Clerk authentication?▼

Add a global beforeEach guard that checks route meta fields like requiresAuth, then reads userId from useAuth and redirects to /sign-in when absent. Always wait for isLoaded before trusting isSignedIn, since guards can fire before Clerk initializes.

How do I sync Clerk auth state with a Pinia store?▼

Define a setup-style Pinia store that calls useAuth and useUser, then return the refs directly without copying values into state. Copying userId into store state creates a stale snapshot that will not update on sign-in or sign-out.

Does @clerk/vue work with Nuxt?▼

The @clerk/vue SDK targets plain Vue 3 applications. For Nuxt, use the dedicated Nuxt module and middleware-based route protection instead of manual Vue Router guards, as covered by the clerk-nuxt-patterns skill.

Why do Clerk composables return undefined in my Vue app?▼

Composables return undefined when the app is not wrapped by the Clerk plugin. Ensure main.ts calls app.use(clerkPlugin, { publishableKey }) with a valid VITE_CLERK_PUBLISHABLE_KEY before mounting the app.

Related Skills

Explore More Software Engineering Skills→
weng-labweng-lab

clerk-setup

Detect the framework from package.json and apply the matching Clerk quickstart.

Official
Advanced
weng-labweng-lab

clerk-custom-ui

Customize Clerk authentication UX and branding in React/Next.js apps.

Official
Advanced
sheriaxsheriax

clerk-orgs

Manage multi-tenancy with organizations, role-based access control, and enterprise SSO.

Official
Intermediate
clerkclerk
66

clerk-nuxt-patterns

Protects Nuxt 3 apps with Clerk authentication middleware and Nitro server route guards.

Official
Intermediate