@vonvon-kit/vue

Plugin Vue 3, composables et composants headless construits sur@vonvon-kit/core.

Statut

Statut du registre : UNPUBLISHED. Installez ce SDK uniquement depuis un checkout du code source du dépôt ; n’utilisez pas de registre de paquets externe.

Le statut du package est Package actuel. Le plugin Vue 3, lescomposables et les composants headless sont implémentés. Un aller-retourréel avec un IdP sur une infrastructure de production est en attente devérification manuelle.

Configuration du plugin

Enregistrez VonvonPlugin une seule fois dans main.ts. Il créeun singleton VonvonClient, le fournit via VONVON_INJECTION_KEY etappelle client.load() pour hydrater l’état de session.

// main.ts
import { createApp } from 'vue'
import { VonvonPlugin } from '@vonvon-kit/vue'
import App from './App.vue'

const app = createApp(App)
// This setup requires Core routes on the Vue application's exact origin.
app.use(VonvonPlugin, { mode: 'same-origin' })
app.mount('#app')

Composables

import { useAuth, useUser, useOrganization, useSession } from '@vonvon-kit/vue'

const auth = useAuth()
// auth.isLoaded / auth.isSignedIn / auth.userId
// auth.getToken()  -> Promise<Result<string, VonvonError>>
// auth.signOut()   -> Promise<Result<null, VonvonError>>

const userRef = useUser()
// userRef.value.isLoaded && userRef.value.isSignedIn -> userRef.value.user.id

const orgRef = useOrganization()
// orgRef.value.organization / orgRef.value.membership / orgRef.value.setActive()

const sessionRef = useSession()
// sessionRef.value.session / sessionRef.value.getToken()

Composants

<template>
  <SignInButton sign-in-url="/sign-in" redirect-url="/dashboard">Log in</SignInButton>
  <SignOutButton redirect-url="/">Log out</SignOutButton>

  <Protect role="admin">
    <AdminPanel />
    <template #fallback><p>Access denied.</p></template>
  </Protect>

  <Protect permission="org:member:read">
    <MemberList />
  </Protect>
</template>

<script setup lang="ts">
import { SignInButton, SignOutButton, Protect } from '@vonvon-kit/vue'
</script>

API exportée

Exporter	Type	Objectif
`VonvonPlugin`	Plugin Vue	Point d’entrée app.use ; enregistre VonvonClient et appelle client.load()
`createVonvonClient`	function	Fabrique retournant une instance VonvonClient autonome
`useVonvonClient`	composable	Retourne le VonvonClient injecté ; lève une exception si le plugin n’est pasenregistré
`VONVON_INJECTION_KEY`	InjectionKey	Symbole utilisé pour fournir et injecter le singleton VonvonClient
`useVonvon`	composable	Référence d’état complète plus toutes les actions client (UseVonvonReturn)
`useAuth`	composable	isLoaded, isSignedIn, userId, getToken, signOut
`useUser`	composable	Ref encapsulant une union discriminante sur isLoaded / isSignedIn / user
`useOrganization`	composable	Organisation active, appartenance et action setActive
`useSession`	composable	Session active et action getToken
`SignInButton`	composant	Bouton headless qui redirige vers l’URL de connexion au clic
`SignOutButton`	composant	Bouton headless qui appelle client.signOut() au clic
`Protect`	composant	Portail de rôle et de permission basé sur les slots avec slots par défautet de secours