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

# Installation

> Add the Gatelit Vue SDK to your Vue 3 or Nuxt application.

The `@gatelit/sdk-vue` package provides a single composable — `useGatelit` — that wraps the Gatelit JS SDK with Vue 3 reactivity. Streaming, abort control, and error state are handled automatically; you only need to bind the returned refs in your template.

## Prerequisites

* Vue 3.5 or later
* `@gatelit/sdk` (peer dependency — installed alongside the Vue SDK)

## Install

<CodeGroup>
  ```bash npm theme={null}
  npm install @gatelit/sdk-vue @gatelit/sdk
  ```

  ```bash pnpm theme={null}
  pnpm add @gatelit/sdk-vue @gatelit/sdk
  ```

  ```bash yarn theme={null}
  yarn add @gatelit/sdk-vue @gatelit/sdk
  ```
</CodeGroup>

## Quick start

The example below shows a minimal chat interface. `useGatelit` connects to your gateway, and the returned `messages`, `isStreaming`, and `error` refs update reactively as each chunk arrives.

```vue theme={null}
<script setup>
import { useGatelit } from "@gatelit/sdk-vue"

const { messages, isStreaming, error, send, stop } = useGatelit({
  gatewayUrl: "https://gateway.yourapp.com",
  getToken: async () => {
    const res = await $fetch("/api/ai-token")
    return { token: res.token, scheme: "GatelitSigned" }
  }
})
</script>

<template>
  <div v-for="msg in messages" :key="msg.id">
    {{ msg.content }}
  </div>
  <button @click="send('Hello', 'openai/gpt-4o')">
    Send
  </button>
  <button v-if="isStreaming" @click="stop">Stop</button>
</template>
```

<Note>
  You do not need to manage streaming state, an `AbortController`, or error
  cleanup yourself. `useGatelit` handles all of these internally. The assistant
  message's `content` grows in real time as each chunk arrives.
</Note>

## Next steps

See the [`useGatelit` reference](/sdk-vue/use-gatelit) for the full API — all returned refs, function signatures, and advanced usage patterns including Nuxt.