{"id":12406,"library":"vue-beautiful-chat","title":"Vue Beautiful Chat","description":"Vue Beautiful Chat is an open-source, backend-agnostic chat user interface component designed for Vue.js applications. Currently stable at version 2.5.0, it offers an intercom-like chat window that is highly customizable and free to use. Key features include group chat capabilities, a togglable user list with profiles, automatic URL linking in messages, and support for message styling via `msgdown`. The component focuses solely on the presentation layer, requiring developers to implement their own messaging backend. It distinguishes itself by providing a rich set of UI features out-of-the-box and maintains a steady release cadence for new features and improvements.","status":"active","version":"2.5.0","language":"javascript","source_language":"en","source_url":"https://github.com/mattmezza/vue-beautiful-chat","tags":["javascript","vue","vuejs","chat","vue-js-chat"],"install":[{"cmd":"npm install vue-beautiful-chat","lang":"bash","label":"npm"},{"cmd":"yarn add vue-beautiful-chat","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-beautiful-chat","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"The `Chat` module is a default export, intended to be registered as a Vue plugin via `Vue.use(Chat)` or `app.use(Chat)`.","wrong":"import { Chat } from 'vue-beautiful-chat'","symbol":"Chat","correct":"import Chat from 'vue-beautiful-chat'"},{"note":"The primary way to use the component is by registering the plugin with `Vue.use(Chat)`, which makes `<beautiful-chat>` globally available. Direct import of the `.vue` file is not the intended or stable API.","wrong":"import BeautifulChat from 'vue-beautiful-chat/dist/BeautifulChat.vue'","symbol":"BeautifulChat","correct":"Vue.use(Chat) // component <beautiful-chat> is registered globally"},{"note":"Icon assets are imported directly from the `src/assets` directory of the package. While this works in development with common bundlers, relying on `src` paths can be brittle in production or with custom build configurations. Consider bundling your own icons or checking for an alternative icon prop API.","wrong":"import CloseIcon from 'vue-beautiful-chat/assets/close-icon.png'","symbol":"Icons (e.g., CloseIcon)","correct":"import CloseIcon from 'vue-beautiful-chat/src/assets/close-icon.png'"}],"quickstart":{"code":"import { createApp } from 'vue';\nimport App from './App.vue';\nimport Chat from 'vue-beautiful-chat';\n\n// Import example icons (note: these paths can be brittle, see warnings)\nimport CloseIcon from 'vue-beautiful-chat/src/assets/close-icon.png';\nimport OpenIcon from 'vue-beautiful-chat/src/assets/logo-no-bg.svg';\nimport FileIcon from 'vue-beautiful-chat/src/assets/file.svg';\nimport CloseIconSvg from 'vue-beautiful-chat/src/assets/close.svg';\n\n// main.js (or equivalent Vue entry file)\nconst app = createApp(App);\napp.use(Chat); // Registers the <beautiful-chat> component globally\napp.mount('#app');\n\n// App.vue (example component)\n<template>\n  <div id=\"app\">\n    <beautiful-chat\n      :participants=\"participants\"\n      :titleImageUrl=\"titleImageUrl\"\n      :onMessageWasSent=\"onMessageWasSent\"\n      :messageList=\"messageList\"\n      :newMessagesCount=\"newMessagesCount\"\n      :isOpen=\"isChatOpen\"\n      :close=\"closeChat\"\n      :icons=\"icons\"\n      :open=\"openChat\"\n      :showEmoji=\"true\"\n      :showFile=\"true\"\n      :showEdition=\"true\"\n      :showDeletion=\"true\"\n      :showTypingIndicator=\"showTypingIndicator\"\n      :showLauncher=\"true\"\n      :showCloseButton=\"true\"\n      :colors=\"colors\"\n      :alwaysScrollToBottom=\"alwaysScrollToBottom\"\n      :messageStyling=\"messageStyling\"\n      @onType=\"handleOnType\"\n      @edit=\"editMessage\" />\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'App',\n  data() {\n    return {\n      icons:{\n        open:{ img: OpenIcon, name: 'default' },\n        close:{ img: CloseIcon, name: 'default' },\n        file:{ img: FileIcon, name: 'default' },\n        closeSvg:{ img: CloseIconSvg, name: 'default' },\n      },\n      participants: [\n        { id: 'user1', name: 'Matteo', imageUrl: 'https://avatars3.githubusercontent.com/u/1915989?s=230&v=4' },\n        { id: 'user2', name: 'Support', imageUrl: 'https://avatars3.githubusercontent.com/u/37018832?s=200&v=4' }\n      ],\n      titleImageUrl: 'https://a.slack-edge.com/66f9/img/avatars-teams/ava_0001-34.png',\n      messageList: [\n        { type: 'text', author: `me`, data: { text: `Hello from Vue Beautiful Chat!` } },\n        { type: 'text', author: `user1`, data: { text: `How can I assist you today?` } }\n      ],\n      newMessagesCount: 0,\n      isChatOpen: false,\n      showTypingIndicator: '',\n      colors: {\n        header: { bg: '#4e8cff', text: '#ffffff' },\n        launcher: { bg: '#4e8cff' },\n        messageList: { bg: '#ffffff' },\n        sentMessage: { bg: '#4e8cff', text: '#ffffff' },\n        receivedMessage: { bg: '#eaeaea', text: '#000000' } // Completed value\n      },\n      alwaysScrollToBottom: true,\n      messageStyling: true,\n    };\n  },\n  methods: {\n    onMessageWasSent(message) {\n      this.messageList.push(message);\n      // Simulate an AI or another user's response after a short delay\n      setTimeout(() => {\n        const responseMessage = {\n          type: 'text',\n          author: 'user2',\n          data: { text: `I received your message: \"${message.data.text}\"` }\n        };\n        this.messageList.push(responseMessage);\n        this.newMessagesCount++;\n      }, 1000);\n    },\n    handleOnType(event) {\n      console.log('User is typing:', event.input, event.from);\n      // Implement logic to show typing indicator for specific users\n      // e.g., this.showTypingIndicator = event.from;\n    },\n    editMessage(message) {\n      const index = this.messageList.findIndex(m => m.id === message.id);\n      if (index !== -1) {\n        this.messageList.splice(index, 1, message);\n      }\n      console.log('Message edited:', message);\n    },\n    closeChat() {\n      this.isChatOpen = false;\n    },\n    openChat() {\n      this.isChatOpen = true;\n      this.newMessagesCount = 0; // Reset count when chat is opened\n    }\n  },\n  mounted() {\n    // Open chat window automatically after a short delay for demo\n    setTimeout(() => {\n      this.isChatOpen = true;\n    }, 500);\n  }\n};\n</script>\n\n<style>\n#app {\n  font-family: Avenir, Helvetica, Arial, sans-serif;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  text-align: center;\n  color: #2c3e50;\n  margin-top: 60px;\n}\n</style>","lang":"javascript","description":"This example demonstrates how to integrate `vue-beautiful-chat` into a Vue application, showcasing component registration, prop configuration, event handling for messages and typing, and basic chat window management including opening/closing and sending/receiving messages."},"warnings":[{"fix":"Review the official documentation for version 2.x to understand the updated API, prop names, and event signatures. Code written for 1.x will likely require refactoring.","message":"The 2.0.0 release introduced significant API changes, including new features like group chat, user lists, user profiles, and message autolink, which altered the prop and event interfaces of the component.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Plan for integrating a real-time communication service (e.g., WebSockets, Firebase, Pusher, etc.) with the `onMessageWasSent` event and updating the `messageList` prop programmatically.","message":"The library is backend-agnostic, meaning it only provides the user interface component. You must implement your own real-time messaging backend and integration logic to handle message persistence, delivery, and user management.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"For production, consider either bundling these assets into your own project's `assets` directory and importing them locally, or verify your build tool (Webpack, Vite) is correctly configured to handle `node_modules` `src` imports. Check if the library provides a more robust way to customize icons via props (e.g., by accepting base64 strings or publicly hosted URLs).","message":"The examples and quickstart import image assets directly from `vue-beautiful-chat/src/assets/`. While this works in development, relying on `src` paths in `node_modules` can be brittle and may break in production builds or with different bundler configurations.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure you call `app.use(Chat)` (for Vue 3) or `Vue.use(Chat)` (for Vue 2) in your application's entry file before mounting your Vue app.","cause":"The `vue-beautiful-chat` plugin was not registered with your Vue application.","error":"[Vue warn]: Unknown custom element: <beautiful-chat> - did you register the component correctly?"},{"fix":"Check your bundler configuration for asset handling. If the issue persists, consider downloading the necessary icon files and importing them from your local project's asset directory instead of directly from the package's `src` folder.","cause":"Your build tool (e.g., Webpack, Vite) is unable to resolve or process the image file imported directly from the `src` directory within the `node_modules` package.","error":"Module not found: Error: Can't resolve 'vue-beautiful-chat/src/assets/close-icon.png'"}],"ecosystem":"npm"}