Docs Overview/
Web（Vue）/

Web（Vue）

Applicable Scenario

Web & H5 platform, enabling independent integration of private messaging (1V1) or group chat (Group), such as real estate consultations, e-commerce customer service, and remote insurance claims assessment.




Environment Requirements

Vue (Comprehensively supports both Vue2 & Vue3. Please select the Vue version guide that matches your needs for integration below)
TypeScript (If you have a JS project, please refer to How to Integrate TUIKit Components in a JS Project for progressive support for TS)
Sass (sass-loader version ≤ 10.1.1)
node(node.js ≥ 16.0.0)
npm (use a version that matches the Node version in use)

Integration Guide

Follow the steps in Integrating TUIKit. After completing these steps, you need to configure TUIChat as follows.

Integrate <TUIChat>

Import the TUIChat component on the page where it is needed.
For example, implement the following code in App.vue to quickly set up the chat interface and initiate a specified session:
Note:
conversationID:Session ID. The composition of the Session ID is as follows:
C2C${userID} (for one-on-one chats), for example C2C123456
GROUP${groupID} (for group chats), for example GROUP123456
<template>
  <div id="app">
    <TUIKit
      :SDKAppID="0"
      userID="YOUR_USERID"
      userSig="YOUR_USERSIG"
      conversationID="YOUR_CONVERSATIONID"
      :style="{ width: '500px', height: '800px', margin: '0 auto', boxShadow: '0 11px 20px #ccc' }"
    >
      <TUIChat><h1>Welcome to Tencent Cloud Chat</h1></TUIChat>
    </TUIKit>
  </div>
</template>
<script lang="ts" setup>
import { TUIKit, TUIChat } from "./TUIKit";
</script>
<style lang="scss"></style>

Initiate the project

Execute the following command to initiate the project:
vue-cli
vite
Note:
Since vue-cli enables Webpack Global Overlay Error Message Prompt by default, for a better experience, it is recommended to disable the global overlay error prompt.
webpack4
webpack3
module.exports = defineConfig({
  devServer: {
    client: {
      overlay: false,
    },
  },
});
module.exports = {
  devServer: {
    overlay: false,
  },
};
npm run serve
npm run dev

FAQs

Please click FAQs to view the solution.

Documentation

Related to Vue2 & Vue3 UIKit:

chat-uikit-vue npm
Vue3 Demo Source Code and Launch Example
Vue3 Demo Source Code and Launch Example

Vue2 & Vue3 UIKit Logic Layer: Engine Related

chat-uikit-engine npm repository
Documentation for the chat-uikit-engine interface

Exchange and Feedback

Join the Telegram technical exchange group or WhatsApp discussion group, benefit from the support of professional engineers, and solve your toughest challenges.