Realtime Conversation Chat – vue-advanced-chat


vue-advanced-chat is a live chat library to create a flexible, customizable, realtime conversation chat on the Vue.js app.

Supports images, files, emojis, message editing, light/dark themes,

How to use it:

1. Install and import the necessary resources into your project.

import ChatWindow from 'vue-advanced-chat'
import 'vue-advanced-chat/dist/vue-advanced-chat.css'

2. Create a new chat window component in your template.

    :messages="messages" />

3. Full props to customize the conversation chat window.

height: { type: String, default: '600px' },
theme: { type: String, default: 'light' },
colors: { type: Object, default: null },
textMessages: { type: Object, default: null },
currentUserId: { type: String, default: '' },
rooms: { type: Array, default: () => [] },
loadingRooms: { type: Boolean, default: false },
messages: { type: Array, default: () => [] },
messagesLoaded: { type: Boolean, default: false },
menuActions: { type: Array, default: () => [] },
messageActions: {
  type: Array,
  default: () => [
    { name: 'replyMessage', title: 'Reply' },
    { name: 'editMessage', title: 'Edit Message', onlyMe: true },
    { name: 'deleteMessage', title: 'Delete Message', onlyMe: true }
showAddRoom: { type: Boolean, default: true },
showFiles: { type: Boolean, default: true },
showEmojis: { type: Boolean, default: true },
showReactionEmojis: { type: Boolean, default: true },
newMessage: { type: Object, default: null }

4. Full props to customize the chat messages.

currentUserId: { type: String, required: true },
textMessages: { type: Object, required: true },
index: { type: Number, required: true },
message: { type: Object, required: true },
messages: { type: Array, required: true },
editedMessage: { type: Object, required: true },
roomUsers: { type: Array, default: () => [] },
messageActions: { type: Array, required: true },
roomFooterRef: { type: HTMLDivElement },
newMessages: { type: Array },
showReactionEmojis: { type: Boolean, required: true },
emojisList: { type: Object, required: true },
hideOptions: { type: Boolean, required: true }

5. Full props to customize the chat rooms

    roomId: 1,
    roomName: 'Room 1',
    lastMessage: {
      content: 'Last message received',
      sender_id: 1234,
      username: 'John Doe',
      timestamp: '10:20',
      seen: false,
      new: true
    users: [
        _id: 1234,
        username: 'John Doe'
        _id: 4321,
        username: 'John Snow'

6. Event handlers.

fetchMessages({ room, options }) {
  // A user has scrolled on top to load more messages
sendMessage ({ roomId, content, file, replyMessage }) { 
  // A user has sent a message
editMessage ({ roomId, messageId, newContent, file, replyMessage }) { 
  // A user has edited a message
deleteMessage ({ roomId, messageId }) { 
  // A user has deleted a message
openFile ({ download, message }) { 
 // A user has clicked to view or download a file
addRoom () {
  // A user clicks on the plus icon next to searchbar
menuActionHandler ({ roomId, action }) {  
  // A user clicks on the vertical dots icon inside a room
messageActionHandler ({ roomId, action }) {  
  // A user clicks on the dropdown icon inside a message
sendMessageReaction ({ roomId, messageId, reaction, remove }) { 
  // A user clicks on the emoji icon inside a message


Realtime Conversation Chat - vue-advanced-chat


v0.8.7 (07/17/2021)

  • Improve typing performance when lots of messages are displayed
  • Refactor SCSS files to improve web component compatibility

v0.8.6 (06/28/2021)

  • Add rooms-list-search slot to replace the search bar
  • Add show-search prop to hide the search bar header
  • Add system message formatting

v0.8.5 (05/02/2021)

  • Fix infinite rooms scroll not working
  • Fix message file icon position
  • Fix image options backg color
  • Add missing video message content
  • Add missing audio/video file in reply message

v0.8.4 (04/05/2021)

  • Fix Vuetify compatibility (upgrade sass-loader)
  • Remove SCSS scoped attributes for better Web Component compatibility
  • Fix infinite loading when messages are empty

v0.8.3 (03/17/2021)

  • Fix compatibility when importing the chat in an Angular project as a web component
  • Fix new message divider not show in some cases

v0.8.2 (03/14/2021)

  • Add message image placeholder while loading an image*
  • Fix scroll behaviour
  • Prevent typing-message event trigger after room is loaded
  • Do not show loading spinner if no room is selected

v0.8.1 (03/07/2021)

  • Fix auto scroll when sending or receiving a new message
  • Add message avatar by passing avatar in messages prop

v0.8.0 (03/03/2021)

  • Fix room-info and textarea-action-handler events

v0.7.9 (03/02/2021)

  • Fix scroll behaviour when adding messages
  • Add link-options prop to disable url links or change urls target
  • Fix missing text-formatting prop in some components

v0.7.8 (02/25/2021)

  • Fix new message divider and scroll behaviour

v0.7.7 (02/22/2021)

  • Add type declarations file to improve typescript support

v0.7.6 (02/22/2021)

  • Extract css build file
  • Add support for audio types: ogg, wav, mpeg
  • Add support for audio type quicktime
  • Fix markdown bug

v0.7.5 (02/20/2021)

  • Remove css import + Add unpkg entry

v0.7.4 (02/19/2021)

  • Set lamejs as optional dependency

v0.7.3 (02/19/2021)

  • Improve audio recorder UI
  • Improve audio player UI
  • Add mp3 audio encoder with lamejs (optional dependency)
  • Add new message indicator when user scrolled up
  • Fix missing slots params
  • Focus textarea after removing file

v0.7.2 (02/13/2021)

  • Fix rooms name overflow
  • Fix room-id initialisation with single-room prop
  • Clean markdown logic
  • Replace messageId param by message in @delete-message event

v0.7.1 (02/12/2021)

  • Components refactoring to improve performance and maintainability
  • Do not reset draft message when replying to a message
  • Improve Electron compatibility
  • Clean, bug and UI fixes

v0.7.0 (01/30/2021)

  • Add gif and WebP images support
  • Add image url preview
  • Add video files preview
  • Bug fixes

v0.6.9 (01/24/2021)

  • Add dropdown icon in the rooms list to handle custom room actions
  • Check room-actions prop

v0.6.8 (01/24/2021)

  • When typing @ in the textarea, a list of room users will appear and can be clicked to tag a specific user
  • Check open-user-tag event

v0.6.7 (01/20/2021)

  • Do not auto-generate types files causing duplicate identifier error

v0.6.6 (01/16/2021)

  • Revert eslint dependencies to fix package installation error with typescript
  • Fix checkmark icon position on iOS

v0.6.5 (01/10/2021)

  • Fix jumpy scroll when loading more messages
  • Update dependencies

v0.6.4 (01/10/2021)

  • Add toggle-rooms-list event when clicking the toggle icon to open/hide rooms list
  • Separate file type and extension when uploading a file
  • Fix reaction emojis not displayed on iOS devices

v0.6.3 (01/03/2021)

  • Keep device keyboard opened after sending message
  • Add paginated rooms on scroll: Listen to fetch-more-rooms event to load more rooms. Use rooms-loaded to stop pagination when all rooms are loaded
  • Add rooms and messages DOM ID: can be used to manipulate a specific room or message using its ID

v0.6.2 (01/01/2021)

  • Add show-footer prop to show/hide room footer

v0.6.1 (12/26/2020)

  • Fixes not applied in previous npm release

v0.6.0 (12/26/2020)

  • Fix missing kebab-case events
  • Fix image type with multiple dots in file name

v0.5.7 (12/20/2020)

  • Replace format-links by linkify to avoid travis build failure

v0.5.7 (12/19/2020)

  • Add acceptedFiles prop to restrict file types that can be uploaded*
  • Improve typescript compatibility*
  • Fix scroll icon appearance behaviour
  • Fix roomMessage prop at init
  • Improve textarea image resizing
  • Add deleted message in rooms list for audio files

v0.5.6 (12/01/2020)

  • Improve Firestore DB usage in demo
  • Show typing users in rooms list
  • Hide searchbar when rooms are loading
  • Add loadFirstRoom prop to remove the default behaviour of opening the first room at initialization
  • Add no-room-selected slot to add UI when right side panel is empty

v0.5.5 (11/29/2020)

  • Feature: voice messages
  • Feature: system messages
  • Event: textareaActionHandler to add a custom icon in textarea footer
  • Slot: room-header-info
  • Prop: showSendIcon
  • Add dist file to allow npm installs

v0.5.4 (11/21/2020)

  • Add saved and distributed properties to messages props to display double checkmark icon
  • Add named slots for better customization

v0.5.3 (11/11/2020)

  • Fix error when the lastMessage user has left the room
  • Add ellipsis to last message and room header title

v0.5.2 (11/07/2020)

  • Fix scroll issue that was not going at the bottom of the component
  • Fix infinite messages spinner when navigating between rooms

v0.5.1 (10/29/2020)

  • Fix loading issue when loadingRooms and messagesLoaded were not initialised and then reassigned

v0.5.0 (10/07/2020)

  • Unread messages badge counter can be displayed by adding the unreadCount property to each room object
  • backgroundCounterBadge and colorCounterBadge colors can be changed using the theme prop

v0.4.9 (10/06/2020)

  • Fix css issue on Firefox that would overlap search input with the plus icon

v0.4.8 (10/03/2020)

  • Fix issue that would split urls when adding text formatting shortcut characters inside the url

v0.4.7 (09/26/2020)

  • Add action param to openFile function. Available options are download and preview

v0.4.6 (09/14/2020)

  • Add roomMessage prop – show/hide the blue line divider between seen and unseen messages

v0.4.5 (09/03/2020)

  • Fix undefined roomTextarea ref on Quasar Framework

v0.4.4 (08/17/2020)

  • Add roomMessage prop – default textarea value

v0.4.3 (07/05/2020)

  • Add inline & multiline code formatting
  • Prevent roomId watcher to trigger fetchRoom if null
  • UI fixes

Download Details:

Author: antoine92190

Live Demo:

Download Link:

Official Website:

Install & Download:

# Yarn
$ yarn add vue-advanced-chat

$ npm install vue-advanced-chat --save

You Might Be Interested In:


Add Comment