Vue

@aparte/vue wraps @aparte/core for Vue 3.5+: an ergonomic <AparteChat> component, composables for state and the client, and a generic <AparteUi> escape hatch.

npm install @aparte/vue @aparte/core vue

@aparte/core and vue are peer dependencies.

<AparteChat> + useAparteChat

The useAparteChat composable owns the messages ref and the component ref, so you bind them and skip the manual @messages-change → messages round-trip:

<script setup lang="ts">
import { AparteChat, useAparteChat } from '@aparte/vue';
import '@aparte/core/styles.css';

const chat = useAparteChat();
</script>

<template>
  <AparteChat
    :ref="chat.chatRef"
    :messages="chat.messages.value"
    center-when-empty
    @messages-change="chat.onMessagesChange"
  >
    <template #empty-state><p>Ask me anything…</p></template>
  </AparteChat>
</template>

The user’s message is appended to the thread automatically on send — don’t add it yourself. @message-sent is optional and fires after that append, for side-effects only (scroll, analytics, a backend call).

Slots are named slots: empty-state, composer, above-composer, footer-left/center/right, and the scoped bubble slot (#bubble="{ message }") for a fully custom bubble. The imperative handle (chat.chatRef) exposes streaming, branch/edit and scrollToBottom — also available as plain methods straight off the chat object.

Wiring a real model

The wrapper is provider-agnostic. Register a provider + transport once (see Providers) and mount an AparteClient with useAparteClient — it bridges composer sends to the model:

<script setup lang="ts">
import { AparteConfig, DirectTransport } from '@aparte/core';
import { createOpenAICompatProvider, presets } from '@aparte/provider-openai-compat';
import { AparteChat, useAparteChat, useAparteClient } from '@aparte/vue';

AparteConfig.registerAIProvider(createOpenAICompatProvider(presets.OPENROUTER));
AparteConfig.setTransport(new DirectTransport({ byok: true }));

const chat = useAparteChat();
useAparteClient();           // streams replies from the configured provider
</script>

<template>
  <AparteChat :ref="chat.chatRef" :messages="chat.messages.value" @messages-change="chat.onMessagesChange" />
</template>

Pass a per-instance config prop to scope providers/transport to a single <AparteChat> instead of the global AparteConfig.

Note

useAparteClient accepts the full AparteClientOptions. To drive the chat with the standalone agent loop instead of core’s inline one, inject it: useAparteClient({ streamRunner: runStreamAgent }) from @aparte/engine — an optional swap-in, not required. File uploads work through the composer — see Attachments.

Any element: <AparteUi>

For an <aparte-*> element without a dedicated component, mount it generically. It forwards the interactive aparté events by default; pass :events to listen to others:

<script setup lang="ts">
import { AparteUi } from '@aparte/vue';
</script>

<template>
  <AparteUi
    name="aparte-model-selector"
    :props="{ placeholder: 'Ask…', '--glow-speed': '4s' }"
    @element-event="(e) => console.log(e.type, e.detail)"
  />
</template>

Also exported

• useConversationManager — Vue-reactive view over the core ConversationManager (list / create / archive), for a multi-conversation sidebar.