Motifs Vue

SDK : @clerk/vue v2+ (Vue 3). Pour Nuxt, utilise clerk-nuxt-patterns.

De quoi as-tu besoin ?

Modèle mental

Vue utilise les composables de @clerk/vue :

• useAuth() — isSignedIn, userId, signOut réactifs
• useUser() — objet user réactif
• useClerk() — instance Clerk complète pour les opérations avancées
• useOrganization() — organization, membership réactifs

Configuration

Vue (Simple)

// 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')

Utilisation des composables

<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>Bonjour {{ user?.firstName }}</p>
    <button @click="signOut()">Se déconnecter</button>
  </div>
  <SignInButton v-else />
</template>

Changement d'organisation

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

Pièges courants

Carte des imports

Voir aussi

• clerk-setup - Installation initiale de Clerk
• clerk-custom-ui - Flux personnalisés et apparence
• clerk-orgs - Organisations B2B

Docs

• SDK Vue