@vonvon-kit/vue

Estado

Status do registry: UNPUBLISHED. Instale este SDK somente a partir do checkout do código-fonte do repositório; não use um registry de pacotes externo.

O status do pacote é Pacote atual. Plugin Vue 3, composables ecomponentes headless estão implementados. Uma ida e volta real com oIdP em infraestrutura de produção ainda está pendente de verificaçãomanual.

Configuração do plugin

Registre VonvonPlugin uma vez em main.ts. Cria umsingleton VonvonClient, fornece-o via VONVON_INJECTION_KEY echama client.load() para hidratar o estado da sessão.

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

Componentes

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

Exportar	Tipo	Finalidade
`VonvonPlugin`	Plugin Vue	Ponto de entrada app.use; registra VonvonClient e chama client.load()
`createVonvonClient`	function	Factory que retorna uma instância standalone de VonvonClient
`useVonvonClient`	composable	Retorna o VonvonClient injetado; lança exceção se o plugin não estiverregistrado
`VONVON_INJECTION_KEY`	InjectionKey	Símbolo usado para fornecer e injetar o singleton VonvonClient
`useVonvon`	composable	Ref de estado completo mais todas as ações do cliente (UseVonvonReturn)
`useAuth`	composable	isLoaded, isSignedIn, userId, getToken, signOut
`useUser`	composable	Ref encapsulando união discriminada em isLoaded / isSignedIn / user
`useOrganization`	composable	Org ativa, membership e ação setActive
`useSession`	composable	Sessão ativa e ação getToken
`SignInButton`	componente	Botão headless que redireciona para a URL de login ao clicar
`SignOutButton`	componente	Botão headless que chama client.signOut() ao clicar
`Protect`	componente	Gate de papel e permissão baseado em slots, com slots padrão e defallback