/clerk-vue-patterns

Composables

All composables come from @clerk/vue.

useAuth

import { useAuth } from '@clerk/vue'

const { isSignedIn, isLoaded, userId, sessionId, signOut, getToken } = useAuth()

useUser

import { useUser } from '@clerk/vue'

const { user, isLoaded } = useUser()

user is Ref<UserResource | null> with .firstName, .lastName, .fullName, .imageUrl, .primaryEmailAddress, etc.

useClerk

import { useClerk } from '@clerk/vue'

const clerk = useClerk()
await clerk.value.openSignIn()
await clerk.value.openUserProfile()

Use for programmatic UI control (open modals, redirect, etc.).

useOrganization

import { useOrganization } from '@clerk/vue'

const { organization, membership, isLoaded } = useOrganization()

organization is Ref<Organization | null>. membership includes role.

useOrganizationList

import { useOrganizationList } from '@clerk/vue'

const { userMemberships, setActive } = useOrganizationList()

userMemberships.data is an array of memberships. Call setActive({ organization: id }) to switch.

useSignIn / useSignUp

import { useSignIn } from '@clerk/vue'

const { signIn, setActive, isLoaded } = useSignIn()

async function submit(email: string, password: string) {
  const result = await signIn.value!.create({
    identifier: email,
    password,
  })
  if (result.status === 'complete') {
    await setActive.value!({ session: result.createdSessionId })
  }
}

CRITICAL

• All composables return refs — access values with .value outside of templates
• Check isLoaded before rendering auth-gated UI to prevent flashes
• useOrganizationList returns userMemberships as a paginated resource — access .data for the array