[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-8892":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":16,"stars7d":16,"stars30d":17,"stars90d":16,"forks30d":16,"starsTrendScore":16,"compositeScore":18,"rankGlobal":10,"rankLanguage":10,"license":19,"archived":20,"fork":20,"defaultBranch":21,"hasWiki":20,"hasPages":22,"topics":23,"createdAt":10,"pushedAt":10,"updatedAt":33,"readmeContent":34,"aiSummary":35,"trendingCount":16,"starSnapshotCount":16,"syncStatus":36,"lastSyncTime":37,"discoverSource":38},8892,"vue-beautiful-chat","mattmezza\u002Fvue-beautiful-chat","mattmezza","A simple and beautiful Vue chat component backend agnostic, fully customisable and extendable.","https:\u002F\u002Fmatteo.merola.co\u002Fvue-beautiful-chat\u002F",null,"Vue",1569,439,31,13,0,1,20.93,"MIT License",false,"master",true,[24,25,26,27,28,29,30,31,32],"chat","colors","customer-support","frontend","marketing","message","support","vue","vuejs","2026-06-12 02:01:59","# vue-beautiful-chat\n\n`vue-beautiful-chat` provides an intercom-like chat window that can be included easily in any project for free. It provides no messaging facilities, only the view component.\n\n`vue-beautiful-chat` is porting to vue of `react-beautiful-chat` (which you can find [here](https:\u002F\u002Fgithub.com\u002Fmattmezza\u002Freact-beautiful-chat))\n\n\u003Ca href=\"https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fvue-beautiful-chat\" target=\"\\_parent\">\n  \u003Cimg alt=\"\" src=\"https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fdm\u002Fvue-beautiful-chat.svg\" \u002F>\n\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fmattmezza\u002Fvue-beautiful-chat\" target=\"\\_parent\">\n  \u003Cimg alt=\"\" src=\"https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Fstars\u002Fmattmezza\u002Fvue-beautiful-chat.svg?style=social&label=Star\" \u002F>\n\u003C\u002Fa>\n\nGo to [FAQ](#faq) ⬇️\n\n![gif](https:\u002F\u002Fmedia.giphy.com\u002Fmedia\u002F3ohs4wE4DqXw84xAMo\u002Fgiphy.gif)\n\n## Features\n\n- Customizeable\n- Backend agnostic\n- Free\n\n## [Demo](https:\u002F\u002Fmattmezza.github.io\u002Fvue-beautiful-chat\u002F)\n\n## Table of Contents\n- [Installation](#installation)\n- [Example](#example)\n- [Components](#components)\n\n## Installation\n\n```\n$ yarn add vue-beautiful-chat\n```\n\n## Example\n```javascript\nimport Chat from 'vue-beautiful-chat'\nVue.use(Chat)\n```\n\n```vue\n\u003Ctemplate>\n  \u003Cdiv>\n    \u003Cbeautiful-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      :disableUserListToggle=\"false\"\n      :messageStyling=\"messageStyling\"\n      @onType=\"handleOnType\"\n      @edit=\"editMessage\" \u002F>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n```\n```javascript\nexport default {\n  name: 'app',\n  data() {\n    return {\n      participants: [\n        {\n          id: 'user1',\n          name: 'Matteo',\n          imageUrl: 'https:\u002F\u002Favatars3.githubusercontent.com\u002Fu\u002F1915989?s=230&v=4'\n        },\n        {\n          id: 'user2',\n          name: 'Support',\n          imageUrl: 'https:\u002F\u002Favatars3.githubusercontent.com\u002Fu\u002F37018832?s=200&v=4'\n        }\n      ], \u002F\u002F the list of all the participant of the conversation. `name` is the user name, `id` is used to establish the author of a message, `imageUrl` is supposed to be the user avatar.\n      titleImageUrl: 'https:\u002F\u002Fa.slack-edge.com\u002F66f9\u002Fimg\u002Favatars-teams\u002Fava_0001-34.png',\n      messageList: [\n          { type: 'text', author: `me`, data: { text: `Say yes!` } },\n          { type: 'text', author: `user1`, data: { text: `No.` } }\n      ], \u002F\u002F the list of the messages to show, can be paginated and adjusted dynamically\n      newMessagesCount: 0,\n      isChatOpen: false, \u002F\u002F to determine whether the chat window should be open or closed\n      showTypingIndicator: '', \u002F\u002F when set to a value matching the participant.id it shows the typing indicator for the specific user\n      colors: {\n        header: {\n          bg: '#4e8cff',\n          text: '#ffffff'\n        },\n        launcher: {\n          bg: '#4e8cff'\n        },\n        messageList: {\n          bg: '#ffffff'\n        },\n        sentMessage: {\n          bg: '#4e8cff',\n          text: '#ffffff'\n        },\n        receivedMessage: {\n          bg: '#eaeaea',\n          text: '#222222'\n        },\n        userInput: {\n          bg: '#f4f7f9',\n          text: '#565867'\n        }\n      }, \u002F\u002F specifies the color scheme for the component\n      alwaysScrollToBottom: false, \u002F\u002F when set to true always scrolls the chat to the bottom when new events are in (new message, user starts typing...)\n      messageStyling: true \u002F\u002F enables *bold* \u002Femph\u002F _underline_ and such (more info at github.com\u002Fmattezza\u002Fmsgdown)\n    }\n  },\n  methods: {\n    sendMessage (text) {\n      if (text.length > 0) {\n        this.newMessagesCount = this.isChatOpen ? this.newMessagesCount : this.newMessagesCount + 1\n        this.onMessageWasSent({ author: 'support', type: 'text', data: { text } })\n      }\n    },\n    onMessageWasSent (message) {\n      \u002F\u002F called when the user sends a message\n      this.messageList = [ ...this.messageList, message ]\n    },\n    openChat () {\n      \u002F\u002F called when the user clicks on the fab button to open the chat\n      this.isChatOpen = true\n      this.newMessagesCount = 0\n    },\n    closeChat () {\n      \u002F\u002F called when the user clicks on the botton to close the chat\n      this.isChatOpen = false\n    },\n    handleScrollToTop () {\n      \u002F\u002F called when the user scrolls message list to top\n      \u002F\u002F leverage pagination for loading another page of messages\n    },\n    handleOnType () {\n      console.log('Emit typing event')\n    },\n    editMessage(message){\n      const m = this.messageList.find(m=>m.id === message.id);\n      m.isEdited = true;\n      m.data.text = message.data.text;\n    }\n  }\n}\n```\n\nFor more detailed examples see the demo folder.\n\n## Components\n\n### Launcher\n\n`Launcher` is the only component needed to use vue-beautiful-chat. It will react dynamically to changes in messages. All new messages must be added via a change in props as shown in the example.\n\n#### Props\n\n|prop | type   | description |\n|-----|--------|---------------|\n| *participants | [agentProfile] | Represents your product or service's customer service agents. Fields for each agent: id, name, imageUrl|\n| *onMessageWasSent | function(message) | Called when a message is sent with the message object as an argument. |\n| *isOpen | Boolean | The bool indicating whether or not the chat window should be open. |\n| *open | Function | The function passed to the component that mutates the above mentioned bool toggle for opening the chat |\n| *close | Function | The function passed to the component that mutates the above mentioned bool toggle for closing the chat |\n| messageList | [message] | An array of message objects to be rendered as a conversation. |\n| showEmoji | Boolean | A bool indicating whether or not to show the emoji button\n| showFile | Boolean | A bool indicating whether or not to show the file chooser button\n| showDeletion | Boolean | A bool indicating whether or not to show the edit button for a message\n| showEdition | Boolean | A bool indicating whether or not to show the delete button for a message\n| showTypingIndicator | String | A string that can be set to a user's participant.id to show `typing` indicator for them\n| showHeader | Boolean | A bool indicating whether or not to show the header of chatwindow\n| disableUserListToggle | Boolean | A bool indicating whether or not to allow the user to toggle between message list and participants list\n| colors | Object | An object containing the specs of the colors used to paint the component. [See here](#faq)\n| messageStyling | Boolean | A bool indicating whether or not to enable `msgdown` support for message formatting in chat. [See here](#faq)\n\n#### Events\n\n|event | params   | description |\n|-----|--------|---------------|\n| onType | undefined | Fires when user types on the message input |\n| edit | `message` | Fires after user edited message |\n\n#### Slots\n\n##### header\n\nReplacing default header.\n\n```vue\n\u003Ctemplate v-slot:header>\n  🤔 Good chat between {{participants.map(m=>m.name).join(' & ')}}\n\u003C\u002Ftemplate>\n```\n\n##### user-avatar\n\nReplacing user avatar.\nParams: `message`, `user`\n\n```vue\n\u003Ctemplate v-slot:user-avatar=\"{ message, user }\">\n  \u003Cdiv style=\"border-radius:50%; color: pink; font-size: 15px; line-height:25px; text-align:center;background: tomato; width: 25px !important; height: 25px !important; min-width: 30px;min-height: 30px;margin: 5px; font-weight:bold\" v-if=\"message.type === 'text' && user && user.name\">\n    {{user.name.toUpperCase()[0]}}\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n```\n\n##### text-message-body\n\nChange markdown for text message.\nParams: `message`\n\n```vue\n\u003Ctemplate v-slot:text-message-body=\"{ message }\">\n  \u003Csmall style=\"background:red\" v-if=\"message.meta\">\n    {{message.meta}}\n  \u003C\u002Fsmall>\n  {{message.text}}\n\u003C\u002Ftemplate>\n```\n\n##### system-message-body\n\nChange markdown for system message.\nParams: `message`\n\n```vue\n\u003Ctemplate v-slot:system-message-body=\"{ message }\">\n  [System]: {{message.text}}\n\u003C\u002Ftemplate>\n```\n\n### Message Objects\n\nMessage objects are rendered differently depending on their type. Currently, only text, emoji and file types are supported. Each message object has an `author` field which can have the value 'me' or the id of the corresponding agent.\n\n```javascript\n{\n  author: 'support',\n  type: 'text',\n  id: 1, \u002F\u002F or text '1'\n  isEdited: false,\n  data: {\n    text: 'some text',\n    meta: '06-16-2019 12:43'\n  }\n}\n\n{\n  author: 'me',\n  type: 'emoji',\n  id: 1, \u002F\u002F or text '1'\n  isEdited: false,\n  data: {\n    code: 'someCode'\n  }\n}\n\n{\n  author: 'me',\n  type: 'file',\n  id: 1, \u002F\u002F or text '1'\n  isEdited: false,\n  data: {\n    file: {\n      name: 'file.mp3',\n      url: 'https:123.rf\u002Ffile.mp3'\n    }\n  }\n}\n```\n\n\n#### Quick replies\n\nWhen sending a message, you can provide a set of sentences that will be displayed in the user chat as quick replies. Adding in the message object a `suggestions` field with the value an array of strings will trigger this functionality\n\n```javascript\n{\n  author: 'support',\n  type: 'text',\n  id: 1, \u002F\u002F or text '1'\n  data: {\n    text: 'some text',\n    meta: '06-16-2019 12:43'\n  },\n  suggestions: ['some quick reply', ..., 'another one']\n}\n```\n\n### FAQ\n\n\u003Cdetails>\u003Csummary>How to get the demo working?\u003C\u002Fsummary>\n\u003Cp>\n\n```\ngit clone git@github.com:mattmezza\u002Fvue-beautiful-chat.git\ncd vue-beautiful-chat\nyarn install  # this installs the package dependencies\nyarn watch  # this watches files to continuously compile them\n```\n\nOpen a new shell in the same folder\n\n```\ncd demo\nyarn install # this installs the demo dependencies\nyarn dev # this starts the dev server at http:\u002F\u002Flocalhost:8080\n```\n\n\u003C\u002Fp>\n\u003C\u002Fdetails>\n\n\u003Cdetails>\u003Csummary>How can I add a feature or fix a bug?\u003C\u002Fsummary>\n\u003Cp>\n\n- Fork the repository\n- Fix\u002Fadd your changes\n- `yarn build` on the root to have the library compiled with your latest changes\n- create a pull request describing what you did\n- discuss the changes with the maintainer\n- boom! your changes are added to the main repo\n- a release is created almost once per week 😉\n\n\u003C\u002Fp>\n\u003C\u002Fdetails>\n\n\u003Cdetails>\u003Csummary>How can I customize the colors?\u003C\u002Fsummary>\n\u003Cp>\n\n- When initializing the component, pass an object specifying the colors used:\n\n```javascript\nlet redColors = {\n  header: {\n    bg: '#D32F2F',\n    text: '#fff'\n  },\n  launcher: {\n    bg: '#D32F2F'\n  },\n  messageList: {\n    bg: '#fff'\n  },\n  sentMessage: {\n    bg: '#F44336',\n    text: '#fff'\n  },\n  receivedMessage: {\n    bg: '#eaeaea',\n    text: '#222222'\n  },\n  userInput: {\n    bg: '#fff',\n    text: '#212121'\n  }\n}\n```\n\n```vue\n\u003Cbeautiful-chat\n  ...\n  :colors=\"redColors\" \u002F>\n```\n\nThis is the red variant. Please check [this file](https:\u002F\u002Fgithub.com\u002Fmattmezza\u002Fvue-beautiful-chat\u002Ftree\u002Fmaster\u002Fdemo\u002Fsrc\u002Fcolors.js) for the list of variants shown in the demo page online.\n\nPlease note that you need to pass an Object containing each one of the color properties otherwise the validation will fail.\n\n\u003C\u002Fp>\n\u003C\u002Fdetails>\n\u003Cdetails>\u003Csummary>How can I add message formatting?\u003C\u002Fsummary>\n\u003Cp>\n\nGood news, message formatting is already added for you. You can enable it by setting `messageStyling` to `true` and you will be using the [msgdown](https:\u002F\u002Fgithub.com\u002Fmattmezza\u002Fmsgdown) library. You can enable\u002Fdisable the formatting support at any time, or you can let users do it whenever they prefer.\n\n\u003C\u002Fp>\n\u003C\u002Fdetails>\n\n#### Contributors\n\n[@a-kriya](https:\u002F\u002Fgithub.com\u002Fa-kriya), [@mattmezza](https:\u002F\u002Fgithub.com\u002Fmattmezza)\n\n_Please contact us if you would like to join as a contributor_.\n","vue-beautiful-chat 是一个简洁美观的聊天组件，专为 Vue.js 项目设计。它提供了一个类似 Intercom 的聊天窗口，支持高度自定义和扩展，并且与后端无关，仅作为视图组件使用。该组件适用于需要集成客户服务、营销或用户支持功能的前端应用中，可以轻松嵌入任何 Vue 项目。其主要特点包括完全可定制性、丰富的配置选项（如表情符号、文件发送等）以及免费开源。通过简单的安装和配置步骤即可快速上手，非常适合希望增强用户体验而不增加额外开发成本的场景。",2,"2026-06-11 03:20:11","top_language"]