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.

CLI

npm install vue

Install CometChat SDK

use the following command

CLI

npm install @cometchat-pro_chat@3.0.5 --save

Include Vue UI Kit

CLI

git clone https://github.com/cometchat-pro/cometchat-pro-vue-ui-kit.git

• 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

Vue

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

Replace APP_ID, REGION, and AUTH_KEY with your CometChat App ID, Region, and in the below code.

Create consts.js file with ComeChat details at root level

JavaScript

module.exports = {
  APP_ID: "APP_ID",
  REGION: "REGION",
  AUTH_KEY: "AUTH_KEY"
}

Create CometChatNoSSR.vue component at **root **level

Replace UID in the below code.

Vue

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

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

nuxt.config.js

build: {
    extend(config, ctx) {
      config.module.rules.push({
        test: /\.(ogg|mp3|wav|mpe?g)$/i,
        loader: 'file-loader',
        options: {
          name: '[path][name].[ext]'
        }
      })
    },
}