Notify

Notify is a Quasar plugin that can display animated messages (floating above everything in your pages) to users in the form of a notification. They are useful for alerting the user of an event and can even engage the user through actions. Also known as a toast or snackbar.

Installation

// quasar.conf.js

return {
  framework: {
    plugins: [
      'Notify'
    ],
    config: {
      notify: { /* look at QUASARCONFOPTIONS from the API card (bottom of page) */ }
    }
  }
}

Usage

Basic

// outside of a Vue file
import { Notify } from 'quasar'

Notify.create('Danger, Will Robinson! Danger!')
// or with a config object:
Notify.create({
  message: 'Danger, Will Robinson! Danger!'
})

// inside of a Vue file
this.$q.notify('Message')
// or with a config object:
this.$q.notify({...})
Basic

TIP

If you define any actions, the notification will automatically be dismissed when the user picks it.

With caption

Caption

With icon or avatar

With icon
With avatar

With actions

With actions

Multiline

Multiline

Positioning

Positioning & different options

TIP

For a full list of options, check the API section.

Grouping

Each notification has an underlying unique group which is computed out of the message + caption + multiLine + actions labels + position. When multiple notifications get triggered with the same group, instead of showing all of them and flooding the view, only the first one remains on screen along with a badge. The badge content represents the number of times that the same notification has been triggered (and with same position) since the first one appeared on screen.

However, if you wish to disable this behavior, specify group: false. In the example below, the first button triggers the same notification twice each time is clicked. The second button has grouping disabled. The third button, however, has a custom group name so each subsequent notification replaces the old one and increments the badge number.

Grouping
Custom badge

Timeout progress

Should you wish, there is a way to tell the user when the notification will disappear from the screen. That’s for the cases when timeout is not set to 0.

Timeout progress

Predefined types

There are four predefined types out of the box that you can use: “positive”, “negative”, “warning” and “info”:

Out of the box types

Furthermore, you can register your own types or even override the predefined ones. The best place to do this would be in a boot file.

Custom type
// How to register in a boot file:

import { Notify } from 'quasar'

Notify.registerType('my-notif', {
  icon: 'announcement',
  progress: true,
  color: 'brown',
  textColor: 'white',
  classes: 'glossy'
})

Using HTML

You can use HTML on message if you specify the html: true prop. Please note that this can lead to XSS attacks, so make sure that you sanitize the message by yourself.

Unsafe HTML message

Programmatically closing

Notifications are meant to be dismissed only by the user, however for exceptional cases you can do it programmatically. Especially useful when you set indefinite timeout (0).

const dismiss = this.$q.notify({...})
...
dismiss()

Setting defaults

There are two ways of setting default configuration that will apply to all Notifications: through quasar.conf.js > framework > config > notify Object (see Installation section) or programmatically (see below).

We’ll describe setting the defaults through a boot file (works the same anywhere in your code, but a boot file ensures this is run before your app starts):

First we create the boot file. Let’s name it “notify-defaults.js”.

$ quasar new boot notify-defaults

Add the created notify-defaults.js file to the boot array in quasar.conf.js:

module.exports = function(ctx) {
  return {
    // ...
    boot: ['notify-defaults'],
    // ...
  }

We then edit the newly created /src/boot/notify-defaults.js:

import { Notify } from 'quasar'

Notify.setDefaults({
  position: 'top-right',
  timeout: 2500,
  textColor: 'white',
  actions: [{ icon: 'close', color: 'white' }]
})

WARNING

You can only set default actions through this method. Specifying actions with handlers in quasar.conf.js cannot and will NOT work.

We could also set the defaults in some Vue file:

// inside of a Vue component
this.$q.notify.setDefaults({
  position: 'top-right',
  timeout: 2500,
  textColor: 'white',
  actions: [{ icon: 'close', color: 'white' }]
})

Notify API