mcpField
C
clerk-vue-patterns

clerk-vue-patterns

github.com/clerk开发8914.1k 次安装今天更新
代码仓库

关于 clerk-vue-patterns

供编码 Agent 在 Vue 3 中使用 `@clerk/vue` v2+ 的参考技能，介绍 Clerk 组合式函数以及 Vue Router 守卫和 Pinia 集成模式；Nuxt 项目则使用另一技能。

主要功能

  1. 01介绍身份验证与用户组合式函数
  2. 02涵盖组织组合式函数
  3. 03指导 Vue Router 导航守卫
  4. 04说明 Pinia 身份验证状态集成
  5. 05区分 Vue 与 Nuxt 用法

适用场景

  1. 01在 Vue 中读取响应式登录状态
  2. 02保护 Vue Router 导航
  3. 03将 Clerk 身份验证状态接入 Pinia

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/clerk/skills --skill clerk-vue-patterns

安装后在 Claude Code 中输入/clerk-vue-patterns确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

evals/
evals.json
references/
composables.md
pinia-integration.md
vue-router-guards.md
templates/vue-basic-auth/
index.html
package.json
vite.config.ts
templates/vue-basic-auth/src/
App.vue
main.ts
style.css

详细介绍

Vue 模式

SDK：@clerk/vue v2+（Vue 3）。对于 Nuxt，请使用 clerk-nuxt-patterns。

你需要什么？

任务参考
组合式函数：useAuth、useUser、useOrganizationreferences/composables.md
Vue Router 导航守卫references/vue-router-guards.md
使用 auth 状态的 Pinia storereferences/pinia-integration.md

心智模型

Vue 使用来自 @clerk/vue 的组合式函数：

  • useAuth() — 响应式 isSignedIn、userId、signOut
  • useUser() — 响应式 user 对象
  • useClerk() — 用于高级操作的完整 Clerk 实例
  • useOrganization() — 响应式 organization、membership

设置

Vue（纯 Vue）
// 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')

组合式函数用法

<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>

组织切换

<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>

常见问题

现象原因解决方法
组合式函数返回 undefined不在 ClerkProvider 树内确保已调用 app.use(clerkPlugin, { publishableKey })
userId 是响应式的，但不会更新解构会丢失响应性使用 const { userId } = useAuth()（类似 toRefs 的组合式函数，具有响应性）

导入映射

内容导入
组合式函数@clerk/vue
插件设置@clerk/vue
组件@clerk/vue

另请参阅

  • clerk-setup - 初始 Clerk 安装
  • clerk-custom-ui - 自定义流程和外观
  • clerk-orgs - B2B 组织

文档

评论

支持 Markdown