Clerk Vue 3 Patterns (Composables, Router Guards, Pinia)

Was macht Clerk Vue 3 Patterns (Composables, Router Guards, Pinia)?

Vue 3 Patterns mit Clerk – Composables (useAuth, useUser, useClerk, useOrganization), Vue Router Guards, Pinia Auth Store Integration. Auslöser: vue clerk, useAuth vue, clerk composables, vue router clerk guard, pinia auth clerk. Für Nuxt bitte clerk-nuxt-patterns verwenden.

Grundlegende Composables

useAuth

import { useAuth } from '@clerk/vue'

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

useUser

import { useUser } from '@clerk/vue'

const { user } = useUser()

useClerk

import { useClerk } from '@clerk/vue'

const { signOut, openSignIn, openSignUp } = useClerk()

useOrganization

import { useOrganization } from '@clerk/vue'

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

Vue Router Guards

Geschützte Routen mit beforeEach

import { createRouter, createWebHistory } from 'vue-router'
import { useAuth } from '@clerk/vue'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/dashboard',
      component: DashboardPage,
      meta: { requiresAuth: true }
    }
  ]
})

router.beforeEach(async (to, from, next) => {
  if (to.meta.requiresAuth) {
    const { isSignedIn, isLoaded } = useAuth()
    await nextTick(() => {})
    if (!isSignedIn.value) {
      next('/sign-in')
    } else {
      next()
    }
  } else {
    next()
  }
})

Pinia Auth Store Integration

Store-Definition

// stores/auth.ts
import { defineStore } from 'pinia'
import { useAuth, useUser } from '@clerk/vue'

export const useAuthStore = defineStore('auth', () => {
  const clerkAuth = useAuth()
  const clerkUser = useUser()

  const isAuthenticated = computed(() => clerkAuth.isSignedIn.value)
  const currentUser = computed(() => clerkUser.user.value)

  async function refreshAuth() {
    await clerkAuth.reload()
    await clerkUser.reload()
  }

  return { isAuthenticated, currentUser, refreshAuth }
})

Verwendung in Komponenten

<script setup lang="ts">
import { useAuthStore } from '@/stores/auth'

const authStore = useAuthStore()
</script>

<template>
  <div v-if="authStore.isAuthenticated">
    Willkommen, {{ authStore.currentUser?.firstName }}!
  </div>
</template>

Hinweise

• Für Nuxt 3 Projekte verwenden Sie bitte clerk-nuxt-patterns.
• Stellen Sie sicher, dass <ClerkProvider> in Ihrer App-Komponente korrekt eingerichtet ist.
• Weitere Informationen finden Sie in der Clerk Vue Dokumentation.