vadymsem / vue-bubble-chat

πŸš€ Awesome vue chat component

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

vue-bubble-chat

Amesome & simple vue chat component

preview

Installation

npm install --save vue-bubble-chat

Usage

import Vue from "vue";
import BubbleChat from "vue-bubble-chat";

Vue.use(BubbleChat);

Params

Param name Data Description
position type: string, default: 'right' horizontal position on your page, receives 'left' or 'right' values
messages type: array, default: [ ] objects array with all your chat messages
text-field type: string name of key which is equel to your message
sender-name-field type: string name of key which is equel to user's name
avatar-link-field type: string name of key which is equel to user's avatar link; by default it will be simple circle with the first letter of user's name

Events

Event name Data Description
chatWasUpdated object: {chatState: [{...}, {...}, ...]} return a an object with chatState key where will be stored full messages array

Example

<template>
   <bubble-chat
     :position="chatPosition"
     :messages="messagesList"
     :text-field="'message'"
     :sender-name-field="'username'"
     :avatar-link-field="'iconUrl'"
   >
   </bubble-chat>
</template>

<script>
 ...
 data() {
   return {
     chatPosition: 'right',
     messagesList: [
      {
          username: 'John Doe',
          message: 'Hey guys! How are you?',
          iconUrl: 'https://www.link-to-john-doe-pic.jpg'
      }
     ]
    }
 }

...
<script>

Enjoy!

License

MIT

About

πŸš€ Awesome vue chat component


Languages

Language:Vue 98.8%Language:JavaScript 1.2%