Agent Skills
› midudev/autoskills
› clerk-vue-patterns
clerk-vue-patterns
GitHub提供基于 @clerk/vue SDK v2+ 的 Vue 3 认证集成方案。涵盖 useAuth/useUser 等组合式函数、Vue Router 守卫及 Pinia 状态管理，适用于 Vue 项目而非 Nuxt。
触发场景
vue clerk
useAuth vue
clerk composables
vue router clerk guard
pinia auth clerk
安装
npx skills add midudev/autoskills --skill clerk-vue-patterns -g -y
SKILL.md
Frontmatter
{
"name": "clerk-vue-patterns",
"license": "MIT",
"metadata": {
"author": "clerk",
"version": "1.0.0"
},
"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.",
"allowed-tools": "WebFetch"
}
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()— reactiveisSignedIn,userId,signOutuseUser()— reactiveuserobjectuseClerk()— full Clerk instance for advanced operationsuseOrganization()— reactiveorganization,membership
Setup
Vue (Plain)
// 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
<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
<script setup lang="ts">
import { useOrganizationList } from '@clerk/vue'
const { userMemberships, setActive } = useOrganizationList()
</script>
<template>
<button
v-for="mem in userMemberships.data ?? []"
:key="mem.organization.id"
@click="setActive({ organization: mem.organization.id })"
>
{{ mem.organization.name }}
</button>
</template>
Common Pitfalls
| Symptom | Cause | Fix |
|---|---|---|
Composables return undefined |
Not inside ClerkProvider tree |
Ensure app.use(clerkPlugin, { publishableKey }) is called |
userId reactive but not updating |
Destructuring loses reactivity | Use const { userId } = useAuth() (toRefs-style composable, reactive) |
Import Map
| What | Import |
|---|---|
| Composables | @clerk/vue |
| Plugin setup | @clerk/vue |
| Components | @clerk/vue |
See Also
clerk-setup- Initial Clerk installclerk-custom-ui- Custom flows & appearanceclerk-orgs- B2B organizations
Docs
版本历史
- 0ec7253 当前 2026-07-24 20:52
