Limit and Queue

Default behavior

Vite - main.js

const notivue = createNotivue({
  enqueue: false, // default
  limit: Infinity // default
})

Nuxt - nuxt.config.ts

export default defineNuxtConfig({
  modules: ['notivue/nuxt'],
  notivue: {
    enqueue: false, // default
    limit: Infinity // default
  }
})

By default, unlimited notifications are displayed and announced as soon as they are pushed to the stream.

Limiting notifications

The limit option controls the maximum number of notifications that are displayed at the same time.

Vite - main.js

const notivue = createNotivue({
  enqueue: false, // default
  limit: 3
})

Nuxt - nuxt.config.ts

export default defineNuxtConfig({
  modules: ['notivue/nuxt'],
  notivue: {
    enqueue: false, // default
    limit: 3
  }
})

If enqueue is set to false, once the limit is reached, if a new notification is pushed, the oldest one is automatically dismissed to make room for the new one.

While this is visually appealing, it doesn't ensure that each notification is displayed and announced before being dismissed.

That's where the Queue comes in.

Queue activation

Vite - main.js

const notivue = createNotivue({
  enqueue: true,
  limit: 3
})

Nuxt - nuxt.config.ts

export default defineNuxtConfig({
  modules: ['notivue/nuxt'],
  notivue: {
    enqueue: true,
    limit: 3
  }
})

If enqueue is set to true and a limit is specified, once the limit is reached, new notifications will be enqueued.

The first notification will be displayed and announced as soon as a notification is dismissed and so on.

To adhere with the Material Design guidelines, set enqueue to true and limit to 1.

Promises-based notifications

When the limit is hit, promise-based notifications are enqueued just like any other type.

If their state is updated while still in the queue, the corresponding success or error notification will be displayed and announced when its turn comes up.

Skipping the queue

If the queue is enabled, use the skipQueue push prop to display that specific notification immediately:

push.info({
  message: 'This notification will be displayed immediately.',
  skipQueue: true
})