Vue.js agnostic non-blocking notifications library

npm i vue-notifications --save

bower i vue-notifications --save

import VueNotifications from 'vue-notifications'

Vue.use(VueNotifications, options)

// 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
    },
//  ...

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

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

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.type.error instead of 'error'
      }
    },
    vuex: {
      //...
    }
  }

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

 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).