Introducing CometChat UIKit v4V4 UI kits offer modular design, extended functionality & > customization for a tailored chat experience. Check out our new UIKits here.
The CometChat Vue JS UI Kit lets developers integrate text chat & voice/video calling features into websites seamlessly.
👍 Improvements in V3.0Faster connection & response times
Higher rate limits
Supports up to 100K users in a group
Unlimited groups
Support for Transient Messages
Real-time user & group members count And more!
The Vue Chat UI Kit’s customizable VueJS UI components simplify the process of integrating text chat and voice/video calling features to your website in a few minutes.

I want to checkout Vue UI Kit

Follow the steps mentioned in the README.md file.Kindly, click on below button to download our Vue UI Kit.Vue UI KitView on Github

I want to explore the sample app

Kindly, click on below button to download our Vue Sample App.Vue Sample AppView on Github

​
Prerequisites

Before you begin, ensure you have met the following requirements:
  1. A text editor. (e.g. Visual Studio Code, Notepad++, Sublime Text, Atom, or VIM)
  2. Node
  3. npm
  4. Vue
For installing Vue 2 
npm install vue@2.6.14
For installing Vue 3 
npm install vue@3.2.11

​
Installing Vue JS UI Components

ImportantPlease follow the steps provided in the Key Concepts to create V3 apps before you proceed.

​
Setup

  1. Register on CometChat 🔧
    • To install Vue UI Kit, you need to first register on the CometChat Dashboard. Click here to Sign Up.
  2. Get your application keys 🔑
    a. Create a new app.
    b. Head over to the QuickStart or API & Auth Keys section and note the App ID, Auth Key, and Region.
  3. Add the CometChat dependency 📦 
npm install @cometchat-pro/chat@3.0.13 --save

​
Configure CometChat inside your app

  • Import CometChat SDK
import { CometChat } from "@cometchat-pro/chat";
  • Initialize CometChat 🌟
The init() method initializes the settings required for CometChat. We suggest calling the init() method on app startup, preferably in the created() method of the Application class. 
const appID = "APP_ID";
const region = "REGION";
const appSetting = new CometChat.AppSettingsBuilder()
  .subscribePresenceForAllUsers()
  .setRegion(region)
  .build();

CometChat.init(appID, appSetting).then(
  () => {
    console.log("Initialization completed successfully");
    // You can now call login function.
  },
  error => {
    console.log("Initialization failed with error:", error);
    // Check the reason for error and take appropriate action.
  }
);
Replace APP_ID and REGION with your CometChat App ID and Region in the above code
  • Create user
This method takes a User object and the Auth Key as input parameters and returns the created User object if the request is successful. 
let authKey = "AUTH_KEY";
var uid = "user1";
var name = "Kevin";

var user = new CometChat.User(uid);
user.setName(name);
CometChat.createUser(user, authKey).then(
    user => {
        console.log("user created", user);
    },error => {
        console.log("error", error);
    }
)
Replace AUTH_KEY with your CometChat Auth Key in the above code.
  • Login your user 👤
This method takes UID and Auth Key as input parameters and returns the User object containing all the information of the logged-in user. 
const authKey = "AUTH_KEY";
const uid = "cometchat-uid-1";

CometChat.login(uid, authKey).then(
  user => {
    console.log("Login Successful:", { user });    
  },
  error => {
    console.log("Login failed with exception:", { error });    
  }
);
Replace AUTH_KEY with your CometChat Auth Key in the above code.
We have set up 5 users for testing having UIDs: cometchat-uid-1, cometchat-uid-2, cometchat-uid-3, cometchat-uid-4, and cometchat-uid-5.

We have used uid cometchat-uid-1 as an example here. You can create a User from CometChat Dashboard as well.

​
Add the Vue Chat UI Kit to your project

  • Clone this repository.
git clone https://github.com/cometchat-pro/cometchat-pro-vue-ui-kit.git
  • Copy the cloned repository to your source folder
  • Copy all the dependencies from package.json of cometchat-pro-vue-ui-kit into your project’s package.json and install them.
  • We are using emoji-mart-vue-fast Please install respective library depending on your Vue version
    • For Vue2 : npm install emoji-mart-vue-fast@7.0.7
    • For Vue3 : npm install emoji-mart-vue-fast@8.0.3
    • For Vite users : npm install emoji-mart-vue-fast@9.1.2

​
Support for Vite

If you are using Vite, please update your vite.config.js 
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue'],
  },
})

​
Launch CometChat

Using the CometChatUI component from the UI Kit, you can launch a fully functional chat application. In this component, all the UI Components are interlinked and work together to launch a fully functional chat on your website/application.

​
Usage

<template>
 <div id="app">
   <CometChatUI />
 </div>
</template>

<script>
 import { CometChatUI } from "./cometchat-pro-vue-ui-kit/CometChatWorkspace/src";
 export default {
   name: "App",
   components: {
     CometChatUI,
   }
 };
</script>

​
Checkout our Vue Chat sample app

Visit our Vue Chat sample app repo to see it in action.