---
title: "@xid-kit/vue"
description: "Plugin de Vue 3, composables y componentes headless sobre @xid-kit/core."
locale: "es"
---

> Documentation Index
> Fetch the locale documentation index at: https://xid.dev/es/llms.txt
> Use this file to discover all available pages before exploring further.

# @xid-kit/vue

## Estado

El estado del paquete es **Paquete actual**. El plugin de Vue 3, los composables y los componentes headless 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 plugin

Registra `XidPlugin` una sola vez en `main.ts`. Crea un singleton `XidClient`, lo proporciona mediante `XID_INJECTION_KEY` y llama a `client.load()` para hidratar el estado de sesión.

```ts
// main.ts
import { createApp } from 'vue'
import { XidPlugin } from '@xid-kit/vue'
import App from './App.vue'

const app = createApp(App)
app.use(XidPlugin, { apiUrl: 'https://your-tenant.xid.dev' })
app.mount('#app')
```

## Composables

```ts
import { useAuth, useUser, useOrganization, useSession } from '@xid-kit/vue'

const auth = useAuth()
// auth.isLoaded / auth.isSignedIn / auth.userId
// auth.getToken()  -> Promise<Result<string, XidError>>
// auth.signOut()   -> Promise<Result<null, XidError>>

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

```vue
<template>
  <SignInButton sign-in-url="/sign-in" redirect-url="/dashboard">Log in</SignInButton>
  <SignOutButton redirect-url="/">Log out</SignOutButton>

  <Protect role="org: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 '@xid-kit/vue'
</script>
```

## API exportada

| Exportar | Tipo | Propósito |
| --- | --- | --- |
| `XidPlugin` | Plugin de Vue | Punto de entrada app.use; registra XidClient y llama a client.load() |
| `createXidClient` | function | Fábrica que devuelve una instancia standalone de XidClient |
| `useXidClient` | composable | Devuelve el XidClient inyectado; lanza excepción si el plugin no está registrado |
| `XID_INJECTION_KEY` | InjectionKey | Símbolo usado para proveer e inyectar el singleton de XidClient |
| `useXid` | composable | Ref de estado completo más todas las acciones del cliente (UseXidReturn) |
| `useAuth` | composable | isLoaded, isSignedIn, userId, getToken, signOut |
| `useUser` | composable | Ref que envuelve una unión discriminada sobre isLoaded / isSignedIn / user |
| `useOrganization` | composable | Org activa, membresía y acción setActive |
| `useSession` | composable | Sesión activa y acción getToken |
| `SignInButton` | componente | Botón headless que redirige a la URL de inicio de sesión al hacer clic |
| `SignOutButton` | componente | Botón headless que llama a client.signOut() al hacer clic |
| `Protect` | componente | Barrera de rol y permiso basada en slots con slots por defecto y de reserva |

Source: https://xid.dev/es/sdks/vue/index.mdx