Nuxt.Js Integration

Integrate CometChat Vue UI Kit with Nuxt.js using ClientOnly rendering, app credentials, package setup, and chat component configuration.

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

Pre-requisites

Please make sure you have a running Next.js app. Please follow the Nuxt.js Documentation in case you do not have a Nuxt.js app setup on your system.

Install CometChat UI Kit

Please make sure you have installed the CometChat UI Kit by following the Integration documentation.

Build Chat component

1. In the **app.vue** file, we will render a component which will be responsible for rendering CometChat UI Kit.

app.vue

<template>
  <ClientOnly>
      <CometChatNoSSR></CometChatNoSSR>
  </ClientOnly>
</template>

<script>
  export default {
    name: "CometChat"
  }
</script>

Replace APP_ID, REGION, and AUTH_KEY with your CometChat App ID, Region and Auth Key in the below code. You can get these details from the CometChat Dashboard

2. Next, we will create a file named **consts.js** where will keep the CometChat App Credentials. Place this file in the pages folder as well. And add the below code in the file.

JavaScript

export const COMETCHAT_CONSTANTS = {
  APP_ID: "APP_ID",
  REGION: "REGION",
  AUTH_KEY: "AUTH_KEY",
};

3. Now let us move to the most important part, rendering the CometChat UI Kit. Create a file named **CometChatNoSSR.js** inside the components folder of the app.

Replace UID in the below code.

CometChatNoSSR.vue

<template>
  <div v-if="Object.keys(userObject).length" :style="{ width: `100%`, height: '100vh' }">
    <CometChatConversationsWithMessages />
  </div>
</template>

<script setup>

import { CometChatConversationsWithMessages } from '@cometchat/chat-uikit-vue';
import "@cometchat/chat-uikit-vue/dist/style.css";
import { CometChatUIKit } from "@cometchat/chat-uikit-vue";
import { UIKitSettingsBuilder } from "@cometchat/uikit-shared";
import { COMETCHAT_CONSTANTS } from '~/consts';

const userObject = ref('');
onMounted(async () => {
  const UIKitSettings = new UIKitSettingsBuilder()
    .setAppId(COMETCHAT_CONSTANTS.APP_ID)
    .setRegion(COMETCHAT_CONSTANTS.REGION)
    .setAuthKey(COMETCHAT_CONSTANTS.AUTH_KEY)
    .subscribePresenceForAllUsers()
    .build();

  await CometChatUIKit.init(UIKitSettings);
  const user = await CometChatUIKit.getLoggedinUser();
  if (user) {
    userObject.value = user;
  } else {
    const UID = "UID";
    const loggedInUser = await CometChatUIKit.login(UID, COMETCHAT_CONSTANTS.AUTH_KEY);
    userObject.value = loggedInUser;
  }
});
</script>

4. Now run the app using npm run dev & navigate to localhost:3000/chat. Change the port to the port on which the app is running.