Build In-App Chat & Audio/Video Call & Live Streaming in minutes with UIKit components for Vue.
npm install @tencentcloud/chat-uikit-vue
Globally interconnected In-App Chat, user profile and relationship chains and online/offline push.
English /
简体中文
chat-uikit-vue is a Vue UI component library based on Tencent Cloud Chat SDK. It provides universally used UI components that include Conversation, Chat, and Group components. Leveraging these meticulously crafted UI components, you can quickly construct an elegant, reliable, and scalable Chat application.
> In respect for the copyright of the emoji design, the Chat Demo/TUIKit project does not include the cutouts of large emoji elements. Please replace them with your own designed or copyrighted emoji packs before the official launch for commercial use. The default small yellow face emoji pack is copyrighted by Tencent Cloud and can be authorized for a fee. If you wish to obtain authorization, please submit a ticket to contact us.
- UIKit: Build a fully-featured chat app in just ten minutes using UIKit components
- Various Message Types: Support multiple message types, such as text, images, audio, and video messages
- Notifications: Timely notify users of app messages and drive higher conversion rates
- Group Management: Create groups, manage group members, and customize profiles
- Conversation Management: View information about unread messages, recent, pinned, or deleted chats
👉🏻 Free Demo
`` javascript`
import { TUILogin } from '@tencentcloud/tui-core-lite';
The options parameter is of the Object type. It contains the following attribute values:
| Name | Type | Description |
| --- | --- | --- |
| SDKAppID | number | Required, SDKAppID of the chat app |
| userID | string | Required, user ID|
| userSig |string | Required, the password with which the user logs in to the Chat console. It is essentially the ciphertext generated by encrypting information such as the UserID.For the detailed generation method, see Generating UserSig |
| TIMPush | any | Optional, TIMPush plugin instance when uniapp build app packages |
| pushConfig | object | Optional, TIMPush plugin's config |
| useUploadPlugin | boolean | Optional, whether to use the upload plugin, the default is false |
| proxyServer | string | Optional, WebSocket server proxy address |
| fileUploadProxy | string | Optional, image, video, file upload proxy address |
| fileDownloadProxy | string | Optional, image, video, file download proxy address|
| framework | string \| undefined | Required, UI framework type, optional values: vue2、vue3、undefined |
` javascript`
// Login
TUILogin.login(options);
` javascript`
// Logout
TUILogin.logout();
` javascript`
// Set the SDK log level.
// 0: Common level. You are advised to use this level during access as it covers more logs.
// 1: Release level. You are advised to use this level for key information in a production environment.
TUILogin.setLogLevel(0);
` javascript``
// Get Chat SDK instance
const { chat } = TUILogin.getContext();