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

# Integration With Nuxt.Js

> Integration With Nuxt.Js — CometChat documentation.

Using Vue UI Kit, you can integrate your Nuxt.js application with CometChat.

## Pre-requisites

#### First, if not already installed, add Vue from your terminal using the following command.

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

## Install CometChat SDK

use the following command

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

## Include Vue UI Kit

<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 **pages** folder
* Copy all the dependencies from package.json into your project's package.js and install them

## Build Chat component

### Create *`Chat.vue`* file in your **pages** folder with the following code

<Tabs>
  <Tab title="Vue">
    ```js theme={null}
    <template>
        <client-only>
            <CometChatNoSSR></CometChatNoSSR>
        </client-only>
    </template>
    <script>
    export default {
        name: "RTBChat",
        ssr: false,
        components: {
            'CometChatNoSSR': () => import('../CometChatNoSSR.vue')
        },
        mounted() {
            window.CometChat = require('@cometchat-pro/chat').CometChat
        }
    }
    </script>
    ```
  </Tab>
</Tabs>

<Warning>
  Replace APP\_ID, REGION, and AUTH\_KEY with your CometChat App ID, Region, and in the below code.
</Warning>

### Create `consts.js` file with ComeChat details at `root` level

<Tabs>
  <Tab title="JavaScript">
    ```js theme={null}
    module.exports = {
      APP_ID: "APP_ID",
      REGION: "REGION",
      AUTH_KEY: "AUTH_KEY"
    }
    ```
  </Tab>
</Tabs>

### Create `CometChatNoSSR.vue` component at \*\*`root `\*\*level

<Warning>
  Replace UID in the below code.
</Warning>

<Tabs>
  <Tab title="Vue">
    ```js theme={null}
    <template>
      <div
        v-if="Object.keys(user).length"
        :style="{ width: `100%`, height: '100vh' }">
        <client-only>
          <comet-chat-uI />
        </client-only>
      </div>
    </template>

    <script>
    import { CometChatUI } from "./cometchat-pro-vue-ui-kit/CometChatWorkspace/src";
    import { COMETCHAT_CONSTANTS } from './CONSTS';

    export default {
      name: "CommetChat",
      ssr: false,
      components: {
        CometChatUI,
      },
      data: () => ({
        user: {},
        chatId: COMETCHAT_CONSTANTS.APP_ID,
        region: COMETCHAT_CONSTANTS.REGION,
        authKey: COMETCHAT_CONSTANTS.AUTH_KEY,
      }),
      mounted() {
        const appSetting = new window.CometChat.AppSettingsBuilder()
          .subscribePresenceForAllUsers()
          .setRegion(this.region)
          .build();
        window.CometChat.init(this.chatId, appSetting)
          .then(() => {
            const UID = "cometchat-uid-1";
            const apiKey = this.authKey;
            window.CometChat.login(UID, apiKey)
              .then((user) => {
                this.user = user;
                console.log(user);
              })
              .catch((error) => console.log("Login failed with exception:", error));
            // You can now call login function.
          })
          .catch((error) =>
            console.log("Initialization failed with error:", error)
          );
      },
    };
    </script>
    ```
  </Tab>
</Tabs>

#### Add Webpack config to compile sound files in nuxt.config.js

<Tabs>
  <Tab title="nuxt.config.js">
    ```js theme={null}
    build: {
        extend(config, ctx) {
          config.module.rules.push({
            test: /\.(ogg|mp3|wav|mpe?g)$/i,
            loader: 'file-loader',
            options: {
              name: '[path][name].[ext]'
            }
          })
        },
    }
    ```
  </Tab>
</Tabs>