Installation

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

npm install @gatelit/sdk-vue @gatelit/sdk

pnpm add @gatelit/sdk-vue @gatelit/sdk

yarn add @gatelit/sdk-vue @gatelit/sdk

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.

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

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.

Next steps

See the useGatelit reference for the full API — all returned refs, function signatures, and advanced usage patterns including Nuxt.

Conversation

useGatelit

JavaScript SDK

Vue SDK

Gateway API

Prerequisites

Install

Quick start

Next steps

​Prerequisites

​Install

​Quick start

​Next steps

Prerequisites

Install

Quick start

Next steps