{"id":15900,"library":"vue-advanced-chat","title":"Vue Advanced Chat Component","description":"Vue Advanced Chat is a versatile, highly customizable chat rooms component built with Vue.js, but designed to be compatible with any JavaScript framework (Vue, React, Angular) or no framework at all, thanks to its Web Component support. Currently stable at version 2.1.2, it sees regular updates with minor bug fixes and feature enhancements, as evidenced by its consistent monthly or bi-monthly release cadence. Key differentiators include its backend-agnostic design, comprehensive feature set (images, videos, files, voice messages, emojis, message editing, replies, user tagging, text formatting), integrated UI elements for chat states (seen, typing, deleted), and support for online/offline statuses and light/dark themes. It ships with TypeScript types, facilitating robust development, and provides examples for integration with backends like Firestore, demonstrating its flexibility in handling real-time data.","status":"active","version":"2.1.2","language":"javascript","source_language":"en","source_url":"https://github.com/advanced-chat/vue-advanced-chat","tags":["javascript","vue","vuejs","chat","vue-js-chat","multiple","group","rooms","realtime","typescript"],"install":[{"cmd":"npm install vue-advanced-chat","lang":"bash","label":"npm"},{"cmd":"yarn add vue-advanced-chat","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-advanced-chat","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"This import primarily serves to register the `<vue-advanced-chat>` and `<emoji-picker>` custom elements globally in your application's entry point, rather than importing a specific JavaScript symbol. It's a side-effect import.","wrong":"import { VueAdvancedChat } from 'vue-advanced-chat';","symbol":"VueAdvancedChat (as custom element registration)","correct":"import 'vue-advanced-chat';"},{"note":"This stylesheet is essential for the component's appearance and should be imported in your main application entry file (e.g., `main.js` or `App.vue`'s script setup) or a global stylesheet.","symbol":"CSS Styles","correct":"import 'vue-advanced-chat/dist/vue-advanced-chat.css';"},{"note":"For type safety in TypeScript projects, import specific interfaces and types like `ChatMessage`, `Room`, or `User` directly from the `/dist/types` path, as they are not typically exported from the main package entry.","wrong":"import { ChatMessage } from 'vue-advanced-chat';","symbol":"TypeScript Types","correct":"import type { ChatMessage, Room, User } from 'vue-advanced-chat/dist/types';"}],"quickstart":{"code":"/* vite.config.ts */\nimport { defineConfig } from 'vite';\nimport vue from '@vitejs/plugin-vue';\n\nexport default defineConfig({\n  plugins: [\n    vue({\n      template: {\n        compilerOptions: {\n          // Crucial for Vue to recognize vue-advanced-chat and emoji-picker as custom elements\n          isCustomElement: tagName => tagName === 'vue-advanced-chat' || tagName === 'emoji-picker'\n        }\n      }\n    })\n  ]\n});\n\n/* main.ts or main.js */\nimport { createApp } from 'vue';\nimport App from './App.vue';\nimport 'vue-advanced-chat/dist/vue-advanced-chat.css'; // Essential styles\nimport 'vue-advanced-chat'; // Registers the custom Web Components\n\nconst app = createApp(App);\napp.mount('#app');\n\n/* App.vue */\n<template>\n  <div id=\"app-container\">\n    <vue-advanced-chat\n      height=\"100vh\"\n      :current-user-id=\"currentUserId\"\n      :rooms=\"JSON.stringify(rooms)\"\n      :rooms-loaded=\"true\"\n      :messages=\"JSON.stringify(messages)\"\n      :messages-loaded=\"true\"\n      @send-message=\"handleSendMessage\"\n      @fetch-messages=\"handleFetchMessages\"\n    />\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref } from 'vue';\n// For type safety, if using TypeScript\n// import type { ChatMessage, Room } from 'vue-advanced-chat/dist/types'; \n\nconst currentUserId = 'user1';\n\nconst rooms = ref([\n  {\n    roomId: 'room1',\n    roomName: 'General Chat',\n    avatar: 'https://via.placeholder.com/150',\n    users: [\n      { _id: 'user1', username: 'Alice' },\n      { _id: 'user2', username: 'Bob' }\n    ],\n    lastMessage: { content: 'Hello everyone!', senderId: 'user2', timestamp: Date.now() }\n  },\n  {\n    roomId: 'room2',\n    roomName: 'Private Discussion',\n    users: [\n      { _id: 'user1', username: 'Alice' },\n      { _id: 'user3', username: 'Charlie' }\n    ],\n    lastMessage: { content: 'Meeting at 3 PM?', senderId: 'user3', timestamp: Date.now() }\n  }\n]);\n\nconst messages = ref([\n  {\n    _id: 'msg1',\n    content: 'Hi there!',\n    senderId: 'user1',\n    timestamp: Date.now() - 60000\n  },\n  {\n    _id: 'msg2',\n    content: 'Hello Alice!',\n    senderId: 'user2',\n    timestamp: Date.now() - 30000\n  },\n  {\n    _id: 'msg3',\n    content: 'How are you two?',\n    senderId: 'user1',\n    timestamp: Date.now() - 10000\n  }\n]);\n\nconst handleSendMessage = ({ detail }: any) => {\n  const { roomId, content, files, replyMessage } = detail; // 'detail' contains the event payload\n  console.log('New message:', { roomId, content, files, replyMessage });\n  messages.value.push({\n    _id: `msg${Date.now()}`,\n    content: content,\n    senderId: currentUserId,\n    timestamp: Date.now()\n  });\n  // In a real app, send this message to your backend\n};\n\nconst handleFetchMessages = ({ detail }: any) => {\n  const { room, options } = detail;\n  console.log('Fetching messages for room:', room.roomId, options);\n  // Simulate async fetch for older messages\n  setTimeout(() => {\n    // Add logic to load historical messages based on 'options.reset' or 'options.direction'\n  }, 500);\n};\n</script>\n\n<style>\nbody, html, #app {\n  margin: 0;\n  padding: 0;\n  height: 100%;\n  overflow: hidden; /* Important for full-height chat layout */\n}\n#app-container {\n  height: 100vh;\n  width: 100vw;\n}\n</style>","lang":"typescript","description":"This quickstart demonstrates how to set up `vue-advanced-chat` in a Vue 3 application using Vite. It covers the necessary `vite.config.ts` modifications to recognize custom elements, global CSS and component registration, and a basic `App.vue` component structure with example rooms, messages, and event handlers for sending and fetching messages."},"warnings":[{"fix":"Add the `isCustomElement` option to your Vue plugin configuration: `compilerOptions: { isCustomElement: tagName => tagName === 'vue-advanced-chat' || tagName === 'emoji-picker' }`.","message":"When using `vue-advanced-chat` within a Vue.js application, it functions as a Web Component. It is crucial to configure your Vue compiler (e.g., in `vite.config.js` or `vue.config.js`) to recognize `vue-advanced-chat` and `emoji-picker` as custom elements. Failing to do so will result in 'Failed to resolve component' errors.","severity":"gotcha","affected_versions":">=2.0.0"},{"fix":"Ensure you `JSON.stringify()` your `rooms` and `messages` data arrays before passing them as props: `:rooms=\"JSON.stringify(rooms)\"` and `:messages=\"JSON.stringify(messages)\"`.","message":"The `rooms` and `messages` props on the `<vue-advanced-chat>` component expect stringified JSON arrays, not direct JavaScript objects. Passing raw objects will likely lead to incorrect rendering or runtime errors.","severity":"gotcha","affected_versions":">=2.0.0"},{"fix":"Include `import 'vue-advanced-chat/dist/vue-advanced-chat.css';` in your application's entry file (e.g., `main.js`, `main.ts`, or a global styling file) to load the necessary styles.","message":"The component requires a specific CSS file for its styling. If this stylesheet is not imported, the chat interface will appear unstyled, broken, or not function correctly.","severity":"gotcha","affected_versions":">=2.0.0"},{"fix":"Develop or integrate an existing real-time backend solution (e.g., WebSockets, Firebase, Pusher) and connect its data flow to the component's events and prop updates.","message":"Vue Advanced Chat is backend-agnostic, meaning it does not come with built-in real-time communication logic. You must implement your own backend and integrate it using the component's event API (e.g., `@send-message`, `@fetch-messages`).","severity":"gotcha","affected_versions":">=2.0.0"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"fix":"In your Vue build configuration (e.g., `vite.config.js` for Vite or `vue.config.js` for Vue CLI), add `isCustomElement: tagName => tagName === 'vue-advanced-chat' || tagName === 'emoji-picker'` within your Vue plugin's `template.compilerOptions`.","cause":"`vue-advanced-chat` is being used as a custom HTML element but is not registered as such in your Vue application's compiler options.","error":"[Vue warn]: Failed to resolve component: vue-advanced-chat"},{"fix":"Add `import 'vue-advanced-chat/dist/vue-advanced-chat.css';` to your main JavaScript/TypeScript entry file (e.g., `main.js`, `main.ts`) or a global style entry point.","cause":"The core CSS stylesheet for `vue-advanced-chat` has not been imported into your application.","error":"(Component appears unstyled or with broken layout)"},{"fix":"Ensure that the `rooms` and `messages` props are explicitly converted to JSON strings using `JSON.stringify()` before being passed to the component, e.g., `:rooms=\"JSON.stringify(myRoomsArray)\"`.","cause":"You are passing complex JavaScript objects directly to `rooms` or `messages` props, but the component expects these props to be pre-stringified JSON.","error":"TypeError: Converting circular structure to JSON"},{"fix":"Implement handlers for events like `@send-message` and `@fetch-messages` to interact with your chosen backend service. Update the component's `messages` and `rooms` props with data retrieved from your backend.","cause":"The component is backend-agnostic and requires you to implement the logic for fetching and sending messages using its event API. It does not handle data persistence or real-time communication out-of-the-box.","error":"Messages or rooms do not display, or sending messages does nothing."}],"ecosystem":"npm"}