Advanced Setup

You could setup vue-notificatio a little bit more if you want

Global configuration

vue-notification has some default values, such as timeout and type:

config: {
  type: TYPE.info,
  timeout: 3000
}

You can override them via config object:

VueNotifications.config.timeout = 4000
VueNotifications.config.type = 'error'

You have to do it before Vue.use(VueNotifications, options) call.

Your own property name

If for some reasons you aren't happy with `notifications`, then you can set your own word for this case:

VueNotifications.propertyName = 'messages'

You have to do it before Vue.use(VueNotifications, options) call.

And as a result you would be able to do:

/...
messages: {
  errorMsg: {
    type: 'error',
    title: 'Error title',
    message: 'Some error msg'
},
//...

Instead of

//...
notifications: {
  errorMsg: {
    type: 'error',
    title: 'Error title',
    message: 'Some error msg'
},
//...

Adding custom field

Let's say we want to send our messages not only to UI lib (mini-toastr?), but also to console.
In this case we can add some custom field to our notifications:

notifications: {
  showLoginError: {
    message: 'Failed to authenticate',
    type: 'error',
    consoleMessage: 'let it be in console' // Our brand new field
  }
}

And here is our new mapping function from Getting Started section

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

Don't forget to do:

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

Vue.use(VueNotifications, options)

After that

results matching ""

    No results matching ""