About chat-uikit-vue

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.

Core Capabilities

• 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

Demo

👉🏻 Free Demo

Send Your First Message

Vue3

• Integration TUIKit
• Quick Run Demo

Vue2

• Integration TUIKit
• Quick Run Demo

TUILogin

import { TUILogin } from '@tencentcloud/tui-core';

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 |

// Login
TUILogin.login(options);

// Logout
TUILogin.logout();

// 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); 

// Get Chat SDK instance
const { chat } = TUILogin.getContext();

Documentation

• Home page
• @tencentcloud/chat-uikit-vue npm
• Chat SDK

Contact Us

Join a Tencent Cloud Chat developer group for Reliable technical support & Product details & Constant exchange of ideas.

• Telegram group (EN): join
• WhatsApp group (EN): join
• Telegram group (ZH): join
• WhatsApp group (ZH): join