• UIKit
  • SDK
  • サーバー API
Chat/
UIKit/
Web/
インストール/
TUIChat のみ/
UIKit
  • Overview
  • インストール
    • TUIKit
      • React
      • Vue
    • TUIChat のみ
      • React
      • Vue
  • Features
    • 反応
    • 既読レシート
    • 入力状態
    • ユーザーのオンライン状態
    • Message Search
    • Quote Reply
    • Voice Message To Text
    • Translate Message
  • トピック
    • UI スタイルの設定
      • Web
      • モバイル端末
  • カスタマイズ
    • メッセージのカスタマイズ
    • Customize Emoji and Stickers
  • ローカライズ
  • Guideline for Beginners
  • コンソールガイド
    • アプリケーションの作成とアップグレード
    • 基本設定
    • 機能設定
    • アカウント管理
    • グループ管理
    • コールバック設定
  • 製品紹介
    • メッセージ管理
      • シングルチャットメッセージ
      • メッセージの保存
      • オフラインプッシュ
      • グループメッセージ
      • メッセージフォーマット
    • アカウントシステム
      • ログイン認証
      • オンライン状態管理
    • グループ関連
      • グループシステム
      • グループ管理
    • ユーザープロファイルとリレーションシップチェーン
      • 資料管理
      • リレーションシップチェーン管理
  • 購入ガイド
    • 課金の概要
    • 価格
  • エラーコード
このページは現在英語版のみで提供されており、日本語版も近日中に提供される予定です。ご利用いただきありがとうございます。

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 (Fully compatible with both Vue2 & Vue3. While incorporating below, please select the Vue version guide that matches your needs)
TypeScript (Should your project be based on JavaScript, please proceed to JS project integrate to set up a progressive support for TypeScript)
Sass (sass-loader ≤ 10.1.1)
node(node.js ≥ 16.0.0)
npm (use a version that matches the Node version in use)

Integration of TUIKit (Web & H5)

Step 1. Create a project

TUIKit supports creating a project structure using webpack or vite, configured with Vue3 / Vue2 + TypeScript + sass. Below are a few examples of how to construct your project:
vue-cli
vite
Please Note:
Please make sure you have @vue/cli version 5.0.0 or above . The following sample code can be used to upgrade your @vue/cli version to v5.0.8.
Establish a project using Vue CLI, with configuration set to Vue2/Vue3 + TypeScript + Sass/SCSS. If Vue CLI is not yet installed, or the version is below 5.0.0, you can use the following method for installation via Terminal or CMD:
npm install -g @vue/cli@5.0.8 sass sass-loader@10.1.1
Create a project through Vue CLI and select the configuration items depicted below.
vue create chat-example
Please make sure to select according to the following configuration:

After creation, switch to the directory where the project is located:
cd chat-example
If you are a vue2 project, please make the following corresponding environment configurations based on the Vue version you are using.
IIf you are a vue2 project, please ignore.
vue2.7
Vue 2.6 and below
npm i vue@2.7.9 vue-template-compiler@2.7.9
npm i @vue/composition-api unplugin-vue2-script-setup vue@2.6.14 vue-template-compiler@2.6.14
Please Note:
Vite requires Node.js versions 18+, 20+. Pay attention to upgrade your Node version when your package manager issues a warning, for more details refer to Vite official website.
Create a project using Vite, configure Vue + TypeScript according to the options in the picture below.
npm create vite@latest



Then, switch to the project directory, and install the project dependencies.
cd chat-example
npm install
Install the sass environment dependency required for TUIKit:
npm i -D sass sass-loader


Step 2. Download the TUIKit component

Download the TUIKit component through npm. To facilitate your subsequent expansion, it is recommended that you copy the TUIKit component to the src directory of your project:
macOS
Windows
npm i @tencentcloud/chat-uikit-vue
mkdir -p ./src/TUIKit && rsync -av --exclude={'node_modules','package.json','excluded-list.txt'} ./node_modules/@tencentcloud/chat-uikit-vue/ ./src/TUIKit
npm i @tencentcloud/chat-uikit-vue
xcopy .\node_modules\@tencentcloud\chat-uikit-vue .\src\TUIKit /i /e /exclude:.\node_modules\@tencentcloud\chat-uikit-vue\excluded-list.txt
Upon successful completion, the directory structure is depicted as follows:




Step 3: Import TUIKit Component

Import TUIKit in main.ts / main.js and register it into the Vue project instance
Vue3
Vue2
import { createApp } from 'vue';
import App from './App.vue';
import { TUIComponents, TUIChatKit, genTestUserSig } from "./TUIKit";
import { TUILogin } from "@tencentcloud/tui-core"; const app = createApp(App);

const SDKAppID = 0; // Your SDKAppID
const secretKey = ""; //Your secretKey
const userID = ""; // User ID

// TUIChatKit add TUIComponents
TUIChatKit.components(TUIComponents, app);
// TUIChatKit init
TUIChatKit.init();
// TUICore login
TUILogin.login({
SDKAppID,
userID,
// UserSig is a password used to log in to IM. It is the ciphertext obtained after data such as UserID is encrypted.
// this method is only suitable for locally running a demo project and feature debugging. https://cloud.tencent.com/document/product/269/32688
userSig: genTestUserSig({
SDKAppID,
secretKey,
userID,
}).userSig,
useUploadPlugin: true,
useProfanityFilterPlugin: false,
framework: "vue3",
});

app.mount("#app");
export { SDKAppID, secretKey };
import Vue from "vue";
import App from "./App.vue";
import { TUIComponents, TUIChatKit, genTestUserSig } from "./TUIKit";
import { TUILogin } from "@tencentcloud/tui-core";

const SDKAppID = 0; // Your SDKAppID
const secretKey = ""; //Your secretKey
const userID = ""; // User ID

// TUIChatKit add TUIComponents
TUIChatKit.components(TUIComponents, Vue);
// TUIChatKit init
TUIChatKit.init();
// TUICore login
TUILogin.login({
SDKAppID,
userID,
// UserSig is a password used to log in to IM. It is the ciphertext obtained after data such as UserID is encrypted.
// this method is only suitable for locally running a demo project and feature debugging. https://cloud.tencent.com/document/product/269/32688
userSig: genTestUserSig({
SDKAppID,
secretKey,
userID,
}).userSig,
useUploadPlugin: true,
// Local review can identify and handle unsafe and inappropriate content, safeguarding your product experience and business security
// This function is a value-added service, for reference please visit: https://cloud.tencent.com/document/product/269/79139
// If you have purchased the content review service, please set this feature to `true`
useProfanityFilterPlugin: false,
framework: "vue2",
});
Vue.config.productionTip = false;
new Vue({
render: (h) => h(App),
}).$mount("#app");
export { SDKAppID, secretKey };

Step 4: Secure SDKAppID, secretKey, and userID

Set the relevant parameters SDKAppID, secretKey, and userID in the example code of the main.ts / main.js file:
SDKAppID and SecretKey can be accessed by the Chat Console:


UserID can be accessed by the Chat Console > Account Management. Switch to the target application account to create an account and get the userID.




Step 5: Please input userID / groupID to start a chat

Note:
conversationID: Session ID. The composition of the Session ID:
C2C${userID} (C2C chat)
GROUP${groupID} (Group chat)
About group chat:
The groupID can be obtained by calling the API createGroup
If it's a live chat group, you need to join the group by calling the API joinGroup before enter chat.
Enter the Chat
Invoke the API switchConversation and input a 'conversationID' to enter the chat interface.
Vue3 Version
Vue 2.7 Version
Vue2.6 or lower versions
For example: In the App.vue page, use TUIChat and TUICallKit to quickly build a chat interface (the following sample code supports both the Web side and the H5 side).
<template>
<div :class="['TUIKit', isH5 && 'TUIKit-h5']">
<div class="TUIKit-main-container">
<div
v-show="!isH5 || !currentConversationID"
:class="['navbar', isH5 && 'navbar-h5']"
>
<div class="navbar-button" @click="openChat">Open OneToOne Chat</div>
<div class="navbar-button" @click="openGroupChat">Open Group Chat</div>
</div>
<TUIChat v-show="!isH5 || currentConversationID">
<h1>Let's chat!</h1>
</TUIChat>
<TUICallKit
class="callkit-container"
:allowedMinimized="true"
:allowedFullScreen="false"
/>
</div>
</div>
</template>
<script setup lang="ts">
import { ref } from "vue";
import { TUIStore, StoreName, TUIConversationService } from "@tencentcloud/chat-uikit-engine";
import { TUICallKit } from "@tencentcloud/call-uikit-vue";
import { TUIChat } from "./TUIKit";
import { isH5 } from "./TUIKit/utils/env";
const currentConversationID = ref<string>("");
const userID = "";// Please enter the userID you want to chat
const groupID = "";// Please enter the groupID you want to chat
TUIStore.watch(StoreName.CONV, {
currentConversationID: (id: string) => {
currentConversationID.value = id;
},
});
function openChat() {
TUIConversationService.switchConversation(`C2C${userID}`);
}
function openGroupChat() {
TUIConversationService.switchConversation(`GROUP${groupID}`);
}
</script>
<style scoped lang="scss">
@import "./TUIKit/assets/styles/common.scss";
@import "./TUIKit/assets/styles/sample.scss";
.navbar {
box-sizing: border-box;
min-width: 285px;
flex: 0 0 24%;
border-right: 1px solid #f4f5f9;
padding: 20px;
.navbar-button {
padding: 10px 40px;
background-color: #006eff;
color: #ffffff;
font-size: 16px;
margin-top: 65px;
border-radius: 30px;
text-align: center;
cursor: pointer;
}
}
.navbar-h5 {
flex: 1;
border-right: 1px solid #f4f5f9;
.navbar-button {
cursor: none;
}
}
.chat {
flex: 1;
}
</style>
For example: In the App.vue page, use TUIChat and TUICallKit to quickly build a chat interface (the following sample code supports both the Web side and the H5 side).
<template>
<div :class="['TUIKit', isH5 && 'TUIKit-h5']">
<div class="TUIKit-main-container">
<div
v-show="!isH5 || !currentConversationID"
:class="['navbar', isH5 && 'navbar-h5']"
>
<div class="navbar-button" @click="openChat">Open OneToOne Chat</div>
<div class="navbar-button" @click="openGroupChat">Open Group Chat</div>
</div>
<TUIChat v-show="!isH5 || currentConversationID">
<h1>Let's chat!</h1>
</TUIChat>
<TUICallKit
class="callkit-container"
:allowedMinimized="true"
:allowedFullScreen="false"
/>
</div>
</div>
</template>
<script lang="ts">
import Vue from "vue";
import { TUIStore, StoreName, TUIConversationService } from "@tencentcloud/chat-uikit-engine";
import { TUICallKit } from "@tencentcloud/call-uikit-vue2";
import { TUIChat } from "./TUIKit";
import { isH5 } from "./TUIKit/utils/env";
export default Vue.extend({
name: "App",
components: {
TUIChat,
TUICallKit,
},
data() {
return {
isH5: isH5,
currentConversationID: "",
currentNavbar: "conversation",
userID: "", // Please enter the userID you want to chat
groupID: "", // Please enter the groupID you want to chat
};
},
methods: {
openChat() {
TUIConversationService.switchConversation(`C2C${this.userID}`);
},
openGroupChat() {
TUIConversationService.switchConversation(`GROUP${this.groupID}`);
},
},
mounted: function () {
TUIStore.watch(StoreName.CONV, {
currentConversationID: (id: string) => {
this.currentConversationID = id;
},
});
},
});
</script>
<style scoped lang="scss">
@import "./TUIKit/assets/styles/common.scss";
@import "./TUIKit/assets/styles/sample.scss";
.navbar {
box-sizing: border-box;
min-width: 285px;
flex: 0 0 24%;
border-right: 1px solid #f4f5f9;
padding: 20px;
.navbar-button {
padding: 10px 40px;
background-color: #006eff;
color: #ffffff;
font-size: 16px;
margin-top: 65px;
border-radius: 30px;
text-align: center;
cursor: pointer;
}
}
.navbar-h5 {
flex: 1;
border-right: 1px solid #f4f5f9;
.navbar-button {
cursor: none;
}
}
.chat {
flex: 1;
}
</style>
1. Install the relevant dependencies supporting composition-api , script setup, and vue2.6
npm i @vue/composition-api unplugin-vue2-script-setup vue@2.6.14 vue-template-compiler@2.6.14
2. Import VueCompositionAPI in main.ts:
import VueCompositionAPI from "@vue/composition-api";
Vue.use(VueCompositionAPI);
3. Add the following pattern to vue.config.js, if the file doesn't exist, please create one:
const ScriptSetup = require("unplugin-vue2-script-setup/webpack").default;
module.exports = {
parallel: false, // disable thread-loader, which is not compactible with this plugin
configureWebpack: {
plugins: [
ScriptSetup({
/* options */
}),
],
},
chainWebpack(config) {
// disable type check and let `vue-tsc` handles it
config.plugins.delete("fork-ts-checker");
},
};
4. Replace the export source at the end of the src/TUIKit/adapter-vue.ts file:
// Initial notation
export * from "vue";
// Replace with
export * from "@vue/composition-api";
5. For example: In the App.vue page, use TUIChat and TUICallKit to quickly build a chat interface (the following sample code supports both the Web side and the H5 side).
<template>
<div :class="['TUIKit', isH5 && 'TUIKit-h5']">
<div class="TUIKit-main-container">
<div
v-show="!isH5 || !currentConversationID"
:class="['navbar', isH5 && 'navbar-h5']"
>
<div class="navbar-button" @click="openChat">Open OneToOne Chat</div>
<div class="navbar-button" @click="openGroupChat">Open Group Chat</div>
</div>
<TUIChat v-show="!isH5 || currentConversationID">
<h1>Let's chat!</h1>
</TUIChat>
<TUICallKit
class="callkit-container"
:allowedMinimized="true"
:allowedFullScreen="false"
/>
</div>
</div>
</template>
<script lang="ts">
import Vue from "vue";
import { TUIStore, StoreName, TUIConversationService } from "@tencentcloud/chat-uikit-engine";
import { TUICallKit } from "@tencentcloud/call-uikit-vue2.6";
import { TUIChat } from "./TUIKit";
import { isH5 } from "./TUIKit/utils/env";
export default Vue.extend({
name: "App",
components: {
TUIChat,
TUICallKit,
},
data() {
return {
isH5: isH5,
currentConversationID: "",
currentNavbar: "conversation",
userID: "", // Please enter the userID you want to chat
groupID: "", // Please enter the groupID you want to chat
};
},
methods: {
openChat() {
TUIConversationService.switchConversation(`C2C${this.userID}`);
},
openGroupChat() {
TUIConversationService.switchConversation(`GROUP${this.groupID}`);
},
},
mounted: function () {
TUIStore.watch(StoreName.CONV, {
currentConversationID: (id: string) => {
this.currentConversationID = id;
},
});
},
});
</script>
<style scoped lang="scss">
@import "./TUIKit/assets/styles/common.scss";
@import "./TUIKit/assets/styles/sample.scss";
.navbar {
box-sizing: border-box;
min-width: 285px;
flex: 0 0 24%;
border-right: 1px solid #f4f5f9;
padding: 20px;
.navbar-button {
padding: 10px 40px;
background-color: #006eff;
color: #ffffff;
font-size: 16px;
margin-top: 65px;
border-radius: 30px;
text-align: center;
cursor: pointer;
}
}
.navbar-h5 {
flex: 1;
border-right: 1px solid #f4f5f9;
.navbar-button {
cursor: none;
}
}
.chat {
flex: 1;
}
</style>

Step 6. Launch the project

vue-cli
vite
npm run serve
npm run dev

FAQs

Product Service FAQs

1. The Audio/Video Call Capability package is not activated? Failure to initiate the Audio/Video Call?

Please click Audio/Video Call > Frequently Asked Questions to view the solutions.

2. What is UserSig? How is UserSig generated?

A UserSig is a password with which you can log in to use IM service. It is the ciphertext generated by encrypting information such as userID.
The issuance of UserSig is achieved by integrating the calculation code for UserSig into your server-side, whilst providing an interface designed for your project. Whenever UserSig is required, your project could request the operational server for a dynamic UserSig. For further information, please refer to Generating UserSig on the server-side.
Caution
The method to obtain UserSig demonstrated in this document utilizes the configuration of a SECRETKEY within the client-side code. Within this procedure, the SECRETKEY is notably vulnerable to decompilation and reverse-engineering. Should your SECRETKEY be leaked, malefactors could potentially exploit your Tencent Cloud traffic. Therefore, this technique is only appropriate for local operation and functional debugging. For the correct method of issuing UserSig, please refer to the earlier text.

Connection Errors FAQs

1. Runtime error: "TypeError: Cannot read properties of undefined (reading "getFriendList")"

If the following errors occur during runtime after connecting as per the steps outlined above, it is imperative that you delete the node_modules directory under the TUIKit folder to ensure the uniqueness of TUIKit's dependencies, preventing issues caused by multiple copies of dependencies.

259937368-f7c85dfe-b4bd-4c73-88d9-3a9f0d7797f2.png (1186×550)



2. How does a JS project integrate the TUIKit component?

TUIKit exclusively supports the TS environment for operation. You can enable the coexistence of existing JS code in your project with the TS code in TUIKit through progressive configuration of TypeScript.
vue-cli
vite
Please execute the following in the root directory of your engineering project created by the Vue CLI scaffold:
vue add typescript
Subsequently, please make selections in accordance with the following configuration options. To assure that we can support both the existing js code and the ts code within TUIKit, it is imperative that you strictly adhere to the five options presented below.
260706614-5e2fc00b-ace5-4843-bef6-c0e234225b5d.png (1514×360)


Once these steps are completed, please rerun the project!
Please execute the following command in your project's root directory created with vite:
npm install -D typescript

3. Runtime error reported: /chat-example/src/TUIKit/components/TUIChat/message-input/message-input-editor.vue .ts(8,23)TS1005: expected.




The above error message appears because your installed @vue/cli version is too low. You must ensure that your @vue/cli version is 5.0.0 or higher. The upgrade method is as follows:
npm install -g @vue/cli@5.0.8

4. Runtime error: Failed to resolve loader: sass-loader


260897345-1ba994d8-da51-4820-94e7-a7145b34750b.png (690×160)


The above error message appears because the `sass` environment is not installed on your machine, please run the following command to install the `sass` environment:
npm i -D sass sass-loader@10.1.1

5. Other ESLint errors?

If copying chat-uikit-vue to the src directory results in error due to inconsistency with your local project code style, you may ignore this component directory. This can be achieved by adding .eslintignore file to the project root directory.
# .eslintignore
src/TUIKit

6. How to disable the full screen overlay error message prompt of webpack in dev mode in vue/cli?

You can disable it in the vue.config.js file at the root directory of your project:
webpack4
webpack3
module.exports = defineConfig({
...
devServer: {
client: {
overlay: false,
},
},
});
module.exports = {
...
devServer: {
overlay: false,
},
};

7. What to do when encountering 'Component name "XXXX" should always be multi-word'?

The version of ESLint utilized in IM TUIKit web is v6.7.2, which does not rigidly verify the camelCase format for module names.
Should you encounter this dilemma, you may configure as follows in the .eslintrc.js file:
module.exports = {
...
rules: {
...
'vue/multi-word-component-names': 'warn',
},
};

8. What should I do if I encounter ERESOLVE unable to resolve dependency tree?

If ERESOLVE unable to resolve dependency tree appears when npm install is run, it indicates a conflict in dependency installation. The following method can be adopted for installation:
npm install --legacy-peer-deps

9. How might one address the error message, 'vue packages version mismatch' occurring during execution?

// If you are using a vue2.7 project, please execute in your project root directory
npm i vue@2.7.9 vue-template-compiler@2.7.9
// If you have a Vue2.6 project, please execute in your project's root directory
npm i vue@2.6.14 vue-template-compiler@2.6.14

10. Why does TypeScript report an error after npm run build in a Vite project?




Reason: It's led by the vue-tsc command in "build": "vue-tsc && vite build" under package.json script.



Solution: Simply remove vue-tsc. "build": "vite build"




Documentation

Related to Vue2 & Vue3 UIKit:

Vue2 & Vue3 UIKit logic layer: engine

Contact Us

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