vue-notifications

| SITE | DOCS | GITHUB |

vue-notifications

VueNotifications - agnostic non-blocking notifications library, that allow you to use notifications in declaration style.

---

Installation

via npm:

npm i vue-notifications --save

via bower:

bower i vue-notifications --save

or download latest release

include in project:

import VueNotifications from 'vue-notifications'

Vue.use(VueNotifications, options)

Setup and configuration

Attention: By default VueNotification send all messages to console. To activate non-blocking notifiction you've got to use third-party library, like toasr. I suggest you to use mini-toastr (npm i mini-toastr --save)

// Include Plugin in project
import VueNotifications from 'vue-notifications'

// Include mini-toaster (or any other UI-notification library
import miniToastr from 'mini-toastr'

// If using mini-toastr, provide additional configuration
const toastTypes = {
  success: 'success',
  error: 'error',
  info: 'info',
  warn: 'warn'
}

miniToastr.init({types: toastTypes})

// Here we setup messages output to `mini-toastr`
function toast ({title, message, type, timeout, cb}) {
  return miniToastr[type](message, title, timeout, cb)
}

// Binding for methods .success(), .error() and etc. You can specify and map your own methods here.
// Required to pipe our output to UI library (mini-toastr in example here)
// All not-specified events (types) would be piped to output in console.
const options = {
  success: toast,
  error: toast,
  info: toast,
  warn: toast
}

// Activate plugin
Vue.use(VueNotifications, options)// VueNotifications have auto install but if we want to specify options we've got to do it manually.

// THIS ISN'T REQUIRED IF YOU DON'T USE 'mini-toastr'
// and if you would use "miniToastr" you have to init in in your App.vue
import miniToastr from 'mini-toastr'// don't forget to make "npm i mini-toastr --save"

//in 'ready section
//  ...
    ready () { //'mounted' instade of ready for Vue 2.0
      miniToastr.init()//or "miniToastr.init(miniToastrConfig)" if you want to specify configuration
    },
//  ...

If you want to setup VueNotification's global configuration, you can do it simple:

VueNotifications.config.timeout = 4000
Vue.use(VueNotifications, options)

Also you can use any other word instead of notifications for configs:

VueNotifications.propertyName = 'messages'
Vue.use(VueNotifications, options)

Usage

You've got to specify notifications config:

export default {
    name: 'DemoView',
    data () {
      //...
    },
    computed: {
      //...
    },
    methods: {
      //...
    },
    notifications: {
      showLoginError: {
        title: 'Login Failed',
        message: 'Failed to authenticate',
        type: 'error' //Default: 'info', also you can use VueNotifications.types.error instead of 'error'
      }
    },
    vuex: {
      //...
    }
  }

Now you can call this.showLoginError() in any place of this page (i.e. in methods, or whatever).

You also can call .success(), .error() and other methods directly (for example in JavaScript files):

In some.js:

  import VueNotifications from 'vue-notifications'
  VueNotifications.error({message: 'Some Error'})

Overriding config.

Even if you have specify config, you can ovverride it in any call simple by sending config object: this.showLoginError({type: 'warn'}). i.e.:

 notifications: {
      showLoginError: {
        message: 'Failed to authenticate',
        type: 'error'
      }
    }

this.showLoginError() //error message
this.showLoginError({type: 'warn'}) //info message

//Also you can send here whatever params. All would be passed down to `mini-toastr` or any other lib.
Keep in mind that configs merging by `Object.assign` (no deep copying).

Options

VueNotification can work fine with any of your custom options, but by default it would be:

Name	Type	Default	Description
title	String	undefined	Notification's title
message	String	undefined	Notification's body message. Normally should be set up;
timeout	Number	3000	time before notifications gone
cb	Function	undefined	Callback function;

How to add custom field?

Simple: this.showLoginError({consoleMessage: 'let it be in console'}). You've passed a custom config here ({consoleMessage: 'let it be in console'}) that will be merged with config from notifications.showLoginError and with global config via Object.assign (beware of shallow copy).

As other option, you can specify as much custom fields as you want in notifications section:

      //...
    notifications: {
      showLoginError: {
        message: 'Failed to authenticate',
        type: 'error', //Also you can use VueNotifications.types.error instead of 'error'
        consoleMessage: 'let it be in console',
        consoleMessage2: 'let it be in console too',
        //etc
      }
    }
      //...

And do whatever you want after that:

function toast ({title, message, type, timeout, cb, consoleMessage}) {
  if (consoleMessage) console[type](consoleMessage) //Here we go!
  return miniToastr[type](message, title, timeout, cb)
}

const options = {
  success: toast,
  error: toast,
  info: toast,
  warn: toast
}

Vue.use(VueNotifications, options)

Browser support.

All modern browsers (ES5 support require). See ECMAScript 5 compliant browsers. You can use ES5 or ES6 versions as well.

License

MIT License

Copyright (c) 2016 Sergei Panfilov

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.