clerk-vue-patterns

Vue のパターン

SDK：@clerk/vue v2 以降（Vue 3）。Nuxt では clerk-nuxt-patterns を使用してください。

必要な情報を選んでください

タスク	リファレンス
コンポーザブル：useAuth、useUser、useOrganization	references/composables.md
Vue Router のナビゲーションガード	references/vue-router-guards.md
認証状態を持つ Pinia ストア	references/pinia-integration.md

基本的な考え方

Vue では @clerk/vue のコンポーザブルを使用します。

• useAuth() — リアクティブな isSignedIn、userId、signOut
• useUser() — リアクティブな user オブジェクト
• useClerk() — 高度な操作に使用する完全な Clerk インスタンス
• useOrganization() — リアクティブな organization、membership

セットアップ

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

ドキュメント

• Vue SDK