Vue UIKit chat components

Vue UIKit is a standalone Vue 3 component library on top of @deeprespond/im-web and @deeprespond/im-web-vue. You can compose conversations, chat windows, friends and groups on your pages, or embed the complete ChatApp. It doesn't depend on React at runtime: the Vue bindings handle subscriptions and lifecycle, and UIKit handles interaction and styles.

The current version is 1.1.1, published to public npm. You can also build a local tgz from source, and the repository has a development example. Vue 3.3 and later are supported (tested with Vue 3.5.43). The UI coverage matches React UIKit and doesn't include audio and video calls, chat rooms, standalone channels or complex forwarding.

Build and install

Node.js >= 20.19 (Node 22 recommended) and pnpm 9. Install directly in your project (your project provides Vue 3):

pnpm add vue@^3.3 @deeprespond/im-web@1.1.1 @deeprespond/im-web-vue@1.1.1 @deeprespond/im-web-vue-uikit@1.1.1

Pin the versions.

To build locally, run from the repository root:

pnpm --dir sdk/web install
pnpm --dir sdk/web build
pnpm --dir sdk/web-vue install
pnpm --dir sdk/web-vue build
pnpm --dir sdk/web-vue-uikit install
pnpm --dir sdk/web-vue-uikit pack --pack-destination /tmp/vue-uikit-package

Then install the core package, the Vue bindings and the local component package in your project:

pnpm add vue@^3.3 @deeprespond/im-web@1.1.1 @deeprespond/im-web-vue@1.1.1
pnpm add /tmp/vue-uikit-package/deeprespond-im-web-vue-uikit-1.1.1.tgz

The component package is compiled to ESM with type declarations for its SFCs, so there's no need to copy example source. Import the styles separately.

Minimal setup

<script setup lang="ts">
import { onBeforeUnmount } from 'vue';
import { createDRClient } from '@deeprespond/im-web';
import { UIKitProvider, ChatApp } from '@deeprespond/im-web-vue-uikit';
import '@deeprespond/im-web-vue-uikit/styles.css';

const client = createDRClient({
  appKey: 'your-org#your-app',
  apiUrl: 'https://your-im-api.example.com',
  autoMarkRead: true,
});
// 在业务登录流程中取得短期 Ticket，再调用并捕获失败：
// await client.auth.loginWithTicket({ ticket });
onBeforeUnmount(() => { void client.destroy(); });
</script>

<template>
  <section style="height: 640px">
    <UIKitProvider :client="client" theme="light">
      <ChatApp @logout="client.auth.logout()" />
    </UIKitProvider>
  </section>
</template>

• Your app creates and manages the client. Unmounting UIKit never signs out or destroys the client.
• UIKitProvider already provides the Vue bindings to its components, so you don't need to install createDRPlugin again; it also leaves any Vue bindings plugin your app already installed untouched.
• When the client changes or a different user signs in, the UI is rebuilt from scratch, so nothing from the previous user's messages, drafts or notifications is left behind.

LoginPanel only offers ticket sign-in by default; allowPassword and allowRegistration add password sign-in and registration. In production, have your own server issue tickets, and never put the App Secret in the browser.

For Nuxt and other server-rendered apps, create the client in a browser-side lifecycle hook (you can wrap it in <ClientOnly>), and never share one client across server requests. Importing the package in Node has been tested, but it hasn't been tested in a Nuxt project yet.

Composable components

Component	Purpose / events
UIKitProvider / useUIKit	Per-instance client, theme, feature switches, Chinese error messages and notifications
ChatApp	The full UI; v-model:conversation-key, @conversation-change, @logout; header / empty / signed-out slots
ChatWindow	conversationKey, optional conversation, @close
ConversationList	currentKey, @open(key, conversation)
ContactList	Friends, requests, remarks, blocklist; @open-peer(username)
GroupList / GroupMembers	Creating groups, members, roles, inviting, removing, leaving and dissolving; @open-group / @open-peer / @close
MessageBubble	Controlled display; message, conversation, renderBody, @resend
MessageComposer	v-model, @send, attachment and voice events; recording, quoting, disabled state
LoginPanel / ConnectionBanner	Sign-in and connection status
Avatar / Modal / Spinner	Basic UI; Modal manages focus and nested Escape, with default and footer slots

Without conversationKey, ChatApp manages the selected conversation itself; once you pass it, you're in control, and null means no selection. When a draft conversation becomes a real one, the new conversation key is reported. The input area (MessageComposer) doesn't send messages itself: handle events such as @send and @file(file, kind) and call the SDK.

Themes, features and message customization

• Themes. The Provider supports theme="dark". Themes are set through CSS variables inside the component and never touch the page's html, body, localStorage or theme settings. Several Providers on one page are independent, but don't nest them. Give the container an explicit height; below 760px wide it switches to a single column with a back button.
• Feature switches. features can turn off images, files and voice. readOnly and readOnlyReason disable input, attachments and recording. That's only a UI restriction: it doesn't replace the server's permission checks and doesn't block other friend or group actions. Owners and regular members see different management options, and reactions appear according to the app's policies.
• Custom messages. renderMessage(message) returns a Vue VNode to customize message content; returning undefined uses the built-in display. When using MessageBubble on its own, pass renderBody. Text is escaped by Vue by default and only HTTP(S) links are recognized; images, voice and files are downloaded through the SDK with authentication.
• Errors. formatError customizes error text, and onError(error, action) can feed your monitoring.

Example and testing

pnpm --dir sdk/web-vue-uikit/demo install
pnpm --dir sdk/web-vue-uikit/demo dev

The example runs at http://127.0.0.1:5199. Configure it with the environment variables VITE_IM_APPKEY and VITE_IM_APIURL, or pass URL-encoded appKey and apiUrl parameters. In development, the example loads the component source straight from the repository.

Tested environments: Vue 3.5 in the browser against a real IM server, covering two users messaging each other and send failures, with screenshots checked at desktop and narrow widths. Not yet tested: other browsers, other Vue versions, real voice recording, and performance with very many messages; verify in your target environments before going live. Detailed results are in the repository's test report directory Agent测试/VueUIKit/20261022/; the component's README has the full props, startup and test scripts.