# @andco/sdk-vue

> Provider, composables y botón para Vue 3.


```bash
npm install @andco/sdk @andco/sdk-vue
```

## AndcoProvider

```vue
<AndcoProvider :client-options="clientOptions" :initial-session="initialSession">
  <RouterView />
</AndcoProvider>
```

| Prop | Qué es |
| --- | --- |
| `clientOptions` | opciones con las que el provider construye la instancia |
| `client` | una instancia que la aplicación ya tiene |
| `initialSession` | una sesión ya resuelta, para que el primer cuadro sea real |

Es un componente y no un plugin global a propósito. El plugin construía el mismo contexto con el mismo código, pero hacía imposible tener varias instancias y dejaba estado global vivo después de desmontar.

## useAndcoSession

```ts
useAndcoSession(): Ref<AndcoSession | null | undefined>
```

Un `ref` con los tres estados: `undefined` sin resolver, `null` sin sesión, o la sesión. Cambia en **cada** republicación, incluida una rotación silenciosa de token — a diferencia de `useAndco`, que deliberadamente no cambia en ese caso. Úsalo cuando necesites la credencial como dato, por ejemplo una expiración.

```vue
<p v-if="session === undefined">Cargando…</p>
<p v-else-if="session">{{ session.user.email }}</p>
<p v-else>Sin sesión</p>
```

## useAndcoUser

```ts
useAndcoUser(): ComputedRef<AndcoUser | null | undefined>
```

Comparte los tres estados de la sesión, pero cambia solo cuando cambia la persona — identificador, nombre, correo o avatar — nunca por un Grant ampliado ni por una rotación de token.

## useAndco

```ts
useAndco(): AndcoVueClient
```

Un objeto de *getters* — `andco.rest`, `andco.auth`, `andco.session` y el resto se leen en vivo, sin `.value`. Deliberadamente **no** es un `ref`: por eso `watch(andco, cb)` nunca dispara, no hay nada que Vue pueda comparar. Observa `andco.identity` en su lugar — la única propiedad que cambia exactamente cuando cambia la Identidad Autorizada (inicio de sesión, cierre de sesión, un Grant ampliado) y se mantiene igual ante una rotación de token:

```ts
const andco = useAndco();
watch(() => andco.identity, () => void loadAccounts());
```

`andco.rest`, `andco.intents`, `andco.auth` y `andco.session` son el mismo objeto antes y después de iniciar sesión — solo cambian las credenciales detrás — así que nada memorizado contra esas referencias se invalida.

## useAndcoAuthed

```ts
useAndcoAuthed(): AndcoVueAuthedClient
```

La misma forma de *getters*, para el camino "hacer esto solo si hay sesión": `isAuthed` e `identity` siempre devuelven valores reales, pero el resto de propiedades —`rest`, `intents`, `auth`, `session`, `config`, `accessTokenFor`— leen `null` mientras no hay Identidad Autorizada, en vez de lanzar o forzar un cast.

## AndcoVueKey

La clave de inyección, exportada para los casos en que necesitas proveer la instancia tú mismo en vez de usar el componente.

```ts
import { AndcoVueKey } from "@andco/sdk-vue";
provide(AndcoVueKey, { client, session });
```

## AndcoButton y AndcoIntentButton

```vue
<AndcoButton
  :authorization="{ scopes: ['openid', 'email'] }"
  @ready="onReady"
  @activate="onActivate"
  @complete="onComplete"
  @dismiss="onDismiss"
  @error="onError"
/>
```

Las props son las mismas que en React: `authorization`, `flow`, `busy`, `disabled`, `themeMode`, `locale`, `release`. Los callbacks son eventos de Vue en vez de props `on*`, que es la convención del framework.

No acepta endpoints, `clientId` ni tema: eso viene de la instancia.

## Con Nuxt

El provider toca `window`, así que va dentro de `<ClientOnly>` o recibe `initialSession` desde el servidor para que el primer cuadro no sea un estado sin resolver.