Notify

Questo modulo utilizza notivue. Is a wrapper which allows you to customise the notification in the project

Configuration

For each style you can define icon, color and timeout

export default {
  notivue: {
    position: 'top-right',
    enqueue: true, // default
    limit: Number.POSITIVE_INFINITY, // default
  },
  we: {
    notify: {
      enabled: true,
      css: true,
      legacy: true, 
    },
  }
}

Notivue

• position: 'top-right'
  • Position of the notifications on the screen
• enqueue: true
  • If true, notifications are added to a queue and displayed one at a time. If false, notifications are not queued.
• limit: Number.POSITIVE_INFINITY
  • Maximum number of notifications that can be displayed at the same time. Infinity means no limit; all notifications will be displayed, either queued (if set true) or simultaneously.

WE

• enabled: true
  • Enables or disables the notification system
• css: true
  • Specifies whether to include the default CSS styles for notifications
• legacy: true
  • Supports legacy mode

Setup

Add the we-notification in your layouts

TIP

You can use all the props of the vuetify component to customise the notify component

<we-notification />

Compared to the previous version, the values for bottom, left, etc., are no longer defined inside the we-notification tag but should be configured within the notivue object, as seen in the Configuration section.

You can see the configuration here

Usage

Composition Api

In your vue pages and components you can use the push object to show a notify

push.success("Hello, I\'m a snackbar");
// or
push.error("oops");
// advanced usage
push.warn({
  title: 'Hi',
  message: 'You have a new follower'
})
// promise and resolve notify
push.promise('We\'re sending your message, hold on...')
setTimeout(() => {
  notification.resolve({
    message: 'Your message has been successfully sent.',
  })
}, 3000)

Allowed styles are success, error, warn, and info (default info).

Legacy

In your vue pages and components you can use the push object to show a notify

this.$notify.success("Hello, I\'m a notify");
// or
this.$notify.error("oops");
// advanced usage
this.$notify.warn({
  title: 'Hi',
  message: 'this is example of a message'
})
// promise and resolve notify
this.$notify.promise('We\'re sending your message, hold on...')
setTimeout(() => {
  notification.resolve({
    message: 'Your message has been successfully sent.',
  })
}, 3000)

Allowed styles are success, error, warn, and info (default info).

Options

Here are all the options listed for the object

Name	Type	Default	Description
title	String		Title of the notification.
message	String		Message of the notification.
duration	Number	3000	Duration of the notification.

To discover all possible customizations, click qui

Custom we-notification component

If you need to customise the we-notification component, you can create your own component and use it instead of the default one.

You can find our component here