clerk-vue-patterns

Import useAuth and useUser from @clerk/vue after registering clerkPlugin with your publishable key in main.ts. useAuth exposes isSignedIn, userId, and signOut, while useUser exposes the reactive user object with fields like firstName.

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

Define a setup-style Pinia store that calls useAuth and useUser inside the store function and returns the refs directly. Do not copy userId into separate state, because that creates a stale copy that stops updating on sign-in or sign-out.

This Skill targets plain Vue 3 with @clerk/vue only. For Nuxt, use the clerk-nuxt-patterns approach instead, which relies on Nuxt middleware rather than manual Vue Router guards.

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.