文档反馈官招募中，报名立赚积分兑换代金券！> HOT
文档中心>即时通信 IM>聊天互动（含 UI）>全功能接入>桌面端>Vue3

Vue3

最近更新时间：2025-11-14 10:28:22

我的收藏

本页目录：

chat-uikit-vue3 是基于腾讯云 Chat SDK 的一款 vue3 UI 组件库，它提供了一些通用的 UI 组件，包含会话、聊天、群组等功能。本文介绍如何快速集成 TUIKit 并实现核心功能。
推荐使用更高效的 AI 集成助手
我们为您提供了全新的 AI 集成方式，只需要简单描述您的需求，即可自动生成集成代码，大幅提升开发效率。


关键概念

chat-uikit-vue3 主要分为 ConversationList、Chat、MessageList、ChatHeader、MessageInput、ChatSetting、Search、Contact 等核心 UI 组件，每个 UI 组件负责展示不同的内容。
1. ConversationList 提供会话列表组件。
2. Chat 提供会话的容器组件。
3. MessageList 提供会话的消息列表组件。
4. ChatHeader 提供会话的头部信息组件。
5. MessageInput 提供输入框组件。
6. ChatSetting 提供单聊和群聊的管理组件。
7. Search 提供云端搜索组件。
8. Contact 提供联系人组件。

前提条件

Vue.js@^3.0.0
TypeScript@^5.0.0
Node.js（Node.js ≥ 20.0.0，建议使用目前的 LTS v22 版本）

创建项目

使用 Vite 创建一个新的名称为 chat-example 的 Vue3 项目。
说明：
高版本 Vite 需要使用最新的 Node.js 版本。
npm create vite@latest


下载并导入组件

创建项目完成后，切换到项目所在目录。
cd chat-example
npm install

步骤1： 安装依赖

npm i @tencentcloud/chat-uikit-vue3

步骤 2. 引入组件

注意：
以下代码中未填入 SDKAppID、userID 和 userSig，需在 步骤3 中获取相关信息后进行替换。
为了尊重版权，下图所示的默认小黄脸表情包版权属于腾讯云，您可以通过升级至 IM 企业版套餐 免费使用该表情包。



例如：在 App.vue 页面中写入以下代码，即可快速搭建聊天界面：
<template>
  <UIKitProvider language="zh-CN">
    <div class="chat-layout">
      <div class="sidebar" style="width: 300px;">
        <div class="tab-header">
          <button 
            :class="['tab-button', { active: activeTab === 'conversations' }]"
            @click="activeTab = 'conversations'"
          >
            会话
          </button>
          <button 
            :class="['tab-button', { active: activeTab === 'contacts' }]"
            @click="activeTab = 'contacts'"
          >
            联系人
          </button>
        </div>
        
        <div class="tab-content">
          <ConversationList v-if="activeTab === 'conversations'" />
          <ContactList v-else />
        </div>
      </div>
      
      <Chat style="flex: 1;" v-if="activeTab === 'conversations'" :PlaceholderEmpty="emptyTpl">
        <ChatHeader />
        <MessageList />
        <MessageInput />
      </Chat>
      <ContactInfo v-else  style="flex: 1;"  @send-message="handleSendMessage" />
    </div>
  </UIKitProvider>
</template>

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

const { login } = useLoginState();
const activeTab = ref<'conversations' | 'contacts'>('conversations');
const { setActiveConversation } = useConversationListState();

login({
  sdkAppId : 0, // SDKAppID, number 类型
  userId: '', // UserID, string 类型
  userSig: '', // userSig, string 类型
})
.then(() => {
  // 您可以替换成其他已创建的 userID
  const userID = 'administrator';
  const conversationID = `C2C${userID}`;
  setActiveConversation(conversationID);
})
.catch((err) => {
  alert(err.message)
});

const handleSendMessage = () => {
  activeTab.value = 'conversations';
}

const emptyTpl = h(
  'div',
  { class: 'empty-chat' },
  [
    h('div', { class: 'empty-icon' }, '💬'),
    h('div', { class: 'empty-title' }, '暂无会话'),
    h('div', { class: 'empty-subtitle' }, '选择一个会话开始聊天'),
  ]
);
</script>

<style>
#app{margin:0;padding:40px;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);min-height:100vh;box-sizing:border-box;text-align:left;max-width:none;}
.chat-layout{width:calc(100vw - 80px);height:calc(100vh - 80px);margin:0 auto;display:flex;background:#fff;border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,0.25),0 0 0 1px rgba(0,0,0,0.06);overflow:hidden;backdrop-filter: blur(8px);}
.sidebar{display:flex;flex-direction:column;border-right:1px solid #e5e7eb;}
.tab-header{display:flex;border-bottom:1px solid #e5e7eb;}
.tab-button{flex:1;padding:12px 16px;background:none;border:none;cursor:pointer;font-size:14px;color:#6b7280;transition:all 0.2s;outline: none !important;}
.tab-button.active{color:#3b82f6;background-color:#eff6ff;border-bottom:2px solid #3b82f6;}
.tab-content{flex:1;overflow:hidden;}
img[alt="empty"]{display: none;}
.empty-chat{display:flex;flex:1;flex-direction:column;align-items:center;justify-content:center;height:100%;color:#adb5bd;gap:12px;text-align:center;border-left:1px solid rgba(0,0,0,0.08);}.empty-icon{font-size:64px;opacity:0.3;animation:float 3s ease-in-out infinite;}.empty-title{font-size:16px;font-weight:600;color:#6c757d;}.empty-subtitle{font-size:14px;color:#868e96;}
</style>

步骤3：获取 SDKAppID、userID 和 userSig

在上一步写入的代码中，填入登录信息 SDKAppID、userID 和 userSig。
参数
类型
说明
SDKAppID
Number
SDKAppID 是腾讯云 IM 客户应用的唯一标识。您可以在 即时通信 IM 控制台 创建新应用，获取 SDKAppID 。
说明：
SDKAppID 是腾讯云 IM 客户应用的唯一标识。我们建议每一个独立的 App 都申请一个新的 SDKAppID。不同 SDKAppID 之间的消息是天然隔离的，不能互通。
userID
String
用户的唯一标识符，由您定义，只能包含大小写字母（a-z，A-Z）、数字（0-9）、下划线和连字符。
userSig
String
用户登录即时通信 IM 的密码，其本质是对 UserID 等信息加密后得到的密文。
说明：
开发环境：快速跑通 Demo，可以通过 即时通信 IM 控制台 获取 UserSig。
生产环境：将 UserSig 的计算代码集成到您的服务端，并提供面向项目的接口， 正确的 UserSig 签发方式请参见 服务端生成 UserSig。
注意：
本文示例代码采用在即时通信 IM 控制台 获取 UserSig 的方案，该方法仅适合本地跑通功能调试。 正确的 UserSig 签发方式请参见服务端生成 UserSig。
SDKAppID：在 即时通信 IM 控制台 > 应用管理 单击创建新应用，获取 SDKAppID。

userID：单击 即时通信 IM 控制台 > 消息服务 Chat > 账号管理，切换至目标应用所在账号，您可以创建 2～3 个账号用于体验单聊、群聊的功能。

userSig：单击 即时通信 IM 控制台 > 开发工具 > UserSig生成校验，切换至目标应用所在账号，填写创建的 UserID，即可生成 UserSig。


运行和测试

使用以下命令运行项目
 npm run dev
注意：
1. 请确保 步骤3 代码中 SDKAppID、userID 和 userSig 均已成功替换，如未替换将会导致项目表现异常。
2. userID 和 userSig 为一一对应关系，具体参见 生成 UserSig。
3. 如遇到项目启动失败，请检查 开发环境要求 是否满足。

发送您的第一条消息

体验单聊功能：搜索好友并发送您的第一条消息



体验群聊功能：创建群聊并发送一条消息



常见问题

什么是 UserSig？

UserSig 是用户登录即时通信 IM 的密码，其本质是对 UserID 等信息加密后得到的密文。

如何生成 UserSig？

UserSig 签发方式是将 UserSig 的计算代码集成到您的服务端，并提供面向项目的接口，在需要 UserSig 时由您的项目向业务服务器发起请求获取动态 UserSig。更多详情请参见 服务端生成 UserSig。
注意：
本文示例代码采用在 即时通信 IM 控制台 获取 UserSig 的方案，该方法仅适合本地跑通功能调试。 正确的 UserSig 签发方式请参见 服务端生成 UserSig。

参考信息

官网文档：

自定义组件 - UIKitProvider
自定义组件 - Chat
自定义组件 - ChatHeader
自定义组件 - ConversationList
自定义组件 - MessageList
自定义组件 - MessageInput
自定义组件 - ChatSetting
自定义组件 - ContactList
自定义组件 - Search

NPM 包：

GitHub：

GitHub Demo

联系我们

如遇任何问题，可联系 官网售后 反馈，享有专业工程师的支持，解决您的难题。


中国站
目录