# Vue-Easy-Notify
## Introduction
Vue Notify is very minimal and simple to use plugin available for VueJs, It comes with mixin that you can use to easily integrated your server-service notifications with vue-easy-notify.
---
- [Demo](#demo)
- [Quick Start](#quick-start)
- [Server Side Usage](#server-side-usage)
- [API](#api)
---
## Demo
[CodePen](https://codepen.io/)
## Quick Start
### NPM
Install the package:
```bash
npm install vue-easy-notify
```
Register the plugin:
```js
import Vue from 'vue'
import NotifyPlugin from 'vue-easy-notify'
import 'vue-easy-notify/dist/vue-easy-notify.css' // import style
Vue.use(NotifyPlugin)
```
Use the component:
```html
```
```js
// you can call like this in your component
this.$notifyInfo("This is info message.")
// and also
Vue.prototype.$notifyInfo("Another info message.")
```
Great Now you have this cool vue-easy-notify installed on your project..
##### Examples
```html
```
```javascript
// notify by notification type
this.$notify({
message: 'Example message.',
type: 'info' // success, warning, error
})
// notify with timeout
this.
({
message: 'Example message.',
type: 'success',
timeout: 3000
})
// shorthand methods
this.$notifyInfo('This is info messsage.');
this.$notifySuccess('This is success messsage.');
this.$notifyWarning('This is warning messsage!');
this.$notifyError('This is error messsage!');
```
## Server Side Usage
Below is the example how you can use vue-easy-notify to handle laravel server side flash message and errors.
Install [laracasts/flash](https://github.com/laracasts/flash) composer package.
```bash
composer require laracasts/flash
```
```php
// ExampleController
// ... //
public function index()
{
flash()->info('server side flash message.');
return redirect('/home');
}
// ... //
```
```html
{{ session()->forget('flash_notification') }}
```
add and use this plugin in your project to check laravel notifications
```js
// resources/js/mixins/notifications.js
export default {
mounted() {
this.checkNotify();
},
methods: {
checkNotify() {
if (!flash_notification) {
return;
}
flash_notification.forEach(notification => {
let type = notification.level;
if (type === 'danger') {
type = 'error';
}
this.$notify({
message: notification.message,
timeout: 5000,
type
})
})
}
}
}
```
```js
// resources/js/app.js
import Vue from 'vue'
import NotifyPlugin from 'vue-easy-notify'
import NotifyMixin from './mixins/notifications.js'; // this mixin will automatically check server side notfications.
Vue.use(NotifyPlugin)
new Vue({
el: '#app',
mixins: [NotifyMixin],
mounted() {
this.$notifyInfo('show message from client side.')
}
})
```
## API
### Options
below are the options you can pass to notify function.
**Option**|**Type's**|**Default**|**Description**
-----|-----|-----|-----
message|String|''|Notification message content
type|String|'info'|Notification level
**['info', 'success', 'warning', 'error']**
size|String|'sm'|Notification size
**['sm', 'lg']**
timeout|Number|5000|Display time of the notification in millisecond
showClose|Boolean|true|Show close icon on notification
**[true, flase]**