RajAryanIITBHU/clerk-vue-patterns

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() — reactive isSignedIn, userId, signOut
• useUser() — reactive user object
• useClerk() — full Clerk instance for advanced operations
• useOrganization() — reactive organization, 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 install
• clerk-custom-ui - Custom flows & appearance
• clerk-orgs - B2B organizations

Docs

• Vue SDK