Vue Bootstrap Chat
Vue Chat - Bootstrap 4 & Material Design
Note: This documentation is for an older version of Bootstrap (v.4). A
newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for
Bootstrap 5.
Go to docs v.5
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.webp",
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.webp",
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.webp",
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.webp",
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.webp",
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.webp",
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.webp",
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.webp",
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.webp",
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.webp",
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.webp",
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.webp",
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.webp",
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.webp",
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.webp",
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.webp",
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.webp",
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.webp",
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.webp",
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.webp",
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.webp",
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.webp",
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.webp",
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.webp",
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.webp",
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.webp",
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.webp",
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.webp",
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.webp",
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.webp",
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.webp",
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.webp",
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.webp",
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.webp",
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.webp",
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.webp",
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.webp",
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.webp",
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.webp",
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.webp",
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.webp",
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.webp",
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.webp",
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.webp",
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.webp",
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.webp",
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.webp",
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.webp",
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.webp",
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.webp",
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.webp",
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.webp",
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.webp",
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.webp",
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.webp"
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.webp",
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.webp",
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>
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.webp",
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.webp",
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.webp",
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.webp",
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.webp",
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.webp",
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.webp",
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.webp",
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.webp",
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.webp",
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.webp",
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.webp",
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.webp",
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.webp",
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. |