clerk-vue-patterns

What problem does it solve?

Integrating Clerk authentication into Vue 3 apps can be inconsistent and error-prone; this Skill collects recommended composable usage, router guard patterns, and Pinia integration so teams can implement auth reliably and reactively.

Core Features & Use Cases

• Composables reference: clear guidance for useAuth, useUser, useClerk, useOrganization and how to consume their reactive refs without losing reactivity.
• Router guards: patterns for global and per-route guards that respect isLoaded and redirect unauthenticated users.
• Pinia integration: thin wrapper stores that expose composable refs (no stale copies) and an org store for switching active organizations.
• Project scaffold: a Vite-based template demonstrating plugin registration, component usage, and full sign-in flows.
• Use Case: Add Clerk to an existing Vue 3 application to protect dashboard routes, display user details, and support organization switching with audit-ready auth flows.

Quick Start

Add Clerk authentication to my Vue 3 app by installing @clerk/vue, registering clerkPlugin with my publishable key, using useAuth and useUser in components, protecting routes with a beforeEach guard that checks isLoaded and isSignedIn, and wrapping composables in a Pinia store for app-wide access.