Back to Details

clerk-vue-patterns

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Vue Patterns

Vue模式

SDK: 
@clerk/vue
v2+ (Vue 3). For Nuxt, use 
clerk-nuxt-patterns
.
SDK: 
@clerk/vue
v2+ (Vue 3)。如果是Nuxt项目，请使用
clerk-nuxt-patterns
。

What Do You Need?

你需要什么？

TaskReference
Composables: useAuth, useUser, useOrganizationreferences/composables.md
Vue Router navigation guardsreferences/vue-router-guards.md
Pinia store with auth statereferences/pinia-integration.md
任务参考
可组合函数：useAuth、useUser、useOrganizationreferences/composables.md
Vue Router导航守卫references/vue-router-guards.md
包含身份验证状态的Pinia存储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
Vue使用来自
@clerk/vue
的可组合函数：
  • useAuth()
     — 响应式的
    isSignedIn
    、
    userId
    、
    signOut
  • useUser()
     — 响应式的
    user
    对象
  • useClerk()
     — 用于高级操作的完整Clerk实例
  • useOrganization()
     — 响应式的
    organization
    、
    membership

Setup

设置

Vue (Plain)

原生Vue

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')
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>
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>你好 {{ user?.firstName }}</p>
    <button @click="signOut()">退出登录</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
    v-for="mem in userMemberships.data ?? []"
    :key="mem.organization.id"
    @click="setActive({ organization: mem.organization.id })"
  >
    {{ mem.organization.name }}
  </button>
</template>
vue
<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

常见问题

SymptomCauseFix
Composables return 
undefined
Not inside 
ClerkProvider
tree		Ensure 
app.use(clerkPlugin, { publishableKey })
is called
userId
reactive but not updating		Destructuring loses reactivityUse 
const { userId } = useAuth()
(toRefs-style composable, reactive)
现象原因解决方案
可组合函数返回
undefined
不在
ClerkProvider
树内		确保已经调用
app.use(clerkPlugin, { publishableKey })
userId
是响应式的但不更新		解构操作丢失了响应性使用
const { userId } = useAuth()
（toRefs风格的可组合函数，天然响应式）

Import Map

导入映射

WhatImport
Composables
@clerk/vue
Plugin setup
@clerk/vue
Components
@clerk/vue
内容导入来源
可组合函数
@clerk/vue
插件配置
@clerk/vue
组件
@clerk/vue

See Also

另请参阅

  • clerk-setup
    - Initial Clerk install
  • clerk-custom-ui
    - Custom flows & appearance
  • clerk-orgs
    - B2B organizations
  • clerk-setup
    - Clerk初始安装
  • clerk-custom-ui
    - 自定义流程与外观
  • clerk-orgs
    - B2B组织功能

Docs

文档