> ## Documentation Index
> Fetch the complete documentation index at: https://docs.kavachos.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Vue

> Register KavachOS auth in Vue 3 via createKavachPlugin. Provides useSession, useSignIn, useSignOut, and useUser composables for Vite, Nuxt, and Vue 3 setups.

`@kavachos/vue` provides Vue 3 composables and an app plugin for building auth UIs. It works with Vite, Nuxt, and any Vue 3 setup.

## Installation

```bash theme={"system"}
pnpm add @kavachos/vue
```

## Setup

Register the plugin in your Vue app:

```typescript title="main.ts" theme={"system"}
import { createApp } from 'vue';
import { createKavachPlugin } from '@kavachos/vue'; // [!code highlight]
import App from './App.vue';

const app = createApp(App);

app.use(createKavachPlugin({ // [!code highlight]
  basePath: '/api/kavach', // [!code highlight]
})); // [!code highlight]

app.mount('#app');
```

### Nuxt setup

In Nuxt, create a plugin file:

```typescript title="plugins/kavach.client.ts" theme={"system"}
import { createKavachPlugin } from '@kavachos/vue';

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(createKavachPlugin({
    basePath: '/api/kavach',
  }));
});
```

## useSession

Returns the current session state. Reactive, updates when the user signs in or out.

```vue title="components/NavBar.vue" theme={"system"}
<script setup lang="ts">
import { useSession } from '@kavachos/vue';

const { session, isLoading } = useSession();
</script>

<template>
  <nav>
    <span v-if="isLoading">Loading...</span>
    <span v-else-if="session">{{ session.user.name }}</span>
    <a v-else href="/sign-in">Sign in</a>
  </nav>
</template>
```

## useUser

Returns the current user object, or `null` if signed out.

```vue theme={"system"}
<script setup lang="ts">
import { useUser } from '@kavachos/vue';

const { user } = useUser();
</script>
```

## useSignIn / useSignUp / useSignOut

```vue title="pages/sign-in.vue" theme={"system"}
<script setup lang="ts">
import { useSignIn } from '@kavachos/vue';

const { signIn, isLoading, error } = useSignIn();

async function handleSubmit(email: string, password: string) {
  await signIn({ email, password });
  // Redirect on success. The composable does not navigate automatically.
}
</script>
```

```typescript title="Sign up" theme={"system"}
import { useSignUp } from '@kavachos/vue';

const { signUp, isLoading, error } = useSignUp();
await signUp({ email, password, name });
```

```typescript title="Sign out" theme={"system"}
import { useSignOut } from '@kavachos/vue';

const { signOut } = useSignOut();
await signOut();
```

## useAgents

Lists and manages agent identities for the current user.

```typescript theme={"system"}
import { useAgents } from '@kavachos/vue';

const { agents, createAgent, revokeAgent, isLoading } = useAgents();

// Create a new agent
await createAgent({ name: 'My AI assistant', permissions: ['read:data'] });
```

## Plugin configuration reference

<ParamField path="basePath" type="string" default="'/api/kavach'">Base path where your KavachOS handler is mounted.</ParamField>
<ParamField path="fetchOptions" type="RequestInit">Options passed to every internal fetch call (e.g. custom headers).</ParamField>