\n\n
\n\n# CometChat Vue UI Kit\n\n\n\n\n\n\n\n\n
\n
\n
\n
![\"Main\"](\"https://github.com/cometchat-pro/cometchat-pro-vue-ui-kit/blob/pluto/Screenshots/main.png\")
\n
\n
\n
\n\n\nCometChat Vue UI Kit is a collection of custom UI Components designed to build text chat and voice/video calling features in your application.\n\nThe UI Kit is developed to keep developers in mind and aims to reduce development efforts significantly.\n\n---\n\n## Features\n\n- Private(1-1) & Group Conversations\n- Voice & video calling & conferencing\n- Typing Indicators\n- Text, Media and Custom messages\n- Read receipts\n- Online Presence Indicators\n- Message History\n- Users & Friends List\n- Search by users and groups\n- Groups List\n- Conversations List\n\n## Extensions\n\n[Thumbnail Generation](https://www.cometchat.com/docs/extensions/thumbnail-generation) | [Link Preview](https://www.cometchat.com/docs/extensions/link-preview) | [Smart Replies](https://www.cometchat.com/docs/extensions/smart-replies) | [Polls](https://www.cometchat.com/docs/extensions/polls) | [Reactions](https://www.cometchat.com/docs/extensions/reactions) | [Stickers](https://www.cometchat.com/docs/extensions/stickers)\n\n## Prerequisites\n\nBefore you begin, ensure you have met the following requirements:\n\n- A text editor, to write code in. This could be a text editor (e.g. [Visual Studio Code](https://code.visualstudio.com/), [Notepad++](https://notepad-plus-plus.org/), [Sublime Text](https://www.sublimetext.com/), [Atom](https://atom.io/), or [VIM](https://www.vim.org/))\n\n- [Node](https://nodejs.org/)\n\n- [npm](https://www.npmjs.com/get-npm)\n\n- [Vue](https://vuejs.org/)\n\n---\n\n## Installing Vue UI Kit\n\n## 1. Setup\n\n### i. Register on CometChat 🔧\n\nTo install Vue UI Kit, you need to first register on CometChat Dashboard.
Click here to sign up\n\n### ii. Get your Application Keys :key:\n\n- Create a new app\n- Head over to the Quick Start or API & Auth Keys section and note the `App ID`, `Auth Key`, and `Region`.\n\n
\n\n## 2. Configure CometChat inside your app\n\n### i. Import CometChat SDK\n\n```javascript\nimport { CometChat } from \"@cometchat-pro/chat\";\n```\n\n### ii. Initialize CometChat 🌟\n\nThe `init()` method initializes the settings required for CometChat.\nWe suggest calling the `init()` method on app startup, preferably in the `main.ts`, wrapping the `platformBrowserDynamic().bootstrapModule(AppModule)` as shown below.\n\n```javascript\nconst appID = \"APP_ID\";\nconst region = \"REGION\";\nconst appSetting = new CometChat.AppSettingsBuilder()\n .subscribePresenceForAllUsers()\n .setRegion(region)\n .build();\nCometChat.init(appID, appSetting).then(\n () => {\n console.log(\"Initialization completed successfully\");\n // You can now call login function.\n platformBrowserDynamic()\n .bootstrapModule(AppModule)\n .catch((err) => console.error(err));\n },\n (error) => {\n console.log(\"Initialization failed with error:\", error);\n // Check the reason for error and take appropriate action.\n }\n);\n```\n\n**Note:**\n\n- Replace APP_ID and REGION with your CometChat `App ID` and `Region` in the above code.\n
\n\n## 3. Add UI Kit to your project\n\n- Install UIKit package from npm - `npm install @cometchat-pro/vue-ui-kit`\n\n
\n
![](\"https://github.com/cometchat-pro/cometchat-pro-vue-ui-kit/blob/pluto/Screenshots/add-ui-kit.png\")
\n
\n\n- Import the Components in the respective module where the component will be used.\n\n
\n\n## 4. Launch Cometchat\n\nUsing the `CometChatConversationsWithMessages` component from the UI Kit, you can launch a fully functional chat application.\nIn this component Chats and Messages are interlinked and work together to launch a fully functional chat on your website/application.\n\n**Import the CometChat in the required module**\n\n```html\nimport { CometChatConversationsWithMessages } from '@cometchat-pro/vue-ui-kit'\n\n
\n```\n\n---\n\n# Checkout our sample app\n\nVisit our [Vue sample app](https://github.com/cometchat-pro/cometchat-pro-vue-ui-kit/tree/pluto/examples/cometchat-vue-sample-app) repo to run the Vue sample app.\n\n---\n\n# Troubleshooting\n\n- To read the full documentation on UI Kit integration visit our [Documentation](https://www.cometchat.com/docs/vue-uikit-beta/overview).\n\n- Facing any issues while integrating or installing the UI Kit please connect with us via real time support present in
CometChat Dashboard.\n\n---\n\n# Contributors\n\nThanks to the following people who have contributed to this project:\n\n[👨💻 @priyadarshininadar](https://github.com/priyadarshininadar)
\n[👨💻 @ajaygajra](https://github.com/ajaygajra)
\n\n# Contact :mailbox:\n\nContact us via real time support present in [CometChat Dashboard](https://app.cometchat.com/).\n\n---\n\n# License\n\nThis project uses the following [license](./LICENSE).\n","readmeFilename":"Readme.md"}
![\"CometChat\"](\"./Screenshots/logo.png\"){kind=logo}
![\"CometChat\"](\"https://github.com/cometchat-pro/cometchat-pro-vue-ui-kit/blob/pluto/Screenshots/logo.png\"){kind=logo}