Extensive Vue Chat Components and UI Elements Library

Building a chat application in Vue introduces its own set of challenges. From implementing real-time messaging to designing user-friendly UI elements like message bubbles, conversation lists, and user management, the development process can be intricate and time-consuming.

Efficient state management, handling push notifications, and ensuring optimal UI performance across various devices further complicate matters.

CometChat streamlines this journey with its Vue UI kit, providing a collection of pre-built, customizable components, including message composers, chat lists, group conversations, and more. These components are designed for seamless integration into your application, significantly reducing development time while ensuring flexibility and high performance. To get a visual preview of how these components look, check out our open-source Figma chat design system

In this guide, you’ll discover:

To integrate CometChat's pre-built chat components into your Vue application, follow these straightforward steps:

Step 1: Register on CometChat

Create a new CometChat account and set up an application. After creating the app, navigate to the QuickStart or API & Auth Keys section to retrieve your App ID, Auth Key, and Region.

Step 2: Install CometChat UI Kit

Install the CometChat Vue UI kit along with its core chat SDK by running the following command:

npm install @cometchat/chat-sdk-vue

Step 3: Initialize CometChat UI Kit

Import the required modules into your code. After completing this step, your UI Kit will be initialized, allowing you to utilize all the pre-built chat elements in your application.

1. Conversations with Messages

The Conversations with Messages component serves as the central hub of your chat app, displaying recent conversations, whether private or group chats. It provides users with an organized view of ongoing discussions.

This component integrates several key UI elements from our kit, such as conversation lists and user directories, into a unified interface, making it easier to manage and present user conversations in one place. Users can quickly access past chats to continue conversations seamlessly.

In addition to its intuitive layout, this component includes built-in features such as unread message counts, timestamps, read receipts, user avatars, and previews of the last sent or received messages. Advanced filtering options allow users to sort conversations by type, tags, or other criteria.

To integrate this component, check out the below code

For implementation and customization details, refer to the documentation linked below.

[Conversation with Messages Documentation]

2. Contacts, Users, and Groups List

Enabling users to discover people and initiate new conversations is crucial for any chat app. The Contacts, Users, and Groups components work in harmony to streamline this process, each providing a unique way to display and interact with lists that lead to new private or group chats.

Contacts: This component offers a complete overview of all available users and groups within the app, supporting private and group chats, smart search functionality, and customizable selection modes. Users can effortlessly select one or multiple contacts to initiate new conversations.

Users: The Users component specifically lists all registered users in the app, featuring a built-in search bar and details such as name, avatar, and online/offline status for quick access to chat.

To integrate this component, check out the below code

Groups: The Groups component displays all active chat groups, making it easy for users to browse, join, or create new group conversations. Each group listing shows its name, icon, and participant count, giving users insight into group activity before joining.

To integrate this component, check out the below code

For more information on implementing and customizing these components, check out the official documentation linked below.

[Contacts Documentation][Users Documentation][Groups Documentation]

3. Messages

The Messages component is central to your chat application, providing the interface for users to exchange messages in both private and group conversations. Powered by CometChat’s API, this component simplifies the integration of real-time messaging, taking care of backend complexities for you.

It comprises several key elements, including MessageHeader, MessageList, and MessageComposer, ensuring seamless management of both UI and messaging functionality.

Overview of Primary Components Within the Messages Component:

MessageHeader: Displays essential information about the user or group involved in the conversation, using CometChat SDK’s user or group objects to showcase details like the user’s name, profile picture, or group icon. It also includes a real-time typing indicator, which activates when participants are typing.

To integrate this component, check out the below code

MessageList: The backbone of the Messages component, displaying the entire history of exchanged messages. It manages real-time updates, ensuring new messages appear as they are sent or received without needing a manual refresh.

To integrate this component, check out the below code

MessageComposer: This independent component handles message composition and submission, supporting various inputs such as text, images, videos, stickers, and GIFs. Its built-in logic simplifies message creation and sending, enhancing user experience.

To integrate this component, check out the below code

For detailed instructions on utilizing and customizing the Messages component, refer to the official documentation linked below.

[Message Component Documentation][Message Header Documentation][Message List Documentation][Message Composer Documentation]

4. Message Information

The Message Information component is essential for displaying key details about individual messages within your chat application. It offers users insights such as read receipts and timestamps to indicate when messages were sent or received.

For detailed instructions on implementing and customizing the Message Information component, refer to the official documentation linked below.

[Message Information Documentation]

5. Threaded Messages

The Threaded Messages component enables a reply feature akin to Slack, allowing users to respond directly to specific messages. This promotes a more organized and focused discussion within your chat app.

Key Features of the Threaded Messages Component Include:

Parent Message Display: The parent message is prominently shown at the top of the thread, providing context for associated replies.

Reply Message List: Below the parent message, a message list displays all replies, allowing users to follow the conversation flow without losing context.

Message Composer: Located at the bottom of the threaded view, it allows users to reply directly within the thread, simplifying participation in ongoing discussions.

To add this component, check out the below code

For detailed guidance on using and customizing the Threaded Messages component, refer to the official documentation linked below.

[Thread Messages Documentation]

6. Reactions

The Reactions components enable users to implement a robust reaction system in their chat app. These interconnected components work together to provide a comprehensive reaction system:

Reactions Component: Displays emoji reactions directly within the message bubble, visually representing the emotions tied to a specific message.

Reaction List Component: Offers a detailed view of all emoji reactions associated with a message, showing which emojis were used by each user and allowing users to remove their own reactions.

QuickReactions: This component provides an easy way to react to messages by displaying a row of favorite reactions. It includes a plus icon that, when tapped, opens the CometChatEmojiKeyboard for a broader selection of emojis. Users can apply reactions from either the favorite reactions list or the emoji keyboard with a single tap.

For more guidance on using and customizing the Reactions components, refer to the official documentation linked below.

7. Group Chat Components

CreateGroup: This component allows users to create groups with various privacy settings, including public, private, and password-protected groups. Customizable settings enable users to tailor the group’s access level for a personalized and secure chat experience.

GroupMembers: Displays all participants added to or invited to a specific group, providing a clear view of active group members.

To add this component, check out the below code

AddMembers: Simplifies the process of adding new participants to a group, allowing owners or administrators to search for specific users or select from a list of available members. New members receive notifications to join, enhancing engagement and collaboration.

To add this component, check out the below code

CometChatBannedMembers: Lists users banned from participating in a group, giving group owners or admins visibility into who has been restricted.

To add this component, add this below code

CometChatDetails: Offers comprehensive information and settings related to the group, including essential functionalities such as group information, managing members, and group actions for administrative control.

For more information on implementing and customizing these group chat components, refer to the official documentation linked below.

[Groups Documentation][Groups with Messages Documentation][Group Members Documentation][Add Members Documentation][Banned Members Documentation]

8. Chat Bubbles

CometChat's UI Kit provides an extensive range of pre-built message bubbles to effectively display various content types, such as text, images, files, and more. These customizable chat bubbles empower developers to create a responsive and visually appealing messaging interface that complements their app’s design. Here’s an overview of the available message bubbles and their respective components:

• Text Bubble: Use the CometChatTextBubble component to present text messages clearly. This bubble comes with customizable styling options to enhance both readability and appearance.

• Image Bubble: The CometChatImageBubble component is perfect for sharing images. It supports multiple formats and ensures shared images are displayed attractively within the chat.

• Video Bubble: To display video files seamlessly, the CometChatVideoBubble component allows users to play shared videos directly within the conversation.

• Form Bubble: The CometChatFormBubble component facilitates form exchanges, enabling users to collect information directly within the chat interface.

• Meeting Scheduler Bubble: With the ScheduleBubble component, users can schedule meetings or appointments directly in the chat.

• Location Bubble: The CometChatLocationBubble component provides a map view for shared locations, displaying pinned addresses or coordinates within the chat interface.

• Contact Bubble: For sharing contact information, such as phone numbers and email addresses, the CometChatContactBubble component is available.

• Card Bubble: Finally, the CometChatCardBubble component presents rich media content, such as product details or event invitations, in a structured and visually organized card format.

For further details on implementing and customizing these chat bubbles, please refer to the official documentation linked below:

Message bubble documentation

9. Read Receipts (Message Status)

Utilize the CometChatReceipt component to display the status of messages in your chat application. This component indicates various message states, including sending, sent, delivered, read, and error. You can customize the icons for each status to ensure they match your app’s design. For detailed guidance on using the read receipts component, refer to the official documentation: Read Receipts Documentation.

10. Message Counts

Incorporate the CometChatBadge component to showcase the unread message count within your app. This feature visually highlights unread messages, providing users with a quick overview of new activity and enhancing their engagement.

11. Presence Indicators

The CometChatStatusIndicator component effectively indicates a user's online or offline status. It offers various customization options for border color, border size, and background color, allowing you to adapt it to your app’s style and aesthetic. For more information on implementing the presence indicator component, refer to the official documentation: Presence Indicator Documentation.

12. Voice Recorder

Integrate the CometChatMediaRecorder component to enable users to record and playback audio messages. This component is ideal for chat applications requiring audio messaging capabilities, thereby enhancing user interaction within the app. For further details on using the voice recorder component, consult the official documentation: Voice Recorder Documentation.

CometChat is a powerful communication infrastructure platform that empowers developers to seamlessly integrate real-time chat, voice, and video capabilities into their applications and websites. Designed to enhance user engagement and facilitate in-app communication, CometChat offers a comprehensive suite of chat and calling features tailored for various use cases, including marketplaces, telehealth, social networking apps, and enterprise communication solutions.

What We Offer

• Real-Time Chat: Our chat solution supports one-on-one and group messaging, featuring capabilities such as message history, typing indicators, read receipts, and file sharing.

• Feature-Rich UI Kits and SDKs: Our pre-built UI kits enable developers to rapidly create beautiful, responsive chat interfaces embedded with essential business logic.

• Voice & Video Calling: CometChat provides high-quality voice and video calling features, allowing users to connect instantly and effectively.

• Chat Moderation: We offer advanced moderation tools powered by contextual AI engines to automatically filter and block common violations such as profanity, hate speech, and violence.

• Notifications: With CometChat, developers can easily implement push, SMS, and email notifications to keep users informed about new messages, mentions, or other important events.

Aarathy Sundaresan

Content Marketer , CometChat

Aarathy is a B2B SaaS Content Marketer at CometChat, excited about the convergence of technology and writing. Aarathy is eager to explore and harness the power of tech-driven storytelling to create compelling narratives that captivate readers. Outside of her professional pursuits, she enjoys the art of dance, finding joy and personal fulfillment.