Vue
npm install vue
npm install @cometchat-pro_chat@3.0.5 --save
git clone https://github.com/cometchat-pro/cometchat-pro-vue-ui-kit.git
Chat.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>
consts.js
root
module.exports = { APP_ID: "APP_ID", REGION: "REGION", AUTH_KEY: "AUTH_KEY" }
CometChatNoSSR.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>
build: { extend(config, ctx) { config.module.rules.push({ test: /\.(ogg|mp3|wav|mpe?g)$/i, loader: 'file-loader', options: { name: '[path][name].[ext]' } }) }, }
Was this page helpful?