@tencentcloud/chat-uikit-vue3

关于 chat-uikit-vue3

chat-uikit-vue3 是基于腾讯云 Web Chat SDK 的一款 VUE UI 组件库，它提供了一些通用的 UI 组件，包含会话、聊天、音视频通话、关系链、资料、群组等功能。基于 UI 组件您可以像搭积木一样快速搭建起自己的业务逻辑。 chat-uikit-vue3 中的组件在实现 UI 功能的同时，会调用 Chat SDK 相应的接口实现 IM 相关逻辑和数据的处理，因而开发者在使用 chat-uikit-vue3 时只需关注自身业务或个性化扩展即可。

为尊重表情设计版权，chat-uikit-vue3 工程中不包含大表情元素切图，正式上线商用前请您替换为自己设计或拥有版权的其他表情包。默认的小黄脸表情包版权归腾讯云所有，可有偿授权使用，如您希望获得授权可 提交工单 联系我们。

联系我们: 点击提交工单

🚀 推荐：使用更高效的 AI 集成助手

我们为您提供了全新的 AI 集成方式，只需要简单描述您的需求，即可自动生成集成代码，大幅提升开发效率。
点击这里，立即体验 AI 集成

✨ 特性

• 🚀 开箱即用 - 集成腾讯云 IM SDK，快速构建聊天应用
• 🎨 主题定制 - 支持深浅色主题和自定义样式
• 📱 响应式设计 - 完美适配桌面端和移动端
• 🔧 模块化组件 - 可按需使用独立组件或完整套件
• 🎯 TypeScript - 完整的类型定义和智能提示
• ⚡ 性能优化 - 虚拟滚动、懒加载等性能优化
• 🌍 国际化 - 内置中英文支持，自动识别环境

📦 安装

# 使用 npm
npm install @tencentcloud/chat-uikit-vue3

# 使用 yarn
yarn add @tencentcloud/chat-uikit-vue3

# 使用 pnpm
pnpm add @tencentcloud/chat-uikit-vue3

🔧 组件列表

核心组件

• ConversationList - 会话列表
• Chat - 聊天容器
• ChatHeader - 聊天头部
• MessageList - 消息列表
• MessageInput - 消息输入框
• ContactList - 联系人列表
• ContactInfo - 联系人详情
• ChatSetting - 聊天设置
• Search - 搜索

🛠️ 环境要求

• Vue 3.x
• TypeScript 4.x+
• Node.js 16.x+

🚀 快速开始

1. 引入组件库

<template>
  <UIKitProvider>
    <div class="chat-layout">
      <ConversationList style="width: 300px;" />
      <Chat style="flex: 1;">
        <ChatHeader />
        <MessageList />
        <MessageInput />
      </Chat>
    </div>
  </UIKitProvider>
</template>

<script setup lang="ts">
import {
  ConversationList,
  Chat,
  MessageList,
  MessageInput,
  ChatHeader,
  UIKitProvider,
} from '@tencentcloud/chat-uikit-vue3';
</script>

<style scoped>
.chat-layout {
  height: 100vh;
  display: flex;
}
</style>

2. 登录 Chat

// main.ts
import { useLoginState } from '@tencentcloud/chat-uikit-vue3';

const { login } = useLoginState();
login({
  sdkAppId: 0,
  userId: '',
  userSig: '',
  useUploadPlugin: true,
});

初始化登录参数 options 配置说明：

🆘 技术支持

• 📖 官方文档
• 💬 技术交流群