> ## Documentation Index
> Fetch the complete documentation index at: https://www.cometchat.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Overview

> Overview of Overview in CometChat.

<Note>
  Introducing CometChat UIKit v4

  V4 UI kits offer modular design, extended functionality & > customization for a tailored chat experience. Check out our new UIKits [here](/ui-kit/vue/overview).
</Note>

The CometChat **Vue JS UI Kit** lets developers integrate text chat & voice/video calling features into websites seamlessly.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b/vk8kXY4T6hhH4l00/images/6c562707-1623200343-a73d4f39bf9c0b2a4c7242248fe92aa3.png?fit=max&auto=format&n=vk8kXY4T6hhH4l00&q=85&s=c0fd94ad4584d75ac2423ed7c56133bf" width="1440" height="900" data-path="images/6c562707-1623200343-a73d4f39bf9c0b2a4c7242248fe92aa3.png" />
</Frame>

<Tip>
  👍 Improvements in V3.0

  Faster 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!
</Tip>

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.

<CardGroup>
  <Card title="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 Kit](https://github.com/cometchat-pro/cometchat-pro-vue-ui-kit/archive/master.zip)

    [View on Github](https://github.com/cometchat-pro/cometchat-pro-vue-ui-kit/)
  </Card>

  <Card title="I want to explore the sample app">
    Kindly, click on below button to download our Vue Sample App.

    [Vue Sample App](https://github.com/cometchat-pro/javascript-vue-chat-app/archive/master.zip)

    [View on Github](https://github.com/cometchat-pro/javascript-vue-chat-app/)
  </Card>
</CardGroup>

## 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](https://nodejs.org/en/)
3. [npm](https://www.npmjs.com/get-npm)
4. [Vue](https://vuejs.org/)

For installing Vue 2

<Tabs>
  <Tab title="CLI">
    ```sh theme={null}
    npm install vue@2.6.14
    ```
  </Tab>
</Tabs>

For installing Vue 3

<Tabs>
  <Tab title="CLI">
    ```sh theme={null}
    npm install vue@3.2.11
    ```
  </Tab>
</Tabs>

## Installing Vue JS UI Components

<Warning>
  Important

  Please follow the steps provided in the [Key Concepts](/ui-kit/vue/3.0/key-concepts) to create V3 apps before you proceed.
</Warning>

### 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 📦

<Tabs>
  <Tab title="CLI">
    ```sh theme={null}
    npm install @cometchat-pro/chat@3.0.13 --save
    ```
  </Tab>
</Tabs>

### Configure CometChat inside your app

* Import CometChat SDK

<Tabs>
  <Tab title="JavaScript">
    ```js theme={null}
    import { CometChat } from "@cometchat-pro/chat";
    ```
  </Tab>
</Tabs>

* 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.

<Tabs>
  <Tab title="JavaScript">
    ```js theme={null}
    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.
      }
    );
    ```
  </Tab>
</Tabs>

<Warning>
  Replace APP\_ID and REGION with your CometChat App ID and Region in the above code
</Warning>

* 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.

<Tabs>
  <Tab title="JavaScript">
    ```js theme={null}
    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);
        }
    )
    ```
  </Tab>
</Tabs>

<Warning>
  Replace AUTH\_KEY with your CometChat Auth Key in the above code.
</Warning>

* 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.

<Tabs>
  <Tab title="JavaScript">
    ```js theme={null}
    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 });    
      }
    );
    ```
  </Tab>
</Tabs>

<Warning>
  Replace AUTH\_KEY with your CometChat Auth Key in the above code.
</Warning>

<Note>
  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.
</Note>

### Add the Vue Chat UI Kit to your project

* Clone this repository.

<Tabs>
  <Tab title="CLI">
    ```sh theme={null}
    git clone https://github.com/cometchat-pro/cometchat-pro-vue-ui-kit.git
    ```
  </Tab>
</Tabs>

* Copy the cloned repository to your source folder

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b/tiy_c-4NywbKIGIr/images/7f2a2a4c-1631549878-5a5bb2e7424e8a899997980ba8272d72.png?fit=max&auto=format&n=tiy_c-4NywbKIGIr&q=85&s=0fb0abd6ea3de8c6602f56f9ac1dba1e" width="337" height="714" data-path="images/7f2a2a4c-1631549878-5a5bb2e7424e8a899997980ba8272d72.png" />
</Frame>

* 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](https://www.npmjs.com/package/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`

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b/lqGH-Bgiq2mgS9m9/images/bb832d7e-1634215228-d7103ca5ccf4930b995aaf20c2783587.png?fit=max&auto=format&n=lqGH-Bgiq2mgS9m9&q=85&s=88c579f6a3f5cadc8fa61ab8ed0d4283" width="534" height="430" data-path="images/bb832d7e-1634215228-d7103ca5ccf4930b995aaf20c2783587.png" />
</Frame>

### Support for Vite

If you are using Vite, please update your `vite.config.js`

<Tabs>
  <Tab title="vite.config.js">
    ```js theme={null}
    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'],
      },
    })
    ```
  </Tab>
</Tabs>

### 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.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b/0Cdnhz6eU6kdn5Ms/images/b3362330-1623200351-fcc7e751c1f740c4a693bfdb14354be8.gif?s=8ac053a9af35c522595bf9e54346d9fe" width="800" height="375" data-path="images/b3362330-1623200351-fcc7e751c1f740c4a693bfdb14354be8.gif" />
</Frame>

### Usage

<Tabs>
  <Tab title="Vue">
    ```js theme={null}
    <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>
    ```
  </Tab>
</Tabs>

## Checkout our Vue Chat sample app

Visit our [Vue Chat sample app](https://github.com/cometchat-pro/javascript-vue-chat-app) repo to see it in action.