https://github.com/keen-on-design/vue-flash-message
Vue js flash messages component
https://github.com/keen-on-design/vue-flash-message
flash-messages javascript notifications vuejs
Last synced: 2 months ago
JSON representation
Vue js flash messages component
- Host: GitHub
- URL: https://github.com/keen-on-design/vue-flash-message
- Owner: keen-on-design
- License: mit
- Created: 2017-12-26T00:23:55.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2021-04-10T15:46:35.000Z (over 4 years ago)
- Last Synced: 2025-10-01T13:50:43.754Z (2 months ago)
- Topics: flash-messages, javascript, notifications, vuejs
- Language: JavaScript
- Size: 649 KB
- Stars: 88
- Watchers: 3
- Forks: 19
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-vue-zh - Vue快闪消息 - 简单而灵活的通知插件 (UI组件 / 通知)
- awesome-vue - vue-flash-message - Vue js flash messages component ` 📝 3 years ago` (UI Components [🔝](#readme))
- awesome-vue - vue-flash-message ★53 - Simple yet flexible notification plugin (UI Components / Notification)
- awesome-vue - vue-flash-message - Simple yet flexible notification plugin (Components & Libraries / UI Components)
- awesome-vue - vue-flash-message - Simple yet flexible notification plugin (UI Components / Notification)
README
# vue-flash-message
[](https://www.npmjs.com/package/vue-flash-message)
[](https://github.com/keen-on-design/vue-flash-message/blob/master/LICENSE)
[](https://github.com/vuejs/awesome-vue)
Simple yet flexible vue flash alert message component. It is made to display a list of messages and give individual control over each instance and global message storage. Component is inspired by old goodies as jGrowl.
## Demo & Example
#### [Live demo](http://test.keen-design.ru/vue-flash-message/)
## Install
```bash
npm install --save vue-flash-message
```
## Configuration
```javascript
import Vue from 'vue';
import VueFlashMessage from 'vue-flash-message';
Vue.use(VueFlashMessage);
```
You can rename default flash method via options:
```javascript
Vue.use(VueFlashMessage, { method: 'iPreferQuickSilver' });
```
## Usage
Output flash message pool and configure transitions.
```html
```
(Optional) Include pre defined basic css.
```javascript
require('vue-flash-message/dist/vue-flash-message.min.css');
```
Emit flash messages from any component with a flash (or custom named) method.
```javascript
this.flash('Data loaded', 'success');
this.flash('Validation failed', 'error');
this.flash('Spawning too much alerts is a bad UX', 'warning');
this.flash('Live long and prosper', 'info');
```
## Shortcut methods
You can also use shortcut methods to output common message types
```javascript
this.flashSuccess('Data loaded');
this.flashError('Validation failed');
this.flashWarning('Spawning too much alerts is a bad UX');
this.flashInfo('Live long and prosper');
```
You if you don't want to spoil your components with these methods,
you can switch them off by using createShortcuts config option.
```javascript
Vue.use(VueFlashMessage, {
createShortcuts: false,
});
```
## Usage with options
```javascript
this.flash('Hello World', 'success', {
timeout: 3000,
beforeDestroy() {
alert('oh no, not again!');
}
});
```
### Options
| Name | Type | Default | Desciption |
| ---: |:---: |:--- |:--- |
| timeout | Number | 0 | Number in milliseconds until message self destruct |
| important | Boolean | false | Defines if message has a close button. |
| autoEmit | Boolean | true | Defines if message should be emitted immediately after calling flash method |
| pauseOnInteract | Boolean | false | Defines if message destruct timer should be paused on user interaction |
| beforeDestroy | Function | - | Fires bofore message is destroyed |
| onStartInteract | Function | - | Fires on user interact with message element |
| onCompleteInteract | Function | - | Fires on user complete interaction with message element |
### Props
| Name | Type | Default | Desciption |
| ---: | :---: | :---: | :--- |
| transitionName | String | custom-classes-transition | vue transitions `name` |
| outerClass | String | 'flash__wrapper' | outer class name |
## Passing global message options
```javascript
Vue.use(VueFlashMessage, {
messageOptions: {
timeout: 1000,
important: true,
autoEmit: false,
pauseOnInteract: true
}
});
```
## API
Flash method returns message object giving you full controll over it's contents, options and lifecycle.
```javascript
const myMessage = this.flash('My message', 'info');
```
| Method | Desciption |
| ---: |:--- |
| emit() | Adds message to global storage. Helpfull when message is created with autoEmit: false |
| destroy() | Destroys message |
| getStorage() | Returns global flash message storage object |
| setSelfDestructTimeout(timeout) | Sets message self destruct timer value (in milliseconds) |
| startSelfDestructTimer() | Starts self destruct timer |
| killSelfDestructTimer() | Stops self destruct timer |
Calling flash method with no arguments will return flash storage object.
```javascript
const messageStorage = this.flash();
```
| Method | Desciption |
| ---: |:--- |
| flash(...) | Same as this.flash method, except it does not return storage instance |
| push(id, message) | Adds message object to storage with id key |
| destroy(id) | Destroys message by given id |
| destroyAll() | Destroys all messages |
## Vuex usage
You can access flash message storage object directly from Vue prototype:
```
Vue.prototype.$flashStorage.flash(...);
```
## License
Vue-Flash-Message is open-sourced software licensed under the MIT license.