clerk-vue-patterns

# Vue Patterns SDK: `@clerk/vue` v2+ (Vue 3). For Nuxt, use `clerk-nuxt-patterns`. ## What Do You Need? | Task | Reference | |------|-----------| | Composables: useAuth, useUser, useOrganization | references/composables.md | | Vue Router navigation guards | references/vue-router-guards.md | | Pinia store with auth state | references/pinia-integration.md | ## Mental Model Vue uses composables from `@clerk/vue`: - **`useAuth()`** — reactive `isSignedIn`, `userId`, `signOut` - **`useUser()`** — reactive `user` object - **`useClerk()`** — full Clerk instance for advanced operations - **`useOrganization()`** — reactive `organization`, `membership` ## Setup ### Vue (Plain) ```ts // main.ts import { clerkPlugin } from '@clerk/vue' import { createApp } from 'vue' import App from './App.vue' const app = createApp(App) app.use(clerkPlugin, { publishableKey: import.meta.env.VITE_CLERK_PUBLISHABLE_KEY, }) app.mount('#app') ``` ## Composables Usage ```vue <script setup lang="ts"> import { useAuth, useUser } from '@clerk/vue' const { isSignedIn, userId, signOut } = useAuth() const { user } = useUser() </script> <template> <div v-if="isSignedIn"> <p>Hello {{ user?.firstName }}</p> <button @click="signOut()">Sign Out</button> </div> <SignInButton v-else /> </template> ``` ## Org Switching ```vue <script setup lang="ts"> import { useOrganizationList } from '@clerk/vue' const { userMemberships, setActive } = useOrganizationList() </script> <template> <button...