---
title: "@vonvon-kit/vue"
description: "Vue 3 プラグイン、コンポーザブル、@vonvon-kit/core 上のヘッドレスコンポーネントをサポート。"
locale: "ja"
---

> Documentation Index
> Fetch the relevant documentation index at: https://vonvon.id/ja/sdks/llms.txt
> Use this file to discover all available pages before exploring further.

# @vonvon-kit/vue

## 状態

Registry 状態: UNPUBLISHED。この SDK はリポジトリのソース checkout からのみインストールし、外部 package registry は使用しないでください。

パッケージステータス：**現行パッケージ**。Vue 3 プラグイン、コンポーザブル、ヘッドレスコンポーネントが実装済みです。本番インフラでの実際の IdP ラウンドトリップはまだ手動検証待ちです。

## プラグインセットアップ

`main.ts` で `VonvonPlugin` を一度登録します。`VonvonClient` シングルトンを作成し、`VONVON_INJECTION_KEY` 経由で提供し、セッション状態を水和するために `client.load()` を呼び出します。

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

## コンポーザブル

```ts
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()
```

## コンポーネント

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

| エクスポート | 種別 | 目的 |
| --- | --- | --- |
| `VonvonPlugin` | Vue プラグイン | app.use エントリーポイント。VonvonClient を登録し client.load() を呼び出します |
| `createVonvonClient` | function | スタンドアロン VonvonClient インスタンスを返すファクトリー |
| `useVonvonClient` | コンポーザブル | 注入された VonvonClient を返します。プラグインが登録されていない場合はスローします |
| `VONVON_INJECTION_KEY` | InjectionKey | VonvonClient シングルトンを提供・注入するためのシンボル |
| `useVonvon` | コンポーザブル | フルステート ref と全クライアントアクション（UseVonvonReturn） |
| `useAuth` | コンポーザブル | isLoaded, isSignedIn, userId, getToken, signOut |
| `useUser` | コンポーザブル | isLoaded / isSignedIn / user の判別ユニオンをラップする Ref |
| `useOrganization` | コンポーザブル | アクティブ組織、メンバーシップ、setActive アクション |
| `useSession` | コンポーザブル | アクティブセッションと getToken アクション |
| `SignInButton` | コンポーネント | クリック時にサインイン URL へリダイレクトするヘッドレスボタン |
| `SignOutButton` | コンポーネント | クリック時に client.signOut() を呼び出すヘッドレスボタン |
| `Protect` | コンポーネント | デフォルトスロットとフォールバックスロットを持つスロットベースのロールと権限ゲート |

Source: https://vonvon.id/ja/sdks/vue/index.mdx