When building a chat application, it’s often confusing and difficult in terms of what functionality you need. And when developing in-house, this task can turn into a nightmare.
You'll need to set up and maintain WebSocket infrastructure, handle user presence, store and sync message history, and do all of this in a way that scales as your user base grows. Getting any one of these pieces wrong means dropped messages, stale UI, or a broken user experience.
Fortunately, CometChat's Vue UI Kit takes care of all of that.
In this tutorial, we will explore how to build a chat application by combining VueJs, CometChat’s chat SDK and UI components.
Why use CometChat instead of building it yourself?
| Feature | Traditional DIY | With CometChat Vue UI Kit |
|---|---|---|
Real-time infrastructure
| Custom WebSocket logic or a third-party service you maintain
| Preconfigured real-time messaging, handled by CometChat
|
Message delivery & sync
| Manual message queuing, ordering, and persistence
| Built-in delivery, ordering, and offline sync
|
Presence & typing indicators
| Custom pub/sub logic, server-side events
| Out-of-the-box presence and typing indicator components
|
UI components
| Build and maintain complex Angular components
| Ready-made Vue components
|
Scalability
| Requires careful architecture planning
| Scales automatically with CometChat infra
|
Customization
| Full control but every pixel is your maintenance burden
| Fully customizable with CSS-style overrides, component configuration, and theme API.
|
What You'll Build
By the end of this tutorial, you'll have a Vue app that supports:
User sign-in with a User ID
One-to-one messaging
Group chat (view and participate in group conversations)
Real-time messaging with typing indicators, online presence, and read/delivery receipts
Media messages and message reactions
Optional voice and video calling via the CometChat Calls SDK
Prerequisites
Knowledge
Vue fundamentals: components, props, emits, and the Composition API
JavaScript or TypeScript basics (TypeScript is recommended but not required)
Basic HTML/CSS for understanding layout
Tools
Node.js LTS (LTS release recommended)
npm (included with Node.js)
A modern code editor — VS Code works well
A CometChat account with an App ID, Region, and Auth Key (created in Step 2 below)
Getting Started
Step 1: Create a New Vue Application
Start with a fresh Vue project using Vite, it's the fastest way to get your Vue app running locally. Run the following commands to scaffold and install your project:
Before continuing, confirm the app runs:
Open the local URL printed in your terminal and verify the default Vite + Vue page loads. If it does, you're ready to continue.
Step 2: Create a CometChat App and Collect Your Credentials
Your Vue chat app will connect to CometChat's real-time backend using three credentials: an App ID, a Region, and an Auth Key. Here's how to get them:
Sign in to the CometChat Dashboard
Click Add New App and give it a name
Once the app is created, open it and note down the following - app id, region and auth key
You can create a Cometchat account by signing up here.
Step 3: Install the CometChat Vue UI Kit
The CometChat Vue UI Kit provides the prebuilt chat components you'll use throughout this tutorial. It wraps CometChat's JavaScript Chat SDK with Vue ready components.
Install the UI Kit and its required peer packages:
If you plan to add voice or video calling to your app later, also install the calls SDK:
Step 4: Fix TypeScript .vue Module Resolution
TypeScript doesn't recognize .vue files by default, which will cause type errors when you import Vue components. Fix this by adding a module declaration to env.d.ts in your project root (create the file if it doesn't exist):
This tells TypeScript how to handle .vue file imports throughout the project.
Important: The Auth Key is intended for development and proof-of-concept use only. For production apps, use server-generated Auth Tokens instead of exposing the Auth Key in client-side code.
Step 5: Reset Default CSS
The Vite + Vue starter template includes default styles like padding, max-width and a grid layout that will interfere with the chat UI's full-viewport layout. Replace the contents of src/assets/main.css with the following:
This ensures the chat interface can fill the entire viewport without being constrained by the starter template's layout rules.
Step 6: Initialize CometChat UI Kit
Now you'll wire up the CometChat UI Kit in src/main.ts. This file handles three things in sequence: importing the UI Kit's stylesheet, initializing the SDK with your app credentials, and logging in a user before mounting the Vue app.
Replace the contents of src/main.ts with the following:
A few things to note about this setup:
Replace the placeholder values (YOUR_APP_ID, YOUR_REGION, YOUR_AUTH_KEY, and YOUR_USER_UID ) with real values from your CometChat Dashboard.
Optional chaining (?.) on getLoggedinUser() and login() is intentional and it return types are 'Promise | undefined'. This is to prevent runtime errors if the SDK isn't ready.
The app only mounts after login succeeds. mountApp() is called inside the login callback, which prevents the chat UI from rendering before a user session exists.
The Auth Key approach used here is suitable for development and POC work. For production, replace CometChatUIKit.login(UID) with a flow that generates and passes a server-side Auth Token.
Step 7: Render the Chat UI
With initialization handled, rendering the full chat interface takes just a few lines. The Vue UI Kit ships a prebuilt component called CometChatConversationsWithMessages that combines the conversations list and message thread view into a single, ready-to-use layout.
Replace the contents of src/App.vue with the following:
Run the app with
You should see:
A conversations list on the left with all conversations for the logged-in user
A message thread on the right when you select a conversation
Real-time message delivery, typing indicators, and read receipts in action
CometChat Vue Sample App
The CometChat Vue sample app is a full reference implementation that shows the complete range of the Vue UI Kit's capabilities, including more advanced components, layout patterns, and feature configurations. It's a useful starting point if you want to explore beyond the basics before committing to your own integration.
Clone the repository:
Navigate into the project directory:
Install dependencies:
Open src/AppConstants.ts and replace the placeholder values with your CometChat credentials:
Start the development server:
Closing thoughts
You've built a working Vue chat app backed by CometChat's real-time infrastructure with conversations, message threads, typing indicators, presence, and read receipts, without writing a single line of WebSocket logic or state management for chat.
The sample app is worth cloning if you want to go further. It demonstrates more advanced UI Kit configurations, component overrides, and real-world layout patterns that you can adapt for your own product.
From here, you can explore theming the UI Kit to match your app's design system, integrating voice and video calling, or switching from Auth Key login to a production-ready Auth Token flow. The foundation is in place, the next steps are yours to shape.
Happy building!
Frequently Asked Questions
How long does it take to build a Vue chat app with CometChat?
With CometChat's Vue UI Kit, you can have a working chat interface running in under an hour. The steps in this tutorial, from project creation to a rendered conversations-and-messages UI, take most developers 30 to 45 minutes on the first pass.
How much does it cost to build a Vue chat app with CometChat?
CometChat offers a free tier that covers development and low-volume production use. Paid plans scale with monthly active users (MAUs) and the features you need, such as voice/video calling, message moderation, and advanced analytics. Check the pricing page for current details.
Can I customize the appearance of the chat UI?
Yes. The Vue UI Kit supports theming via CSS variables, component-level prop overrides, and custom slot content. You can change colors, typography, and component layout to match your app's design system without forking the UI Kit itself.
Is CometChat scalable? How many users can it handle?
CometChat's infrastructure is built to handle millions of concurrent users. The SDK and UI Kit abstract the scaling layer entirely, you don't have to manage WebSocket connections, message queues, or delivery infrastructure as your user base grows.
Can I add voice and video calling to this Vue chat app?
Yes. Install the @cometchat/calls-sdk-javascript package (mentioned in Step 3) and follow the CometChat calling documentation to add voice and video call components to your app. The Vue UI Kit includes prebuilt calling UI components that integrate with the same initialization flow.
Can I use this integration with TypeScript?
Yes, this tutorial is written with TypeScript throughout. The Vue UI Kit ships with full TypeScript type definitions, and the env.d.ts fix in Step 4 ensures .vue file imports resolve correctly in a TypeScript project.
Can I use this with Nuxt or other Vue-based frameworks?
The CometChat Vue UI Kit targets Vue and should work in Nuxt environments too, though server-side rendering (SSR) requires additional configuration since the SDK relies on browser APIs. For SSR projects, initialize CometChat only on the client side using a <ClientOnly> wrapper or a plugin that guards against window being undefined.
Haris Kumar
Lead Content Strategist , CometChat
