---
title: "@vonvon-kit/nuxt"
description: "Módulo Nuxt 3 con middleware de servidor H3/Nitro y composables Vue importados automáticamente para apps SSR y full-stack."
locale: "es"
---

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

# @vonvon-kit/nuxt

## Estado

Estado del registro: UNPUBLISHED. Instala este SDK únicamente desde el checkout del código fuente del repositorio; no uses un registro de paquetes externo.

El estado del paquete es **Paquete actual**. El módulo Nuxt, el middleware de servidor H3/Nitro y los composables importados automáticamente están implementados. Una prueba de ida y vuelta real contra un IdP en infraestructura de producción está pendiente de verificación manual.

## Configuración del módulo

Añade `@vonvon-kit/nuxt` al array `modules`. El módulo importa automáticamente todos los composables de [@vonvon-kit/vue](/es/sdks/vue) y registra un plugin solo de cliente que instala `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',
},
  },
})
```

## Composables (importados automáticamente)

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

## Middleware de servidor (autenticación JWT)

`createVonvonServerMiddleware` devuelve un manejador H3 que verifica un JWT Bearer o explícito de la aplicación y escribe `event.context.vonvonAuth`. Configura las sesiones Core del mismo origen mediante `sessionTokenExchange`; las URL relativas de H3 v1 también requieren un `requestOrigin` de confianza. Coloca el archivo en `server/middleware/` para que Nitro lo registre globalmente.

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

## Lectura de autenticación en rutas del servidor

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

| Exportar | Tipo | Propósito |
| --- | --- | --- |
| `createVonvonServerMiddleware` | function | Fábrica de manejadores de eventos H3: verifica el JWT, escribe event.context.vonvonAuth y protege rutas |
| `getVonvonAuth` | function | Lee AuthResult de event.context.vonvonAuth en rutas y manejadores del servidor |
| `VONVON_AUTH_CONTEXT_KEY` | constante de cadena | Clave de contexto usada para almacenar el resultado de autenticación ('vonvonAuth') |
| `VonvonServerMiddlewareOptions` | type | jwtKey, issuer, authorizedParties, jwtCookieName, sessionTokenExchange, requestOrigin, protectedRoutes, onUnauthenticated |

## Notas de seguridad

- `event.context.vonvonAuth` es exclusivo del servidor y nunca se envía al navegador.
- El middleware elimina cualquier token de autenticación proporcionado por el cliente y solo reinyecta el resultado verificado.
- Coloca el archivo de middleware en `server/middleware/` para garantizar que cubra todas las rutas como middleware global de Nitro.

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