---
title: "@vonvon-kit/nuxt"
description: "SSR およびフルスタックアプリ向けの H3/Nitro サーバーミドルウェアと自動インポート Vue コンポーザブルを備えた Nuxt 3 モジュール。"
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/nuxt

## 状態

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

パッケージステータス：**現行パッケージ**。Nuxt モジュール、H3/Nitro サーバーミドルウェア、自動インポートコンポーザブルが実装済みです。本番インフラでの実際の IdP ラウンドトリップはまだ手動検証待ちです。

## モジュールセットアップ

`modules` 配列に `@vonvon-kit/nuxt` を追加します。モジュールはすべての [@vonvon-kit/vue](/ja/sdks/vue) コンポーザブルを自動インポートし、`VonvonPlugin` をインストールするクライアント専用プラグインを登録します。

```ts
// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@vonvon-kit/nuxt'],
  vonvon: {
browser: {
  mode: 'oidc',
  issuer: 'https://vonvon.id',
  clientId: 'client_abc123',
  redirectUri: 'https://app.example.com/auth/callback',
},
  },
})
```

## コンポーザブル（自動インポート）

```vue
<script setup lang="ts">
// No import needed -- Nuxt auto-imports from @vonvon-kit/vue
const auth = useAuth()
const userRef = useUser()
const orgRef = useOrganization()
const sessionRef = useSession()
</script>

<template>
  <div v-if="auth.isSignedIn">
Signed in as {{ auth.userId }}
<button @click="auth.signOut()">Sign out</button>
  </div>
</template>
```

## サーバーミドルウェア（JWT 認証）

`createVonvonServerMiddleware` は Bearer または明示的なアプリケーション JWT を検証し、`event.context.vonvonAuth` に書き込む H3 ハンドラーを返します。同一オリジンの Core セッションは `sessionTokenExchange` で設定し、H3 v1 の相対 URL では信頼済みの `requestOrigin` も必要です。Nitro がグローバルミドルウェアとして登録するよう `server/middleware/` に配置してください。

```ts
// server/middleware/vonvon.ts
import { createVonvonServerMiddleware } from '@vonvon-kit/nuxt'

export default createVonvonServerMiddleware({
  jwtKey: JSON.parse(process.env.VONVON_JWKS_PUBLIC_KEY!),
  issuer: 'https://acme.vonvon.id',
  sessionTokenExchange: { endpoint: '/v1/sessions/token' },
  requestOrigin: process.env.VONVON_APP_ORIGIN!,
  protectedRoutes: ['/api/admin'],
})
```

## サーバールートでの認証読み取り

```ts
// server/routes/api/me.get.ts
import { getVonvonAuth } from '@vonvon-kit/nuxt'

export default defineEventHandler((event) => {
  const auth = getVonvonAuth(event)
  if (!auth.userId) {
throw createError({ statusCode: 401, message: 'Unauthorized' })
  }
  return { userId: auth.userId, orgId: auth.orgId }
})
```

## エクスポートされた API

| エクスポート | 種別 | 目的 |
| --- | --- | --- |
| `createVonvonServerMiddleware` | function | H3 イベントハンドラーファクトリー：JWT を検証し、event.context.vonvonAuth に書き込み、ルートを保護します |
| `getVonvonAuth` | function | サーバールートとハンドラーの event.context.vonvonAuth から AuthResult を読み取ります |
| `VONVON_AUTH_CONTEXT_KEY` | 文字列定数 | 認証結果を保存するコンテキストキー（'vonvonAuth'） |
| `VonvonServerMiddlewareOptions` | type | jwtKey, issuer, authorizedParties, jwtCookieName, sessionTokenExchange, requestOrigin, protectedRoutes, onUnauthenticated |

## セキュリティに関する注意事項

- `event.context.vonvonAuth` はサーバーサイド専用で、ブラウザには送信されません。
- ミドルウェアはクライアントが提供した認証トークンを取り除き、検証済みの結果のみを再注入します。
- すべてのルートをグローバル Nitro ミドルウェアとしてカバーするために、ミドルウェアファイルを `server/middleware/` に配置します。

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