Skip to content

@vonvon-kit/vue

Vue 3 plugin, composables, and headless components on top of @vonvon-kit/core.

Status

Registry status: UNPUBLISHED. Install this SDK only from the repository source checkout; do not use an external package registry.

Package status is Current package. Vue 3 plugin, composables, and headless components are implemented. A real IdP round-trip on production infrastructure is still pending manual verification.

Plugin setup

Register VonvonPlugin once in main.ts. It creates an VonvonClient singleton, provides it via VONVON_INJECTION_KEY, and calls client.load() to hydrate session state.

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

Components

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

Exported API

Export Kind Purpose
VonvonPlugin Vue plugin app.use entry point; registers VonvonClient and calls client.load()
createVonvonClient function Factory that returns a standalone VonvonClient instance
useVonvonClient composable Returns the injected VonvonClient; throws if plugin is not registered
VONVON_INJECTION_KEY InjectionKey Symbol used to provide and inject the VonvonClient singleton
useVonvon composable Full state ref plus all client actions (UseVonvonReturn)
useAuth composable isLoaded, isSignedIn, userId, getToken, signOut
useUser composable Ref wrapping discriminated union on isLoaded / isSignedIn / user
useOrganization composable Active org, membership, and setActive action
useSession composable Active session and getToken action
SignInButton component Headless button that redirects to the sign-in URL on click
SignOutButton component Headless button that calls client.signOut() on click
Protect component Slot-based role and permission gate with default and fallback slots
Navigation

Type to search...

Use arrow keys to navigateEnter to selectEscape to close