---
title: "@vonvon-kit/nuxt"
description: "Nuxt-3-Modul mit H3/Nitro-Server-Middleware und automatisch importiertenVue-Composables für SSR- und Full-Stack-Anwendungen."
locale: "de"
---

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

# @vonvon-kit/nuxt

## Zustand

Registry-Status: UNPUBLISHED. Installieren Sie dieses SDK nur aus einem Checkout des Repository-Quellcodes; verwenden Sie keine externe Paket-Registry.

Paketstatus: **Aktuelles Paket**. Das Nuxt-Modul, dieH3/Nitro-Server-Middleware und automatisch importierte Composables sindimplementiert. Ein echter IdP-Round-Trip auf Produktionsinfrastruktursteht noch manuell aus.

## Modul-Einrichtung

Fügen Sie `@vonvon-kit/nuxt` dem `modules`-Array hinzu. Das Modulimportiert alle [@vonvon-kit/vue](/de/sdks/vue)-Composables automatisch undregistriert ein rein clientseitiges Plugin, das `VonvonPlugin`installiert.

```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',
},
  },
})
```

## Composables (automatisch importiert)

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

## Server-Middleware (JWT-Authentifizierung)

`createVonvonServerMiddleware` gibt einen H3-Handler zurück, der Bearer- oder explizite Anwendungs-JWTs prüft und `event.context.vonvonAuth` schreibt. Core-Sitzungen mit gleicher Origin werden über `sessionTokenExchange` konfiguriert; relative H3-v1-URLs benötigen zusätzlich eine vertrauenswürdige `requestOrigin`. Legen Sie die Datei in `server/middleware/` ab, damit Nitro sie global registriert.

```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'],
})
```

## Auth in Server-Routen lesen

```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 }
})
```

## Exportierte API

| Exportieren | Art | Zweck |
| --- | --- | --- |
| `createVonvonServerMiddleware` | function | H3-Event-Handler-Factory: prüft JWT, schreibt event.context.vonvonAuth,schützt Routen |
| `getVonvonAuth` | function | AuthResult aus event.context.vonvonAuth in Server-Routen und Handlern lesen |
| `VONVON_AUTH_CONTEXT_KEY` | Zeichenkettenkonstante | Kontextschlüssel zum Speichern des Auth-Ergebnisses ('vonvonAuth') |
| `VonvonServerMiddlewareOptions` | type | jwtKey, issuer, authorizedParties, jwtCookieName, sessionTokenExchange, requestOrigin, protectedRoutes, onUnauthenticated |

## Sicherheitshinweise

- `event.context.vonvonAuth` ist ausschließlich serverseitig und wird niean den Browser gesendet.
- Die Middleware entfernt alle vom Client bereitgestellten Auth-Tokens undinjiziert nur das verifizierte Ergebnis neu.
- Legen Sie die Middleware-Datei in `server/middleware/` ab, damit sieals globale Nitro-Middleware alle Routen abdeckt.

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