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:
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.
module.exports = defineConfig({devServer: {client: {overlay: false,},},});
module.exports = {devServer: {overlay: false,},};
npm run serve
npm run dev
FAQs
Documentation
Related to Vue2 & Vue3 UIKit:
Vue2 & Vue3 UIKit Logic Layer: Engine Related
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.