Edit these docs Rate these docs

Vue Bootstrap Chat

Vue Chat - Bootstrap 4 & Material Design

Vue Bootstrap Chat is a component dedicated for text-based communication between two or more users in real time. Build with conversations list sidebar.


Basic chat MDB Pro component


        <template>
            <mdb-container>
              <mdb-chat-room color="grey" class="lighten-2">
                <mdb-row class="px-lg-2 px-2">
                  <mdb-col md="6" xl="4" class="px-0 pt-3">
                    <mdb-chat-list
                      :data="basicChat"
                      @click="changeActiveChat"
                    ></mdb-chat-list>
                  </mdb-col>
                  <mdb-col md="6" xl="8" class="pl-md-3 px-lg-auto px-0 pt-3">
                    <mdb-chat
                      :loggedUserId="basicChat[activeChat].loggedUserId"
                      :chat="basicChat[activeChat].chat"
                      color="info"
                      :avatarWidth="50"
                      @send="sendMessage($event, basicChat[activeChat])"
                    ></mdb-chat>
                  </mdb-col>
                </mdb-row>
              </mdb-chat-room>
            </mdb-container>
        </template>
      

        <script>
          import { mdbChat, mdbChatList, mdbChatRoom, mdbCol, mdbRow, mdbContainer } from 'mdbvue';

          export default {
            components: {
              mdbRow,
              mdbCol,
              mdbChat,
              mdbChatList,
              mdbChatRoom,
              mdbContainer
            },

            data() {
              return {
                basicChat: [
                  {
                    loggedUserId: 1,
                    active: true,
                    lastId: 4,
                    chat: [
                      {
                        id: 0,
                        name: "Brad Pitt",
                        online: true,
                        img: "https://mdbootstrap.com/img/Photos/Avatars/avatar-6.jpg",
                        messages: [
                          {
                            id: 0,
                            date: "2019-04-21 15:00:09",
                            content:
                              "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium."
                          },
                          {
                            id: 1,
                            date: "2019-06-26 11:00",
                            content:
                              "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium."
                          },
                          {
                            id: 4,
                            date: "2019-07-01 09:20",
                            content:
                              "Can you pop out and buy lemons?"
                          }
                        ]
                      },
                      {
                        id: 1,
                        name: "Lara Croft",
                        img: "https://mdbootstrap.com/img/Photos/Avatars/avatar-5.jpg",
                        messages: [
                          {
                            id: 2,
                            date: "2019-06-26 11:15",
                            content:
                              "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium."
                          },
                          {
                            id: 3,
                            date: "2019-06-26 11:16",
                            content:
                              "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium."
                          }
                        ]
                      }
                    ]
                  },
                  {
                    id: 1,
                    loggedUserId: 1,
                    active: false,
                    lastId: 2,
                    chat: [
                      {
                        id: 1,
                        name: "Lara Croft",
                        online: true,
                        img: "https://mdbootstrap.com/img/Photos/Avatars/avatar-5.jpg",
                        messages: [
                          {
                            id: 0,
                            date: "2019-04-21 15:00:09",
                            content:
                              "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium."
                          },
                          {
                            id: 1,
                            date: "2019-06-26 11:00",
                            content:
                              "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium."
                          }
                        ]
                      },
                      {
                        id: 2,
                        name: "Ashley Olsen",
                        img: "https://mdbootstrap.com/img/Photos/Avatars/avatar-2.jpg",
                        messages: [
                          {
                            id: 2,
                            date: "2019-06-26 11:15",
                            content: "Remember to bring me oranges",
                            unread: true
                          }
                        ]
                      }
                    ]
                  },
                  {
                    id: 2,
                    loggedUserId: 1,
                    active: false,
                    lastId: 2,
                    chat: [
                      {
                        id: 1,
                        name: "Lara Croft",
                        img: "https://mdbootstrap.com/img/Photos/Avatars/avatar-5.jpg",
                        messages: [
                          {
                            id: 0,
                            date: "2019-04-21 15:00:09",
                            content:
                              "Sed ut perspiciatis unde omnis iste natus remque laudantium."
                          },
                          {
                            id: 1,
                            date: "2019-06-26 11:00",
                            content: "Sed ut doloremque laudantium."
                          }
                        ]
                      },
                      {
                        id: 3,
                        name: "Danny Smith",
                        img: "https://mdbootstrap.com/img/Photos/Avatars/avatar-3.jpg",
                        messages: [
                          {
                            id: 2,
                            date: "2019-06-26 11:15",
                            content: "Call me later!",
                            unread: false
                          }
                        ]
                      }
                    ]
                  },
                  {
                    id: 1,
                    loggedUserId: 1,
                    active: false,
                    lastId: 2,
                    chat: [
                      {
                        id: 1,
                        name: "Lara Croft",
                        img: "https://mdbootstrap.com/img/Photos/Avatars/avatar-5.jpg",
                        messages: [
                          {
                            id: 0,
                            date: "2019-04-21 15:00:09",
                            content:
                              "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium."
                          },
                          {
                            id: 1,
                            date: "2019-06-26 11:00",
                            content:
                              "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium."
                          }
                        ]
                      },
                      {
                        id: 6,
                        name: "Alex Turner",
                        img: "https://mdbootstrap.com/img/Photos/Avatars/avatar-1.jpg",
                        messages: [
                          {
                            id: 2,
                            date: "2019-06-26 11:15",
                            content: "Hey, are you at home?",
                            unread: false
                          }
                        ]
                      }
                    ]
                  },
                  {
                    id: 2,
                    loggedUserId: 1,
                    active: false,
                    lastId: 2,
                    chat: [
                      {
                        id: 1,
                        name: "Lara Croft",
                        img: "https://mdbootstrap.com/img/Photos/Avatars/avatar-5.jpg",
                        messages: [
                          {
                            id: 0,
                            date: "2019-04-21 15:00:09",
                            content:
                              "Sed ut perspiciatis unde omnis iste natus remque laudantium."
                          },
                          {
                            id: 1,
                            date: "2019-06-26 11:00",
                            content: "Sed ut doloremque laudantium."
                          }
                        ]
                      },
                      {
                        id: 7,
                        name: "Kate Moss",
                        img: "https://mdbootstrap.com/img/Photos/Avatars/avatar-4.jpg",
                        messages: [
                          {
                            id: 2,
                            date: "2019-06-26 11:15",
                            content: "Wanna grab a bite later?",
                            unread: true
                          }
                        ]
                      }
                    ]
                  },
                  {
                    id: 1,
                    loggedUserId: 1,
                    active: false,
                    lastId: 2,
                    chat: [
                      {
                        id: 1,
                        name: "Lara Croft",
                        img: "https://mdbootstrap.com/img/Photos/Avatars/avatar-5.jpg",
                        messages: [
                          {
                            id: 0,
                            date: "2019-04-21 15:00:09",
                            content:
                              "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium."
                          },
                          {
                            id: 1,
                            date: "2019-06-26 11:00",
                            content:
                              "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium."
                          }
                        ]
                      },
                      {
                        id: 10,
                        name: "Meg Ryan",
                        online: true,
                        img: "https://mdbootstrap.com/img/Photos/Avatars/avatar-12.jpg",
                        messages: [
                          {
                            id: 2,
                            date: "2019-06-26 11:15",
                            content: "Sed ut perspicantium.",
                            unread: false
                          }
                        ]
                      }
                    ]
                  },
                  {
                    id: 2,
                    loggedUserId: 1,
                    active: false,
                    lastId: 2,
                    chat: [
                      {
                        id: 1,
                        name: "Lara Croft",
                        img: "https://mdbootstrap.com/img/Photos/Avatars/avatar-6.jpg",
                        messages: [
                          {
                            id: 0,
                            date: "2019-04-21 15:00:09",
                            content:
                              "Sed ut perspiciatis unde omnis iste natus remque laudantium."
                          },
                          {
                            id: 1,
                            date: "2019-06-26 11:00",
                            content: "Sed ut doloremque laudantium."
                          }
                        ]
                      },
                      {
                        id: 3,
                        name: "John Smith",
                        img: "https://mdbootstrap.com/img/Photos/Avatars/avatar-13.jpg",
                        messages: [
                          {
                            id: 2,
                            date: "2019-06-26 11:15",
                            content: "Sed ut!",
                            unread: true
                          }
                        ]
                      }
                    ]
                  },
                  {
                    id: 1,
                    loggedUserId: 1,
                    active: false,
                    lastId: 2,
                    chat: [
                      {
                        id: 1,
                        name: "Lara Croft",
                        img: "https://mdbootstrap.com/img/Photos/Avatars/avatar-5.jpg",
                        messages: [
                          {
                            id: 0,
                            date: "2019-04-21 15:00:09",
                            content:
                              "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium."
                          },
                          {
                            id: 1,
                            date: "2019-06-26 11:00",
                            content:
                              "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium."
                          }
                        ]
                      },
                      {
                        id: 13,
                        name: "Olenna Gervais",
                        img: "https://mdbootstrap.com/img/Photos/Avatars/avatar-11.jpg",
                        messages: [
                          {
                            id: 2,
                            date: "2019-06-26 11:15",
                            content: "Sed ut perspicantium.",
                            unread: false
                          }
                        ]
                      }
                    ]
                  },
                  {
                    id: 2,
                    loggedUserId: 1,
                    active: false,
                    lastId: 2,
                    chat: [
                      {
                        id: 1,
                        name: "Lara Croft",
                        img: "https://mdbootstrap.com/img/Photos/Avatars/avatar-5.jpg",
                        messages: [
                          {
                            id: 0,
                            date: "2019-04-21 15:00:09",
                            content:
                              "Sed ut perspiciatis unde omnis iste natus remque laudantium."
                          },
                          {
                            id: 1,
                            date: "2019-06-26 11:00",
                            content: "Sed ut doloremque laudantium."
                          }
                        ]
                      },
                      {
                        id: 11,
                        name: "Max Jackson",
                        img: "https://mdbootstrap.com/img/Photos/Avatars/avatar-14.jpg",
                        messages: [
                          {
                            id: 2,
                            date: "2019-06-26 11:15",
                            content: "Sed laudantium!",
                            unread: false
                          }
                        ]
                      }
                    ]
                  }
                ],
                activeChat: 0,
              };
            },
            methods: {
              createMessage(e, id) {
                const { content, unread, date } = e;
                return {
                  id: id + 1,
                  date,
                  content,
                  unread
                };
              },
              sendMessage(e, chat) {
                const newMessage = this.createMessage(e, chat.lastId);
                chat.chat
                  .find(el => {
                    return el.id === chat.loggedUserId;
                  })
                  .messages.push(newMessage);

                chat.lastId += 1;
              },
              changeActiveChat(index) {
                this.activeChat = index;
                this.basicChat.forEach((chat, i) => {
                  if (i === index) {
                    chat.active = true;
                  } else {
                    chat.active = false;
                  }
                });
              }
            }
          };
        </script>
      

Colorful background chat MDB Pro component


        <template>
          <mdb-container>
            <mdb-chat-room color="purple lighten-4">
              <mdb-row class="px-lg-2 px-2">
                <mdb-col md="6" xl="4" class="px-0 pt-3">
                  <mdb-chat-list
                    :data="colorfulChat"
                    @click="changeActiveChat"
                  ></mdb-chat-list>
                </mdb-col>
                <mdb-col md="6" xl="8" class="pl-md-3 px-lg-auto px-0 pt-3">
                  <mdb-chat
                    :loggedUserId="colorfulChat[activeChat].loggedUserId"
                    :chat="colorfulChat[activeChat].chat"
                    color="purple"
                    :avatarWidth="50"
                    @send="sendMessage($event, colorfulChat[activeChat])"
                  ></mdb-chat>
                </mdb-col>
              </mdb-row>
            </mdb-chat-room>
          </mdb-container>
        </template>
      

        <script>
          import { mdbChat, mdbChatList, mdbChatRoom, mdbCol, mdbRow, mdbContainer } from 'mdbvue';

          export default {
            components: {
              mdbRow,
              mdbCol,
              mdbChat,
              mdbChatList,
              mdbChatRoom,
              mdbContainer
            },

            data() {
              return {
                colorfulChat: [
                  {
                    loggedUserId: 1,
                    active: true,
                    lastId: 4,
                    chat: [
                      {
                        id: 0,
                        name: "Brad Pitt",
                        online: true,
                        img: "https://mdbootstrap.com/img/Photos/Avatars/avatar-6.jpg",
                        messages: [
                          {
                            id: 0,
                            date: "2019-04-21 15:00:09",
                            content:
                              "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium."
                          },
                          {
                            id: 1,
                            date: "2019-06-26 11:00",
                            content:
                              "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium."
                          },
                          {
                            id: 4,
                            date: "2019-07-01 09:20",
                            content:
                              "Can you pop out and buy lemons?"
                          }
                        ]
                      },
                      {
                        id: 1,
                        name: "Lara Croft",
                        img: "https://mdbootstrap.com/img/Photos/Avatars/avatar-5.jpg",
                        messages: [
                          {
                            id: 2,
                            date: "2019-06-26 11:15",
                            content:
                              "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium."
                          },
                          {
                            id: 3,
                            date: "2019-06-26 11:16",
                            content:
                              "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium."
                          }
                        ]
                      }
                    ]
                  },
                  {
                    id: 1,
                    loggedUserId: 1,
                    active: false,
                    lastId: 2,
                    chat: [
                      {
                        id: 1,
                        name: "Lara Croft",
                        online: true,
                        img: "https://mdbootstrap.com/img/Photos/Avatars/avatar-5.jpg",
                        messages: [
                          {
                            id: 0,
                            date: "2019-04-21 15:00:09",
                            content:
                              "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium."
                          },
                          {
                            id: 1,
                            date: "2019-06-26 11:00",
                            content:
                              "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium."
                          }
                        ]
                      },
                      {
                        id: 2,
                        name: "Ashley Olsen",
                        img: "https://mdbootstrap.com/img/Photos/Avatars/avatar-2.jpg",
                        messages: [
                          {
                            id: 2,
                            date: "2019-06-26 11:15",
                            content: "Remember to bring me oranges",
                            unread: true
                          }
                        ]
                      }
                    ]
                  },
                  {
                    id: 2,
                    loggedUserId: 1,
                    active: false,
                    lastId: 2,
                    chat: [
                      {
                        id: 1,
                        name: "Lara Croft",
                        img: "https://mdbootstrap.com/img/Photos/Avatars/avatar-5.jpg",
                        messages: [
                          {
                            id: 0,
                            date: "2019-04-21 15:00:09",
                            content:
                              "Sed ut perspiciatis unde omnis iste natus remque laudantium."
                          },
                          {
                            id: 1,
                            date: "2019-06-26 11:00",
                            content: "Sed ut doloremque laudantium."
                          }
                        ]
                      },
                      {
                        id: 3,
                        name: "Danny Smith",
                        img: "https://mdbootstrap.com/img/Photos/Avatars/avatar-3.jpg",
                        messages: [
                          {
                            id: 2,
                            date: "2019-06-26 11:15",
                            content: "Call me later!",
                            unread: false
                          }
                        ]
                      }
                    ]
                  },
                  {
                    id: 1,
                    loggedUserId: 1,
                    active: false,
                    lastId: 2,
                    chat: [
                      {
                        id: 1,
                        name: "Lara Croft",
                        img: "https://mdbootstrap.com/img/Photos/Avatars/avatar-5.jpg",
                        messages: [
                          {
                            id: 0,
                            date: "2019-04-21 15:00:09",
                            content:
                              "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium."
                          },
                          {
                            id: 1,
                            date: "2019-06-26 11:00",
                            content:
                              "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium."
                          }
                        ]
                      },
                      {
                        id: 6,
                        name: "Alex Turner",
                        img: "https://mdbootstrap.com/img/Photos/Avatars/avatar-1.jpg",
                        messages: [
                          {
                            id: 2,
                            date: "2019-06-26 11:15",
                            content: "Hey, are you at home?",
                            unread: false
                          }
                        ]
                      }
                    ]
                  },
                  {
                    id: 2,
                    loggedUserId: 1,
                    active: false,
                    lastId: 2,
                    chat: [
                      {
                        id: 1,
                        name: "Lara Croft",
                        img: "https://mdbootstrap.com/img/Photos/Avatars/avatar-5.jpg",
                        messages: [
                          {
                            id: 0,
                            date: "2019-04-21 15:00:09",
                            content:
                              "Sed ut perspiciatis unde omnis iste natus remque laudantium."
                          },
                          {
                            id: 1,
                            date: "2019-06-26 11:00",
                            content: "Sed ut doloremque laudantium."
                          }
                        ]
                      },
                      {
                        id: 7,
                        name: "Kate Moss",
                        img: "https://mdbootstrap.com/img/Photos/Avatars/avatar-4.jpg",
                        messages: [
                          {
                            id: 2,
                            date: "2019-06-26 11:15",
                            content: "Wanna grab a bite later?",
                            unread: true
                          }
                        ]
                      }
                    ]
                  },
                  {
                    id: 1,
                    loggedUserId: 1,
                    active: false,
                    lastId: 2,
                    chat: [
                      {
                        id: 1,
                        name: "Lara Croft",
                        img: "https://mdbootstrap.com/img/Photos/Avatars/avatar-5.jpg",
                        messages: [
                          {
                            id: 0,
                            date: "2019-04-21 15:00:09",
                            content:
                              "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium."
                          },
                          {
                            id: 1,
                            date: "2019-06-26 11:00",
                            content:
                              "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium."
                          }
                        ]
                      },
                      {
                        id: 10,
                        name: "Meg Ryan",
                        online: true,
                        img: "https://mdbootstrap.com/img/Photos/Avatars/avatar-12.jpg",
                        messages: [
                          {
                            id: 2,
                            date: "2019-06-26 11:15",
                            content: "Sed ut perspicantium.",
                            unread: false
                          }
                        ]
                      }
                    ]
                  },
                  {
                    id: 2,
                    loggedUserId: 1,
                    active: false,
                    lastId: 2,
                    chat: [
                      {
                        id: 1,
                        name: "Lara Croft",
                        img: "https://mdbootstrap.com/img/Photos/Avatars/avatar-6.jpg",
                        messages: [
                          {
                            id: 0,
                            date: "2019-04-21 15:00:09",
                            content:
                              "Sed ut perspiciatis unde omnis iste natus remque laudantium."
                          },
                          {
                            id: 1,
                            date: "2019-06-26 11:00",
                            content: "Sed ut doloremque laudantium."
                          }
                        ]
                      },
                      {
                        id: 3,
                        name: "John Smith",
                        img: "https://mdbootstrap.com/img/Photos/Avatars/avatar-13.jpg",
                        messages: [
                          {
                            id: 2,
                            date: "2019-06-26 11:15",
                            content: "Sed ut!",
                            unread: true
                          }
                        ]
                      }
                    ]
                  },
                  {
                    id: 1,
                    loggedUserId: 1,
                    active: false,
                    lastId: 2,
                    chat: [
                      {
                        id: 1,
                        name: "Lara Croft",
                        img: "https://mdbootstrap.com/img/Photos/Avatars/avatar-5.jpg",
                        messages: [
                          {
                            id: 0,
                            date: "2019-04-21 15:00:09",
                            content:
                              "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium."
                          },
                          {
                            id: 1,
                            date: "2019-06-26 11:00",
                            content:
                              "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium."
                          }
                        ]
                      },
                      {
                        id: 13,
                        name: "Olenna Gervais",
                        img: "https://mdbootstrap.com/img/Photos/Avatars/avatar-11.jpg",
                        messages: [
                          {
                            id: 2,
                            date: "2019-06-26 11:15",
                            content: "Sed ut perspicantium.",
                            unread: false
                          }
                        ]
                      }
                    ]
                  },
                  {
                    id: 2,
                    loggedUserId: 1,
                    active: false,
                    lastId: 2,
                    chat: [
                      {
                        id: 1,
                        name: "Lara Croft",
                        img: "https://mdbootstrap.com/img/Photos/Avatars/avatar-5.jpg",
                        messages: [
                          {
                            id: 0,
                            date: "2019-04-21 15:00:09",
                            content:
                              "Sed ut perspiciatis unde omnis iste natus remque laudantium."
                          },
                          {
                            id: 1,
                            date: "2019-06-26 11:00",
                            content: "Sed ut doloremque laudantium."
                          }
                        ]
                      },
                      {
                        id: 11,
                        name: "Max Jackson",
                        img: "https://mdbootstrap.com/img/Photos/Avatars/avatar-14.jpg",
                        messages: [
                          {
                            id: 2,
                            date: "2019-06-26 11:15",
                            content: "Sed laudantium!",
                            unread: false
                          }
                        ]
                      }
                    ]
                  }
                ],
                activeChat: 0,
              };
            },
            methods: {
              createMessage(e, id) {
                const { content, unread, date } = e;
                return {
                  id: id + 1,
                  date,
                  content,
                  unread
                };
              },
              sendMessage(e, chat) {
                const newMessage = this.createMessage(e, chat.lastId);
                chat.chat
                  .find(el => {
                    return el.id === chat.loggedUserId;
                  })
                  .messages.push(newMessage);

                chat.lastId += 1;
              },
              changeActiveChat(index) {
                this.activeChat = index;
                this.colorfulChat.forEach((chat, i) => {
                  if (i === index) {
                    chat.active = true;
                  } else {
                    chat.active = false;
                  }
                });
              }
            }
          };
        </script>
      

Gradient chat with scrollbar MDB Pro component


        <template>
          <mdb-container>
            <mdb-chat-room color="rare-wind-gradient">
                <mdb-row class="px-lg-2 px-2">
                  <mdb-col md="6" xl="4" class="px-0 pt-3">
                    <mdb-chat-list
                      scroll
                      :height="500"
                      scrollbarClass="scrollbar-light-blue"
                      :data="gradientChat"
                      @click="changeActiveChat"
                    ></mdb-chat-list>
                  </mdb-col>
                  <mdb-col md="6" xl="8" class="pl-md-3 px-lg-auto px-0 pt-3">
                    <mdb-chat
                      :loggedUserId="gradientChat[activeChat].loggedUserId"
                      :chat="gradientChat[activeChat].chat"
                      outline="purple"
                      :avatarWidth="50"
                      scroll
                      scrollbarClass="scrollbar-light-blue"
                      @send="sendMessage($event, gradientChat[activeChat])"
                    ></mdb-chat>
                  </mdb-col>
                </mdb-row>
              </mdb-chat-room>
            </mdb-container>
        </template>
      

        <script>
          import { mdbChat, mdbChatList, mdbChatRoom, mdbCol, mdbRow, mdbContainer } from 'mdbvue';

          export default {
            components: {
              mdbRow,
              mdbCol,
              mdbChat,
              mdbChatList,
              mdbChatRoom,
              mdbContainer
            },

            data() {
              return {
                gradientChat: [
                  {
                    loggedUserId: 1,
                    active: true,
                    lastId: 4,
                    chat: [
                      {
                        id: 0,
                        name: "Brad Pitt",
                        online: true,
                        img: "https://mdbootstrap.com/img/Photos/Avatars/avatar-6.jpg",
                        messages: [
                          {
                            id: 0,
                            date: "2019-04-21 15:00:09",
                            content:
                              "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium."
                          },
                          {
                            id: 1,
                            date: "2019-06-26 11:00",
                            content:
                              "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium."
                          },
                          {
                            id: 4,
                            date: "2019-07-01 09:20",
                            content:
                              "Can you pop out and buy lemons?"
                          }
                        ]
                      },
                      {
                        id: 1,
                        name: "Lara Croft",
                        img: "https://mdbootstrap.com/img/Photos/Avatars/avatar-5.jpg",
                        messages: [
                          {
                            id: 2,
                            date: "2019-06-26 11:15",
                            content:
                              "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium."
                          },
                          {
                            id: 3,
                            date: "2019-06-26 11:16",
                            content:
                              "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium."
                          }
                        ]
                      }
                    ]
                  },
                  {
                    id: 1,
                    loggedUserId: 1,
                    active: false,
                    lastId: 2,
                    chat: [
                      {
                        id: 1,
                        name: "Lara Croft",
                        online: true,
                        img: "https://mdbootstrap.com/img/Photos/Avatars/avatar-5.jpg",
                        messages: [
                          {
                            id: 0,
                            date: "2019-04-21 15:00:09",
                            content:
                              "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium."
                          },
                          {
                            id: 1,
                            date: "2019-06-26 11:00",
                            content:
                              "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium."
                          }
                        ]
                      },
                      {
                        id: 2,
                        name: "Ashley Olsen",
                        img: "https://mdbootstrap.com/img/Photos/Avatars/avatar-2.jpg",
                        messages: [
                          {
                            id: 2,
                            date: "2019-06-26 11:15",
                            content: "Remember to bring me oranges",
                            unread: true
                          }
                        ]
                      }
                    ]
                  },
                  {
                    id: 2,
                    loggedUserId: 1,
                    active: false,
                    lastId: 2,
                    chat: [
                      {
                        id: 1,
                        name: "Lara Croft",
                        img: "https://mdbootstrap.com/img/Photos/Avatars/avatar-5.jpg",
                        messages: [
                          {
                            id: 0,
                            date: "2019-04-21 15:00:09",
                            content:
                              "Sed ut perspiciatis unde omnis iste natus remque laudantium."
                          },
                          {
                            id: 1,
                            date: "2019-06-26 11:00",
                            content: "Sed ut doloremque laudantium."
                          }
                        ]
                      },
                      {
                        id: 3,
                        name: "Danny Smith",
                        img: "https://mdbootstrap.com/img/Photos/Avatars/avatar-3.jpg",
                        messages: [
                          {
                            id: 2,
                            date: "2019-06-26 11:15",
                            content: "Call me later!",
                            unread: false
                          }
                        ]
                      }
                    ]
                  },
                  {
                    id: 1,
                    loggedUserId: 1,
                    active: false,
                    lastId: 2,
                    chat: [
                      {
                        id: 1,
                        name: "Lara Croft",
                        img: "https://mdbootstrap.com/img/Photos/Avatars/avatar-5.jpg",
                        messages: [
                          {
                            id: 0,
                            date: "2019-04-21 15:00:09",
                            content:
                              "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium."
                          },
                          {
                            id: 1,
                            date: "2019-06-26 11:00",
                            content:
                              "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium."
                          }
                        ]
                      },
                      {
                        id: 6,
                        name: "Alex Turner",
                        img: "https://mdbootstrap.com/img/Photos/Avatars/avatar-1.jpg",
                        messages: [
                          {
                            id: 2,
                            date: "2019-06-26 11:15",
                            content: "Hey, are you at home?",
                            unread: false
                          }
                        ]
                      }
                    ]
                  },
                  {
                    id: 2,
                    loggedUserId: 1,
                    active: false,
                    lastId: 2,
                    chat: [
                      {
                        id: 1,
                        name: "Lara Croft",
                        img: "https://mdbootstrap.com/img/Photos/Avatars/avatar-5.jpg",
                        messages: [
                          {
                            id: 0,
                            date: "2019-04-21 15:00:09",
                            content:
                              "Sed ut perspiciatis unde omnis iste natus remque laudantium."
                          },
                          {
                            id: 1,
                            date: "2019-06-26 11:00",
                            content: "Sed ut doloremque laudantium."
                          }
                        ]
                      },
                      {
                        id: 7,
                        name: "Kate Moss",
                        img: "https://mdbootstrap.com/img/Photos/Avatars/avatar-4.jpg",
                        messages: [
                          {
                            id: 2,
                            date: "2019-06-26 11:15",
                            content: "Wanna grab a bite later?",
                            unread: true
                          }
                        ]
                      }
                    ]
                  },
                  {
                    id: 1,
                    loggedUserId: 1,
                    active: false,
                    lastId: 2,
                    chat: [
                      {
                        id: 1,
                        name: "Lara Croft",
                        img: "https://mdbootstrap.com/img/Photos/Avatars/avatar-5.jpg",
                        messages: [
                          {
                            id: 0,
                            date: "2019-04-21 15:00:09",
                            content:
                              "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium."
                          },
                          {
                            id: 1,
                            date: "2019-06-26 11:00",
                            content:
                              "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium."
                          }
                        ]
                      },
                      {
                        id: 10,
                        name: "Meg Ryan",
                        online: true,
                        img: "https://mdbootstrap.com/img/Photos/Avatars/avatar-12.jpg",
                        messages: [
                          {
                            id: 2,
                            date: "2019-06-26 11:15",
                            content: "Sed ut perspicantium.",
                            unread: false
                          }
                        ]
                      }
                    ]
                  },
                  {
                    id: 2,
                    loggedUserId: 1,
                    active: false,
                    lastId: 2,
                    chat: [
                      {
                        id: 1,
                        name: "Lara Croft",
                        img: "https://mdbootstrap.com/img/Photos/Avatars/avatar-6.jpg",
                        messages: [
                          {
                            id: 0,
                            date: "2019-04-21 15:00:09",
                            content:
                              "Sed ut perspiciatis unde omnis iste natus remque laudantium."
                          },
                          {
                            id: 1,
                            date: "2019-06-26 11:00",
                            content: "Sed ut doloremque laudantium."
                          }
                        ]
                      },
                      {
                        id: 3,
                        name: "John Smith",
                        img: "https://mdbootstrap.com/img/Photos/Avatars/avatar-13.jpg",
                        messages: [
                          {
                            id: 2,
                            date: "2019-06-26 11:15",
                            content: "Sed ut!",
                            unread: true
                          }
                        ]
                      }
                    ]
                  },
                  {
                    id: 1,
                    loggedUserId: 1,
                    active: false,
                    lastId: 2,
                    chat: [
                      {
                        id: 1,
                        name: "Lara Croft",
                        img: "https://mdbootstrap.com/img/Photos/Avatars/avatar-5.jpg",
                        messages: [
                          {
                            id: 0,
                            date: "2019-04-21 15:00:09",
                            content:
                              "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium."
                          },
                          {
                            id: 1,
                            date: "2019-06-26 11:00",
                            content:
                              "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium."
                          }
                        ]
                      },
                      {
                        id: 13,
                        name: "Olenna Gervais",
                        img: "https://mdbootstrap.com/img/Photos/Avatars/avatar-11.jpg",
                        messages: [
                          {
                            id: 2,
                            date: "2019-06-26 11:15",
                            content: "Sed ut perspicantium.",
                            unread: false
                          }
                        ]
                      }
                    ]
                  },
                  {
                    id: 2,
                    loggedUserId: 1,
                    active: false,
                    lastId: 2,
                    chat: [
                      {
                        id: 1,
                        name: "Lara Croft",
                        img: "https://mdbootstrap.com/img/Photos/Avatars/avatar-5.jpg",
                        messages: [
                          {
                            id: 0,
                            date: "2019-04-21 15:00:09",
                            content:
                              "Sed ut perspiciatis unde omnis iste natus remque laudantium."
                          },
                          {
                            id: 1,
                            date: "2019-06-26 11:00",
                            content: "Sed ut doloremque laudantium."
                          }
                        ]
                      },
                      {
                        id: 11,
                        name: "Max Jackson",
                        img: "https://mdbootstrap.com/img/Photos/Avatars/avatar-14.jpg",
                        messages: [
                          {
                            id: 2,
                            date: "2019-06-26 11:15",
                            content: "Sed laudantium!",
                            unread: false
                          }
                        ]
                      }
                    ]
                  }
                ],
                activeChat: 0,
              };
            },
            methods: {
              createMessage(e, id) {
                const { content, unread, date } = e;
                return {
                  id: id + 1,
                  date,
                  content,
                  unread
                };
              },
              sendMessage(e, chat) {
                const newMessage = this.createMessage(e, chat.lastId);
                chat.chat
                  .find(el => {
                    return el.id === chat.loggedUserId;
                  })
                  .messages.push(newMessage);

                chat.lastId += 1;
              },
              changeActiveChat(index) {
                this.activeChat = index;
                this.gradientChat.forEach((chat, i) => {
                  if (i === index) {
                    chat.active = true;
                  } else {
                    chat.active = false;
                  }
                });
              }
            }
          };
        </script>
      

        <style>
        .rare-wind-gradient {
          background-image: -webkit-gradient(
            linear,
            left bottom,
            left top,
            from(#a8edea),
            to(#fed6e3)
          );
          background-image: -webkit-linear-gradient(bottom, #a8edea 0%, #fed6e3 100%);
          background-image: linear-gradient(to top, #a8edea 0%, #fed6e3 100%);
         }

        .scrollbar-light-blue::-webkit-scrollbar-track {
          -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
          box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
          background-color: #f5f5f5;
          border-radius: 10px;
         }

        .scrollbar-light-blue::-webkit-scrollbar {
          width: 12px;
          background-color: #f5f5f5;
         }

        .scrollbar-light-blue::-webkit-scrollbar-thumb {
          border-radius: 10px;
          -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
          box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
          background-color: #82b1ff;
         }
        </style>
      

Small chat MDB Pro component


        <template>
          <mdb-chat-room v-if="toggle" small>
            <mdb-small-chat
              :loggedUserId="smallChat.loggedUserId"
              :chat="smallChat.chat"
              scrollbarClass="scrollbar-light-blue"
              small
              @send="sendMessage($event, smallChat)"
              @fileImage="fileImage"
              @reaction="addReaction"
              @game="game"
              @attach="attach"
              @camera="camera"
              @like="like"
              @video="video"
              @call="call"
              @settings="settings"
            >
              <template v-slot:media>
                <mdb-media class="mb-3">
                  <img
                    class="d-flex rounded mr-2"
                    src="https://mdbootstrap.com/img/Photos/Avatars/avatar-6.jpg"
                    alt="Generic placeholder image"
                    style="width: 60px"
                  >
                  <mdb-media-body style="font-size: 0.8rem">
                    <p class="my-0">You're friends on Facebook</p>
                    <p class="mb-0 text-muted">Web Designer at MDBootstrap</p>
                    <p class="mb-0 text-muted">Lives in Paris</p>
                  </mdb-media-body>
                </mdb-media>
              </template>
            </mdb-small-chat>
          </mdb-chat-room>
        </template>
      

        <script>
          import { mdbSmallChat, mdbChatRoom, mdbMedia, mdbMediaBody, mdbMediaImage } from 'mdbvue';

          export default {
            components: {
              mdbSmallChat,
              mdbChatList,
              mdbChatRoom,
              mdbMedia,
              mdbMediaBody,
              mdbMediaImage
            },

            data() {
              return {
                smallChat: {
                  loggedUserId: 1,
                  lastId: 4,
                  chat: [
                    {
                      id: 0,
                      name: "Brad Pitt",
                      online: true,
                      img: "https://mdbootstrap.com/img/Photos/Avatars/avatar-6.jpg",
                      messages: [
                        {
                          id: 0,
                          date: "2019-04-21 15:00:09",
                          content: "Sed ut perspi."
                        },
                        {
                          id: 1,
                          date: "2019-06-26 11:00",
                          content: "Sed ut peium."
                        },
                        {
                          id: 4,
                          date: "2019-06-26 11:20",
                          content:
                            "Error sit voluptatem accusantium doloremque laudantium."
                        }
                      ]
                    },
                    {
                      id: 1,
                      name: "Lara Croft",
                      img: "https://mdbootstrap.com/img/Photos/Avatars/avatar-5.jpg",
                      messages: [
                        {
                          id: 2,
                          date: "2019-06-26 11:15",
                          content:
                            "Sed ut or sit voluptatem accusantium doloremque laudantium."
                        },
                        {
                          id: 3,
                          date: "2019-06-26 11:16",
                          content: "voluptatem accusantium doloremque laudantium."
                        }
                      ]
                    }
                  ]
                },
              };
            },
            methods: {
              createMessage(e, id) {
                const { content, unread, date } = e;
                return {
                  id: id + 1,
                  date,
                  content,
                  unread
                };
              },
              sendMessage(e, chat) {
                const newMessage = this.createMessage(e, chat.lastId);
                chat.chat
                  .find(el => {
                    return el.id === chat.loggedUserId;
                  })
                  .messages.push(newMessage);

                chat.lastId += 1;
              },
              fileImage() {
                //create custom logic for this event
              },
              reaction() {
                //create custom logic for this event
              },
              game() {
                //create custom logic for this event
              },
              attach() {
                //create custom logic for this event
              },
              camera() {
                //create custom logic for this event
              },
              like() {
                //create custom logic for this event
              }, 
              video() {
                //create custom logic for this event
              }, 
              call() {
                //create custom logic for this event
              }, 
              settings() {
                //create custom logic for this event
              }
            }
          };
        </script>
      

Install MDB CLI
It's the fastest way to create and host MDB projects
Free Download

Edit these docs Rate these docs

Chat - API

In this section you will find advanced information about the Chat component. You will learn which modules are required in this component, what are the possibilities of configuring the component, and what events and methods you can use in working with it.


Import statement


        <script>
          import { mdbChatRoom, mdbChat, mdbChatList } from 'mdbvue';
        </script>
      

Chat Message

Basic building block of mdb-chat and mdb-small-chat is mdb-chat-message component. You can use it independently for building your own chat layouts.


        <template>
          <mdb-chat-message name="John Smith" message="Lorem ipsum!" time="2019-06-26 11:15">
        </template>
      

          <script>
            import { mdbChatMessage } from 'mdbvue';
            export default {
              components: {
                mdbChatMessage
              }
            }
          </script>
        

API Reference: Properties

Name Type Default Description Example
name String - Name displayed in the header <mdb-chat-message name="Alan Turing"/>
time String Time when message was send - data should be in following format: YYYY-MM-DD HH-MM-SS <mdb-chat-message time="1993-04-13 15:00"/>
message String "" Message content <mdb-chat-message message="Lorem ipsum"/>
small Boolean false Set to true changes message's layout to small version <mdb-chat-message small />
color String 'white' Adds color class to the message <mdb-chat-message color="bg-primary"/>
whiteText Boolean false Changes color of the inner text to white <mdb-chat-message whiteText/>
blackText Boolean false Changes color of the inner text to black <mdb-chat-message blackText/>

Chat

Data structure

Data passed to a chat property is an array of objects - each object represents one user with his/her id name img info as well as a messages array. Each message requires three keys - content id date - all messages in the chat array will be sorted and displayed in order determined by those IDs.


        chat: [
          {
            id: 0,
            name: "Brad Pitt",
            img: "https://mdbootstrap.com/img/Photos/Avatars/avatar-6.jpg",
            messages: [
              {
                id: 0,
                date: "2019-04-21 15:00:09",
                content:
                  "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium."
              },
              {
                id: 1,
                date: "2019-06-26 11:00",
                content:
                  "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium."
              },
              {
                id: 4,
                date: "2019-06-26 11:20",
                content:
                  "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium."
              }
            ]
          },
          {
            id: 1,
            name: "Lara Croft",
            img: "https://mdbootstrap.com/img/Photos/Avatars/avatar-5.jpg",
            messages: [
              {
                id: 2,
                date: "2019-06-26 11:15",
                content:
                  "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium."
              },
              {
                id: 3,
                date: "2019-06-26 11:16",
                content:
                  "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium."
              }
            ]
          }
        ]
      

API Reference: Properties

Name Type Default Description Example
chat Array - Details about data structure can be found here <mdb-chat :chat="data"/>
loggedUserId Number Determines which user is logged in and aligns his/her messages to the right <mdb-chat :chat="data" :loggedUserId="1"/>
avatarWidth Number 100 Sets the avatar's width. <mdb-chat :avatarWidth="120"/>
color String Changes the send button's color. <mdb-chat color="default" />
outline String Sets the send button style to outline and sets its color to the passed value. <mdb-chat outline="danger"/>
scroll Boolean false Scrolling the long content. <mdb-chat scroll/>
scrollbarClass String Allows to apply custom styles to a scrollbar. <mdb-chat scroll scrollbarClass="custom-scrollbar"/>
height Number 500 Sets the maximum height (in px) to a scrolling chat preview. <mdb-chat scroll :height="300" scrollbarClass="custom-scrollbar" />

API Reference: Events

Name Description Event
@send Event which handler is responsible for adding new messages. {date, content, undread: true}

Chat List

Data structure

Data passed to a data property is an array of objects - each object represents one chat and should include chat's id, lastId which is helpful for adding new messages, loggedUserId and chat array described here - additonally, adding to each message additional key unread and setting its value to true will add red badge with number of unread messages to each chat. Setting online: true in the user object will display a green online badge.


        chatList: [
          {
            id: 0,
            active: true,
            loggedUserId: 0,
            lastId: 2,
            chat: [
              {
                id: 0,
                name: "Brad Pitt",
                img: "https://mdbootstrap.com/img/Photos/Avatars/avatar-6.jpg",
                messages: [
                  {
                    id: 0,
                    date: "2019-04-21 15:00:09",
                    content:
                      "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium."
                  }
                ]
              },
              {
                id: 1,
                name: "Lara Croft",
                online: true,
                img: "https://mdbootstrap.com/img/Photos/Avatars/avatar-5.jpg",
                messages: [
                  {
                    id: 2,
                    date: "2019-06-26 11:15",
                    content:
                      "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium."
                  }
                ]
              }
            ]
          },
          {
            id: 1,
            loggedUserId: 0,
            lastId: 2,
            chat: [
              {
                id: 0,
                name: "Brad Pitt",
                img: "https://mdbootstrap.com/img/Photos/Avatars/avatar-6.jpg",
                messages: [
                  {
                    id: 0,
                    date: "2019-04-21 15:00:09",
                    content:
                      "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium."
                  },
                ]
              },
              {
                id: 1,
                name: "Ashley Olsen",
                img: "https://mdbootstrap.com/img/Photos/Avatars/avatar-2.jpg",
                messages: [
                  {
                    id: 2,
                    date: "2019-06-26 11:15",
                    content: "Sed ut perspicantium.",
                    unread: true
                  }
                ]
              }
            ]
          },
          {
            id: 2,
            loggedUserId: 0,
            lastId: 2,
            chat: [
              {
                id: 0,
                name: "Brad Pitt",
                img: "https://mdbootstrap.com/img/Photos/Avatars/avatar-6.jpg",
                messages: [
                  {
                    id: 0,
                    date: "2019-06-26 11:00",
                    content: "Sed ut doloremque laudantium."
                  }
                ]
              },
              {
                id: 1,
                name: "Danny Smith",
                img: "https://mdbootstrap.com/img/Photos/Avatars/avatar-3.jpg",
                messages: [
                  {
                    id: 2,
                    date: "2019-06-26 11:15",
                    content: "Sed ut perspiciatis laudantium.",
                    unread: true
                  }
                ]
              }
            ]
          },
          {
            id: 1,
            loggedUserId: 0,
            lastId: 2,
            chat: [
              {
                id: 0,
                name: "Brad Pitt",
                img: "https://mdbootstrap.com/img/Photos/Avatars/avatar-6.jpg",
                messages: [
                  {
                    id: 0,
                    date: "2019-04-21 15:00:09",
                    content:
                      "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium."
                  },
                ]
              },
              {
                id: 1,
                name: "Alex Turner",
                img: "https://mdbootstrap.com/img/Photos/Avatars/avatar-1.jpg",
                messages: [
                  {
                    id: 2,
                    date: "2019-06-26 11:15",
                    content: "Sed ut perspicantium.",
                    unread: true
                  }
                ]
              }
            ]
          },
          {
            id: 2,
            loggedUserId: 0,
            lastId: 2,
            chat: [
              {
                id: 0,
                name: "Brad Pitt",
                img: "https://mdbootstrap.com/img/Photos/Avatars/avatar-6.jpg",
                messages: [
                  {
                    id: 0,
                    date: "2019-04-21 15:00:09",
                    content:
                      "Sed ut perspiciatis unde omnis iste natus remque laudantium."
                  },
                ]
              },
              {
                id: 1,
                name: "Kate Moss",
                img: "https://mdbootstrap.com/img/Photos/Avatars/avatar-4.jpg",
                messages: [
                  {
                    id: 2,
                    date: "2019-06-26 11:15",
                    content: "Sed ut perspiciatis laudantium.",
                    unread: true
                  }
                ]
              }
            ]
          }
        ],
      

API Reference: Properties

Name Type Default Description Example
data Array - Details about data structure can be found above <mdb-chat-list :data="data"/>
scroll Boolean false Scrolling the long content <mdb-chat-list scroll/>
scrollbarClass String Allows to apply custom styles to a scrollbar <mdb-chat-list scroll scrollbarClass="custom-scrollbar"/>
height Number 500 Sets the maximum height (in px) to a scrolling chat preview. <mdb-chat-list scroll :height="300" scrollbarClass="custom-scrollbar" />

Chat Room

Wrapper component for mdb-chat or/and mdb-chat-list

API Reference: Properties

Name Type Default Description Example
color String '' Adds color class to the chat room. <mdb-chat-room color="grey"/>
small Boolean false If set to true changes position of the chat to fixed and place it in the right-bottom corner. <mdb-chat-room small/>

Small Chat

Data structure

Data passed to a chat property is an array of objects - each object represents one user with his/her id name img online info as well as a messages array. Each message requires three keys - content id date - all messages in the chat array will be sorted and displayed in order determined by those IDs.


        smallChat: {
          loggedUserId: 1,
          lastId: 4,
          chat: [
            {
              id: 0,
              name: "Brad Pitt",
              online: true,
              img: "https://mdbootstrap.com/img/Photos/Avatars/avatar-6.jpg",
              messages: [
                {
                  id: 0,
                  date: "2019-04-21 15:00:09",
                  content: "Sed ut perspi."
                },
                {
                  id: 1,
                  date: "2019-06-26 11:00",
                  content: "Sed ut peium."
                },
                {
                  id: 4,
                  date: "2019-06-26 11:20",
                  content:
                    "Error sit voluptatem accusantium doloremque laudantium."
                }
              ]
            },
            {
              id: 1,
              name: "Lara Croft",
              img: "https://mdbootstrap.com/img/Photos/Avatars/avatar-5.jpg",
              messages: [
                {
                  id: 2,
                  date: "2019-06-26 11:15",
                  content:
                    "Sed ut or sit voluptatem accusantium doloremque laudantium."
                },
                {
                  id: 3,
                  date: "2019-06-26 11:16",
                  content: "voluptatem accusantium doloremque laudantium."
                }
              ]
            }
          ]
        }
      

API Reference: Properties

Name Type Default Description Example
chat Array - Details about data structure can be found here <mdb-small-chat :chat="data"/>
loggedUserId Number Determines which user is logged in and aligns his/her messages to the right <mdb-small-chat :chat="data" :loggedUserId="1"/>
avatarWidth Number 100 Sets the avatar's width. <mdb-small-chat :avatarWidth="120"/>
color String Changes the send button's color. <mdb-small-chat color="default" />

API Reference: Events

Name Description Event
@send Event which handler is responsible for adding new messages. {date, content, undread: true}
@fileImage Allows setting custom event handler for click event registered on corresponding icon. click
@reaction Allows setting custom event handler for click event registered on corresponding icon. click
@game Allows setting custom event handler for click event registered on corresponding icon. click
@attach Allows setting custom event handler for click event registered on corresponding icon. click
@camera Allows setting custom event handler for click event registered on corresponding icon. click
@like Allows setting custom event handler for click event registered on corresponding icon. click
@video Allows setting custom event handler for click event registered on corresponding icon. click
@call Allows setting custom event handler for click event registered on corresponding icon. click
@settings Allows setting custom event handler for click event registered on corresponding icon. click

API Reference: Slots

Name Description
media Allows to display additional info about messages' receiver at the top of the chat.