<p align="center"> <a href="https://github.com/advanced-chat/vue-advanced-chat/actions/workflows/release.yml"><img src="https://img.shields.io/github/actions/workflow/status/advanced-chat/vue-advanced-chat/release.yml?branch=main"></a> <a href="https://www.npmjs.com/package/vue-advanced-chat"><img src="https://img.shields.io/npm/dm/vue-advanced-chat.svg"></a> <a href="https://www.npmjs.com/package/vue-advanced-chat"><img src="https://img.shields.io/bundlephobia/minzip/vue-advanced-chat"></a> <a href="https://www.npmjs.com/package/vue-advanced-chat"><img src="https://img.shields.io/npm/v/vue-advanced-chat.svg"></a> <a href="https://www.npmjs.com/package/vue-advanced-chat"><img src="https://img.shields.io/npm/l/vue-advanced-chat.svg"></a> </p>

vue-advanced-chat

Sponsors

<div align="center"> <a target="_blank" href="https://chatkitty.com/docs"> <img alt="ChatKitty sponsor" src="demo/firebase/src/assets/sponsors/chatkitty.png" width="220"> </a> <div>Easy to use <a target="_blank" href="https://chatkitty.com/docs">Chat API</a> with scalable infrastructure</div> </div>

Features

• Compatible with all Javascript frameworks (Vue, Angular, React, etc.) or no framework at all
• Customizeable realtime 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

Demo

Enjoy :smile:

Real World Example

A Progressive Web Application showcasing all the features of vue-advanced-chat component.<br> Built with Firestore, Vuetify, and Push Notifications.

If you wish to get premium access to the real world example source code, please contact me by email.

You will get a fully working chat application for web and mobile:

• UI and backend integration
• Email, Facebook and Google authentication
• Real-time messaging, browser push notifications, images optimization (Firebase Cloud Functions to compress avatars)
• UI/UX components for alerts (errors, information), dialogs, etc.
• Add existing users to a room using their email
• Send email invitations to non-existing users
• Edition of profile and rooms
• Addition and deletion of room users
• Optimised firestore implementation to reduce bandwidth and costs as much as possible
• State management using vuex
• Internationalisation (i18n)
• Google Analytics
• Support to help you get the chat up and running

<br>

Table of Contents

• Installation
• Usage
• Props API
• Props data structure
• Events API
• Named Slots
• Using with ChatKitty
• Using with Firestore

<br>

Installation

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

# Using yarn
yarn add vue-advanced-chat

# Using CDN
<script src="https://cdn.jsdelivr.net/npm/vue-advanced-chat@2.0.4/dist/vue-advanced-chat.umd.js"></script>

Vue

Register vue-advanced-chat and emoji-picker as web components in your config file:

compilerOptions: {
  isCustomElement: tagName => {
    return tagName === 'vue-advanced-chat' || tagName === 'emoji-picker'
  }
}

Demo: https://github.com/advanced-chat/vue-advanced-chat-sandbox/tree/main

React

Demo: https://github.com/advanced-chat/vue-advanced-chat-sandbox/tree/react

Angular / Ionic

Demo: https://github.com/advanced-chat/vue-advanced-chat-sandbox/tree/angular

<br>

Usage

You can import it as a custom component:

<template>
  <vue-advanced-chat
    :current-user-id="currentUserId"
    :rooms="JSON.stringify(rooms)"
    :messages="JSON.stringify(messages)"
    :room-actions="JSON.stringify(roomActions)"
  />
</template>

<script>
  import { register } from 'vue-advanced-chat'
  register()

  // Or if you used CDN import
  // window['vue-advanced-chat'].register()

  export default {
    data() {
      return {
        currentUserId: '1234',
        rooms: [],
        messages: [],
        roomActions: [
          { name: 'inviteUser', title: 'Invite User' },
          { name: 'removeUser', title: 'Remove User' },
          { name: 'deleteRoom', title: 'Delete Room' }
        ]
      }
    }
  }
</script>

Important notes

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

• Use array assignement 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
  })
}

<br>

Props API

Important notes

If you are using Vue 3, you can pass Array and Object props normally: Passing DOM Properties in Vue 3 <br> Otherwise, you need to pass those props as strings. For example: [messages]="JSON.stringify(messages)"

| <div style="width:230px">Prop</div> | Type | Required | Default | | ----------------------------------- | ---------------- | -------- | ----------------------------------------------------------------------------------------------------------------- | | height | String | - | 600px | | current-user-id(1) | String | true | - | | rooms | [String, Array] | - | [] | | rooms-order | desc / asc | - | desc | | loading-rooms(2) | Boolean | - | false | | rooms-loaded(3) | Boolean | - | false | | room-id(4) | String | - | null | | load-first-room(5) | Boolean | - | true | | rooms-list-opened | Boolean | - | true | | custom-search-room-enabled (6) | Boolean | - | false | | messages | [String, Array] | - | [] | | room-message(7) | String | - | null | | username-options (8) | [String, Object] | - | {minUsers: 3, currentUser: false} | | messages-loaded(9) | Boolean | - | false | | room-actions(10) | [String, Array] | - | [] | | menu-actions(11) | [String, Array] | - | [] | | message-actions(12) | [String, Array] | - | (11) | | message-selection-actions(13) | [String, Array] | - | (13) | | templates-text(14)