Setting the file. One moment.
Chapter 19 · Clerk Vue Patterns
Subchapter 19.2
references/pinia-integration.mdMarkdown1 KBView on GitHub
// stores/auth.ts
import { defineStore } from 'pinia'
import { useAuth, useUser } from '@clerk/vue'
export const useAuthStore = defineStore('auth', () => {
const { isSignedIn, isLoaded, userId, signOut, getToken } = useAuth()
const { user } = useUser()
return {
isSignedIn,
isLoaded,
userId,
user,
signOut,
getToken,
}
})Usage in components:
<script setup lang="ts">
import { useAuthStore } from '@/stores/auth'
const auth = useAuthStore()
</script>
<template>
<p v-if="auth.isSignedIn">{{ auth.user?.firstName }}</p>
</template>// stores/org.ts
import { defineStore } from 'pinia'
import { useOrganization, useOrganizationList } from '@clerk/vue'
export const useOrgStore = defineStore('org', () => {
const { organization, membership } = useOrganization()
const { userMemberships, setActive } = useOrganizationList()
function switchOrg(orgId: string) {
return setActive.value!({ organization: orgId })
}
return {
organization,
membership,
userMemberships,
switchOrg,
}
})userId into Pinia state manually — it creates a stale copy. Always return refs directly from composablessetup() function runs inside Vue’s setup context — composables work correctly here