> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-rn-guide-message-privately.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Integration

> Integrate CometChat Vue UI Kit with App ID, Auth Key, Region, package setup, initialization, login, and chat component rendering.

### Before you begin

Before installing **UI Kit**, you need to create a CometChat application on the CometChat Dashboard, which comprises everything required in a chat service including users, groups, calls & messages. You will need the `App ID` , `AuthKey`, `Region` of your CometChat application when initialising the SDK.

\*\*i. Register on CometChat \*\*

* You need to first register on **CometChat Dashboard**. [Click here to sign up](https://app.cometchat.com/signup).

\*\*ii. Get Your Application Keys \*\*

<Note>
  Each CometChat application can be integrated with a single client app. Within the same application, users can communicate with each other across all platforms, whether they are on mobile devices or on the web.
</Note>

* Create a **new app**
* Head over to the **Credentials** **section** and note the **App ID**, **Region and** **Auth Key**.

<Note>
  to know more about the Nuxt.js integration [click here](/ui-kit/vue/nuxtjs-integration)

  ## :::

  ### Built With[](#built-with "Direct link to Built With")

  * Node 16.15.0
  * npm 8.5.5
  * Vue 3.3.2

  ***

  ### Get Started[](#get-started "Direct link to Get Started")

  You can start building a modern messaging experience in your app by installing UI Kit.

  ### 1. Add UI Kit as Dependency[](#1-add-ui-kit-as-dependency "Direct link to 1. Add UI Kit as Dependency")

  This developer kit is an add-on feature to [CometChat JavaScript SDK](/sdk/javascript/overview), so installing it will also install the core Chat SDK.

  * CLI

  ```bash theme={null}
  npm install @cometchat/chat-uikit-vue
  ```

  <Note>
    If your npm version is 3 through 6, install the below mentioned peer dependencies as well.
  </Note>
</Note>

<Tabs>
  <Tab title="CLI">
    ```sh theme={null}
    npm install @cometchat/uikit-elements @cometchat/uikit-resources @cometchat/uikit-shared
    @cometchat/chat-sdk-javascript
    ```
  </Tab>
</Tabs>

### 2. Initialise CometChatUIKit

The `init()` method initialises the settings required for CometChat. We suggest calling the `init()` method on app startup.

<Note>
  Make sure you replace the **APP\_ID**, **REGION** and **AUTH\_KEY** with your CometChat App ID, Region and Auth Key in the below code. The Auth Key is an optional property of the `UIKitSettings` Class. It is intended for use primarily during proof-of-concept (POC) development or in the early stages of application development. You can use the [Auth Token](#login-using-auth-token) method to log in securely.
</Note>

<Tabs>
  <Tab title="main.js">
    ```js theme={null}
    import { UIKitSettingsBuilder } from "@cometchat/uikit-shared";
    import { CometChatUIKit } from "@cometchat/chat-uikit-vue";

    const COMETCHAT_CONSTANTS = {
      APP_ID: "APP_ID", // Replace with your App ID
      REGION: "REGION", // Replace with your App Region
      AUTH_KEY: "AUTH_KEY", // Replace with your Auth Key
    };

    //create the builder
    const UIKitSettings = new UIKitSettingsBuilder()
      .setAppId(COMETCHAT_CONSTANTS.APP_ID)
      .setRegion(COMETCHAT_CONSTANTS.REGION)
      .setAuthKey(COMETCHAT_CONSTANTS.AUTH_KEY)
      .subscribePresenceForFriends()
      .build();

    //Initialize CometChat
    CometChatUIKit.init(UIKitSettings)?.then(() => {
      //login your user
    });
    ```
  </Tab>
</Tabs>

<Note>
  You can choose between different storage methods to store data. By default, we use local storage. To learn more about available storage options and how to configure them, [click here](/ui-kit/vue/ui-kit-methods#setting-session-storage-mode).
</Note>

### 3. Login User

The login() method returns the User object containing all the information of the logged-in user.

#### Login using Auth Key

<Note>
  This straightforward authentication method is ideal for proof-of-concept (POC) development or during the early stages of application development. For production environments, however, we strongly recommend using an [Auth Token](#login-using-auth-token) instead of an Auth Key to ensure enhanced security.
</Note>

<Tabs>
  <Tab title="main.js">
    ```js theme={null}
    import { createApp, ref } from "vue";
    import { CometChatUIKit, CometChatTheme } from "@cometchat/chat-uikit-vue";

    const UID = "UID";

    CometChatUIKit.getLoggedinUser()
      .then((user) => {
        if (!user) {
          //Login user
          CometChatUIKit.login(UID)
            .then((user) => {
              console.log("Login Successful:", { user });
              //mount your app
              mountApp();
            })
            .catch(console.log);
        } else {
          //mount your app
          mountApp();
        }
      })
      .catch(console.log);

    const mountApp = () => {
      const app = createApp(App);
      app.mount("#app");
    };
    ```
  </Tab>
</Tabs>

<Note>
  * Make sure you replace the UID with a genuine UID 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.
</Note>

#### Login using Auth Token

This advanced authentication procedure does not use the Auth Key directly in your client code thus ensuring safety.

1. [Create a User](/rest-api/chat-apis) via the CometChat API when the user signs up in your app.
2. [Create an Auth Token](/rest-api/chat-apis) via the CometChat API for the new user and save the token in your database.
3. Load the Auth Token in your client and pass it to the `loginWithAuthToken()` method.

<Tabs>
  <Tab title="main.js">
    ```js theme={null}
    import { createApp, ref } from "vue";
    import { CometChatUIKit, CometChatTheme } from "@cometchat/chat-uikit-vue";

    const theme = ref(new CometChatTheme({}));

    const authToken = "AUTH_TOKEN"; //Replace with your auth token
    CometChatUIKit.getLoggedinUser()
      .then((user) => {
        if (!user) {
          //Login user
          CometChatUIKit.loginWithAuthToken(authToken)
            .then((user) => {
              console.log("Login Successful:", { user });
              //mount your app
              mountApp();
            })
            .catch(console.log);
        } else {
          //mount your app
          mountApp();
        }
      })
      .catch(console.log);

    const mountApp = () => {
      const app = createApp(App);

      app.mount("#app");
    };
    ```
  </Tab>
</Tabs>

### 4. Launch UI Components

The UI Kit is a set of prebuilt UI components that allows you to easily build beautiful in-app chat with all the essential messaging features.

#### Add the required components inside your project.

<Tabs>
  <Tab title="App.vue">
    ```js theme={null}
    <template>
      <div class="chat"><CometChatUsersWithMessages :isMobileView="true" /></div>
    </template>

    <script>
    import { CometChatUsersWithMessages } from '@cometchat/chat-uikit-vue';
    import "@cometchat/chat-uikit-vue/dist/style.css";

    export default {
      name: 'App',
      components: {
        CometChatUsersWithMessages
      }
    }
    </script>
    <style>
      div.chat {
      	width: 800px;
      }
    </style>
    ```
  </Tab>
</Tabs>

#### Run the project

<Tabs>
  <Tab title="CLI">
    ```sh theme={null}
    //run the project
    npm run serve
    ```
  </Tab>
</Tabs>

***

| Component           | Description                                                                                                                                      |                                                |
| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------- |
| **`UI Components`** | CometChat's UI Kit is a set of pre-built UI components that allows you to easily craft an in-app chat with all the essential messaging features. | [Navigate](/ui-kit/vue/ui-components-overview) |