skills.rest
paramcodes
paramcodesCOMMUNITY
Explore all skills by this author →
Website𝕏@Your_PARAMGitHub

clerk-vue-patterns

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

Updated Sep 19, 2026
Search Tags:#authentication#vue#Clerk#Pinia#composables#vue-router#auth guards
One-click install
npx skills add https://github.com/paramcodes/autobro --skill clerk-vue-patterns-paramcodes
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: clerk-vue-patterns
Source: https://github.com/paramcodes/autobro/tree/main/.agents/skills/clerk-vue-patterns
Command: npx skills add https://github.com/paramcodes/autobro --skill clerk-vue-patterns-paramcodes

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @clerk/vue, 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 trusting auth state before initialization cause subtle bugs. ## Core Features & Use Cases - Composables Reference: Covers useAuth, useUser, useClerk, useOrganization, useOrganizationList, and useSignIn/useSignUp from @clerk/vue with typed property tables. - Vue Router Guards: Provides global beforeEach guards, per-route guards, and organization-gated route patterns for protecting pages. - Pinia Integration: Shows how to wrap Clerk composables in Pinia stores without duplicating or staling auth state. - Use Case: You are building a Vue 3 dashboard and need sign-in state, an org switcher, and protected routes. Use this Skill to wire up clerkPlugin, gate routes with navigation guards, and expose auth state app-wide through a Pinia store. ## Quick Start Ask the AI to add Clerk authentication to your Vue 3 app with a sign-in button, 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 values. Destructure them directly since the composables return refs that stay reactive in templates.

How to protect Vue Router routes with Clerk authentication?▼

Add a meta.requiresAuth flag to protected routes and check userId from useAuth inside router.beforeEach, redirecting to /sign-in when absent. Always wait for isLoaded before trusting isSignedIn, since guards can fire before Clerk initializes.

Can I use Clerk with Pinia in a Vue app?▼

Yes, call useAuth and useUser inside a Pinia setup-style store and return the refs directly. Do not copy userId into store state manually, because that creates a stale copy that stops updating 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 app.use(clerkPlugin, { publishableKey }) is called in main.ts before mounting, with VITE_CLERK_PUBLISHABLE_KEY set in your environment.

Related Skills

Explore More Software Engineering Skills→
Rajaryan1726Rajaryan1726

clerk-vue-patterns

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

Community
Intermediate
mihaicrisan04mihaicrisan04

clerk-custom-ui

Customize Clerk authentication components with themes, colors, fonts, and CSS.

Community
Intermediate
2Rds2Rds

Clerk Authentication

Integrate Clerk authentication for sign-in, sessions, and JWT tokens.

Community
Intermediate
clerkclerk
66

clerk-nuxt-patterns

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

Official
Intermediate