Tencent Cloud

Recent Pages

Web（vue2/vue3）

Last updated: 2024-10-12 10:48:16

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)
Step 1. Create a project
Support 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 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 vue3 project, please ignore.
vue2.7
vue2.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
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 UI 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
Step 3. Import TUIKit component
On the page where you want to display it, simply import the TUIKit component to use it.
For example, implementing the following code on the App.vue page allows for a quick setup of the chat interface (the following example code supports both Web and H5):
The example code below uses the setup syntax. If your project does not use the setup syntax, please register components according to the standard methods of Vue3/Vue2.
vue3
vue2.7
vue2.6 and below
<template>
  <div id="app">
    <TUIKit :SDKAppID="0" userID="xxx" userSig="xxx" />
  </div>
</template>
<script lang="ts" setup>
import { TUIKit } from './TUIKit';
</script>
<style lang="scss">
</style>
<template>
  <div id="app">
    <TUIKit :SDKAppID="0" userID="xxx" userSig="xxx" />
  </div>
</template>
<script lang="ts" setup>
import { TUIKit } from './TUIKit';
</script>
<style lang="scss">
</style>
﻿
<template>
  <div id="app">
    <TUIKit :SDKAppID="0" userID="xxx" userSig="xxx" />
  </div>
</template>
<script lang="ts" setup>
import { TUIKit } from './TUIKit';
</script>
<style lang="scss">
</style>
1. Install dependencies supporting composition-api and script setup, as well as dependencies related to 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/main.js. 
import VueCompositionAPI from "@vue/composition-api";
Vue.use(VueCompositionAPI);
3. Add the following in vue.config.js. If the file does not exist, please create it.
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. At the end of the  src/TUIKit/adapter-vue.ts  file, replace the export source:
// Initial notation
export * from "vue";
// Replace with
export * from "@vue/composition-api";
Step 4: Obtain SDKAppID, userID, and userSig
Set the relevant parameters SDKAppID, userID, and corresponding userSig in <TUIKit>:
SDKAppID can be obtained through the Chat Console in Applications:
﻿
userID 
1.1 Click to enter the Application you created above. You will see the Chat product entrance in the left sidebar. Click to enter.
1.2 After entering the Chat Product subpage, click on Users to go to the User Management Page.
1.3 Click Create account, a form for creating account information will pop up. If you are just a regular member, we recommend you choose the General type.
1.4 To enhance your experience with message sending and receiving features, we recommend creating two userIDs.
﻿
﻿
﻿
userSig can be generated in real-time using the development tools provided by the console. To access the development tools, click Chat Console > Development Tools > UserSig Tools > Signature (UserSig) Generator.
﻿
Step 5. Launch the project
vue-cli
vite
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
Step 6：Initiate Your First Customer Service Inquiry
Initiate your first customer service inquiry through the TUIContact.
﻿
﻿
﻿
Integrate Customer Service Chat Independently
To display the customer service chat, simply import the TUIChat component on the desired page.
For example, by implementing the following code in the App.vue page, you can quickly set up a chat page and initiate a conversation:
The userID required to generate the conversationID is the customer service ID.
﻿
<template>
  <div id="app">
    <TUIKit
      :style="{ width: '500px', height: '800px', margin: '0 auto', boxShadow: '0 11px 20px #ccc' }"
      :SDKAppID="YOUR_SDKAppID"
      userID="YOUR_USERID"
      userSig="YOUR_USERSIG"
      conversationID="C2C@customer_service_account"
    >
      <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>