Clerk Vue Patterns

What it does

This skill collects practical patterns for integrating Clerk authentication into Vue 3 apps. It documents how to set up the Clerk plugin, use composables like useAuth and useUser, implement Vue Router navigation guards, and wire Clerk into a Pinia auth store. The guidance includes sample code snippets and common pitfalls to avoid when destructuring reactive composables.

When to use it

Use this skill when you are building a Vue 3 or Vite-based project and need production-ready authentication flows with Clerk. It's appropriate for single-page apps that need sign-in/sign-out UI, reactive user state, organization switching, or route protection. For Nuxt projects, prefer the complementary clerk-nuxt-patterns skill.

What's included

• Scripts: none in this skill (has_scripts=false)
• References: detailed markdown under references/ (has_references=true), including composables and router guard examples
• Instructions: setup for app.use(clerkPlugin), examples for useAuth/useUser in <script setup>, router guard patterns, and Pinia integration notes.

Compatible agents

Best used by agents that can read and inject code snippets (Copilot/GitHub-style assistants, Cursor, Codex). It mainly provides code-level guidance rather than interactive UI components.