{"id":14589,"plugin_id":"plugin_asdk_app_6a9a3c1cd0108191807da33c4cd319ed","kind":"skill","collection_source":null,"comparison_source":null,"observed_at":"2026-09-30T23:09:49.559Z","digest":"af60642e863fbc75573632691a7c7a98354a069aab3b89bfd81ee3f77facab71","against":null,"payload":{"name":"clerk-vue-patterns","description":"Vue 3 patterns with Clerk — composables (useAuth, useUser, useClerk, useOrganization), Vue Router guards, Pinia auth store integration. Triggers on: vue clerk, useAuth vue, clerk composables, vue router clerk guard, pinia auth clerk. For Nuxt, use clerk-nuxt-patterns instead.","included_files":[{"relative_path":"evals/evals.json","size_in_bytes":2093},{"relative_path":"references/composables.md","size_in_bytes":2204},{"relative_path":"references/pinia-integration.md","size_in_bytes":1461},{"relative_path":"references/vue-router-guards.md","size_in_bytes":1657},{"relative_path":"templates/vue-basic-auth/index.html","size_in_bytes":294},{"relative_path":"templates/vue-basic-auth/package.json","size_in_bytes":337},{"relative_path":"templates/vue-basic-auth/src/App.vue","size_in_bytes":304},{"relative_path":"templates/vue-basic-auth/src/main.ts","size_in_bytes":390},{"relative_path":"templates/vue-basic-auth/src/style.css","size_in_bytes":0},{"relative_path":"templates/vue-basic-auth/vite.config.ts","size_in_bytes":127}],"skill_md_contents":"---\nname: clerk-vue-patterns\ndescription: 'Vue 3 patterns with Clerk — composables (useAuth, useUser,\n  useClerk, useOrganization), Vue Router guards, Pinia auth store\n  integration. Triggers on: vue clerk, useAuth vue, clerk composables,\n  vue router clerk guard, pinia auth clerk. For Nuxt, use clerk-nuxt-patterns instead.'\nlicense: MIT\nallowed-tools: WebFetch\nmetadata:\n  author: clerk\n  version: 1.0.0\n---\n\n# Vue Patterns\n\nSDK: `@clerk/vue` v2+ (Vue 3). For Nuxt, use `clerk-nuxt-patterns`.\n\n## What Do You Need?\n\n| Task | Reference |\n|------|-----------|\n| Composables: useAuth, useUser, useOrganization | references/composables.md |\n| Vue Router navigation guards | references/vue-router-guards.md |\n| Pinia store with auth state | references/pinia-integration.md |\n\n## Mental Model\n\nVue uses composables from `@clerk/vue`:\n\n- **`useAuth()`** — reactive `isSignedIn`, `userId`, `signOut`\n- **`useUser()`** — reactive `user` object\n- **`useClerk()`** — full Clerk instance for advanced operations\n- **`useOrganization()`** — reactive `organization`, `membership`\n\n## Setup\n\n### Vue (Plain)\n\n```ts\n// main.ts\nimport { clerkPlugin } from '@clerk/vue'\nimport { createApp } from 'vue'\nimport App from './App.vue'\n\nconst app = createApp(App)\napp.use(clerkPlugin, {\n  publishableKey: import.meta.env.VITE_CLERK_PUBLISHABLE_KEY,\n})\napp.mount('#app')\n```\n\n## Composables Usage\n\n```vue\n<script setup lang=\"ts\">\nimport { useAuth, useUser } from '@clerk/vue'\n\nconst { isSignedIn, userId, signOut } = useAuth()\nconst { user } = useUser()\n</script>\n\n<template>\n  <div v-if=\"isSignedIn\">\n    <p>Hello {{ user?.firstName }}</p>\n    <button @click=\"signOut()\">Sign Out</button>\n  </div>\n  <SignInButton v-else />\n</template>\n```\n\n## Org Switching\n\n```vue\n<script setup lang=\"ts\">\nimport { useOrganizationList } from '@clerk/vue'\n\nconst { userMemberships, setActive } = useOrganizationList()\n</script>\n\n<template>\n  <button\n    v-for=\"mem in userMemberships.data ?? []\"\n    :key=\"mem.organization.id\"\n    @click=\"setActive({ organization: mem.organization.id })\"\n  >\n    {{ mem.organization.name }}\n  </button>\n</template>\n```\n\n## Common Pitfalls\n\n| Symptom | Cause | Fix |\n|---------|-------|-----|\n| Composables return `undefined` | Not inside `ClerkProvider` tree | Ensure `app.use(clerkPlugin, { publishableKey })` is called |\n| `userId` reactive but not updating | Destructuring loses reactivity | Use `const { userId } = useAuth()` (toRefs-style composable, reactive) |\n## Import Map\n\n| What | Import |\n|------|--------|\n| Composables | `@clerk/vue` |\n| Plugin setup | `@clerk/vue` |\n| Components | `@clerk/vue` |\n\n## See Also\n\n- `clerk-setup` - Initial Clerk install\n- `clerk-custom-ui` - Custom flows & appearance\n- `clerk-orgs` - B2B organizations\n\n## Docs\n\n- [Vue SDK](https://clerk.com/docs/vue/getting-started/quickstart)\n"},"changes":[],"summary":"First saved snapshot. No earlier version is available for comparison.","summary_kind":"deterministic","summary_metadata":{}}