Vue-advanced-chat is a beautiful chat rooms component made with Vue.js. It is compatible with Vue, React & Angular. It has many customizable options and also offers dark and light themes. You can see its demo here.

Features

• Vue, Angular & React compatibility
• Customizable real-time chat messaging
• Backend agnostic
• Images, videos, files, voice messages & emojis
• Edit messages & reply to other messages
• Tag users & emojis shortcut suggestions
• UI elements for seen, new, deleted, typing, and system messages
• Text formatting - bold, italic, strikethrough, underline, code, multiline
• Online / Offline users status
• Flexible options and slots
• Light and dark theme modes
• Firestore example
• Typescript, PWA, Web Component support

Installation

You can install this package via Npm Or Yarn.

// Using npm
npm install --save vue-advanced-chat

// Using yarn
yarn add --save vue-advanced-chat

Using CDN

You can also use Cdn instead of npm or yarn installation.

<script src="https://cdn.jsdelivr.net/npm/vue-advanced-chat@0.8.8/dist/vue-advanced-chat.min.js"></script>

If you want to send mp3 audio messages, you may need to install lamejs inside your project:
npm install lamejs –save

Usage

After the installation you can import it as a custom component:

<template>
  <chat-window
    :current-user-id="currentUserId"
    :rooms="rooms"
    :messages="messages"
  />
</template>

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

  export default {
    components: {
      ChatWindow
    },
    data() {
      return {
        rooms: [],
        messages: [],
        currentUserId: 1234
      }
    }
  }
</script>
Or if you used CDN import:
<template>
  <vue-advanced-chat/>
</template>

<script>
export default {
  data() {
    return {
      rooms: [],
      messages: [],
      currentUserId: 1234
    }
  },
  mounted() {
    document.querySelector('vue-advanced-chat').currentUserId = this.currentUserId
    document.querySelector('vue-advanced-chat').rooms = this.rooms
    document.querySelector('vue-advanced-chat').messages = this.messages
  }
}
</script>

Important notes

Vue-advanced-chat component is performance-oriented, hence you have to follow specific rules to make it work properly.

Use array assignment instead of push method

// DO THIS
const rooms = []
for (let i = 0; i < res.length; i++) {
  rooms.push(res)
}
this.rooms = rooms

// DON'T DO THIS
for (let i = 0; i < res.length; i++) {
  this.rooms.push(res)
}

// DO THIS
this.rooms[i].typingUsers = [...this.rooms[i].typingUsers, typingUserId]

// DON'T DO THIS
this.rooms[i].typingUsers.push(typingUserId)

To add or replace an item inside an array, use spread operator

// DO THIS
this.rooms[roomIndex] = room
this.rooms = [...this.rooms]

// DON'T DO THIS
this.rooms[roomIndex] = room

// AND DON'T DO THIS
this.rooms.push(room)

Follow the UI loading pattern by updating messagesLoaded prop every time a new room is fetched

fetchMessages({ room, options }) {
  this.messagesLoaded = false

  // use timeout to imitate async server fetched data
  setTimeout(() => {
    this.messages = []
    this.messagesLoaded = true
  })
}

The above tutorial explains the use of vue-advanced-chat with Vue Js. You can also utilize this component with React Js and Angular Js.
If you want to use this component with React or Angular then you can visit its documentation on Github for more details.