CometChat Pro Documentation

You'll find comprehensive guides and documentation to help you start working with CometChat as quickly as possible. Let's jump right in!

Vue UI Kit

The UI Kit library is built keeping the developers in mind and aims to considerably reduce the development efforts required to add the chat feature to your website/application.

I want to checkout Vue Chat UI Kit.

Follow the steps mentioned in the README.md file.

Kindly, click on below button to download our Vue Chat UI Kit.

Vue Chat UI Kit

View on Github

I want to explore the sample app

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

Vue Chat Sample App

View on Github

The UI Kit provides options to seamlessly add chat to your application using the customizable UI components

Installation Steps

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

npm install [email protected]

Installing Vue Chat UI Kit

Setup

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

Configure CometChat inside your app

  1. 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.
  }
);

🚧

Note

Replace APP_ID and REGION with your CometChat App ID and Region in the above code

  1. 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 = "SUPERHERO1";

CometChat.login(uid, authKey).then(
  user => {
    console.log("Login Successful:", { user });    
  },
  error => {
    console.log("Login failed with exception:", { error });    
  }
);

📘

Note

Replace AUTH_KEY with your CometChat Auth Key in the above code.

We have set up 5 users for testing having UIDs: SUPERHERO1, SUPERHERO2, SUPERHERO3, SUPERHERO4, and SUPERHERO5.

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

Add UI Kit to your project

  • Clone this repository.
  • Copy the folder to your source folder.
  • Copy all the dependencies from package.json of cometchat-pro-vue-chat-ui-kit into your project's package.json and install them.

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 of application in project

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

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

Checkout our sample app

Visit our Vue sample app repo to run the Vue sample app.

Updated 10 days ago



Vue UI Kit


Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.