VueNotifications

vue.js agnostic library for non-blocking notifications

VueNotifications connects your app with notification UI library.
That's also means you can have any look and feel of notifications you want to!
And it would be easy to replace it =)

          import VueNotifications from 'vue-notifications'
import miniToastr from 'mini-toastr'// https://github.com/se-panfilov/mini-toastr

miniToastr.init()

function toast ({title, message, type, timeout, cb}) {
  return miniToastr[type](message, title, timeout, cb)
}

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

Vue.use(VueNotifications, options)

        export default {
  name: 'MyComponent',
  data () {
    return {}
  },
  notifications: {
    showSuccessMsg: {
      type: VueNotifications.types.success,
      title: 'Hello there',
      message: 'That\'s the success!'
    },
    showInfoMsg: {
      type: VueNotifications.types.info,
      title: 'Hey you',
      message: 'Here is some info for you'
    },
    showWarnMsg: {
      type: VueNotifications.types.warn,
      title: 'Wow, man',
      message: 'That\'s the kind of warning'
    },
    showErrorMsg: {
      type: VueNotifications.types.error,
      title: 'Wow-wow',
      message: 'That\'s the error'
    }
  }
}

vue.js agnostic library for non-blocking notifications

Config VueNotifications (single place in whole app that will changed if you'd replace 3rd-party notifications lib)

In your components (this part will never change)