https://github.com/vadymsem/vue-bubble-chat
🚀 Awesome vue chat component
https://github.com/vadymsem/vue-bubble-chat
chat chat-application chat-web-client chat-websockets chat-widget vue vue-chat vue-components vuejs2
Last synced: about 1 year ago
JSON representation
🚀 Awesome vue chat component
- Host: GitHub
- URL: https://github.com/vadymsem/vue-bubble-chat
- Owner: vadymsem
- Created: 2019-08-09T09:30:17.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2019-08-13T09:51:09.000Z (almost 7 years ago)
- Last Synced: 2025-02-03T09:46:58.051Z (over 1 year ago)
- Topics: chat, chat-application, chat-web-client, chat-websockets, chat-widget, vue, vue-chat, vue-components, vuejs2
- Language: Vue
- Homepage:
- Size: 14.6 KB
- Stars: 14
- Watchers: 2
- Forks: 5
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# vue-bubble-chat
Amesome & simple vue chat component
## Installation
```bash
npm install --save vue-bubble-chat
```
## Usage
```vue
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
```vue
...
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](https://choosealicense.com/licenses/mit/)