Notify

This module act like v-snackbar vuetify component. 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 {
  we: {
    notify: {
      success: {
        icon: 'mdi-check-circle',
        color: 'success',
        timeout: 2000,
      },
      warning: {
        icon: 'mdi:exclamation',
        color: 'warning',
        timeout: 5000,
      },
      error: {
        icon: 'mdi:alert',
        color: 'error',
        timeout: 5000,
      },
      info: {
        icon: 'mdi:information',
      },
    }
  }
}

Setup

Add the we-notify in your layouts

TIP

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

<we-notify bottom text></we-notify>

Usage

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

this.$notify.success("Hello, I'm a snackbar");
// or
this.$notify.error("oops");
// or
this.$notify.warn(
  "The given data was invalid.",
  "Email must be a valid email address"
);

// advanced usage
this.$notify.success("Title!", "Some text", {
  timeout: 3000,
  color: 'secondary',
  icon: 'md-check-circle',
});

Allowed styles are info, warn, success and error.

Options

Here are all the options listed for the object

Name	Type	Default	Description
title	String		Title of the notification
text	String		Text of the notification
options.timeout	number	3000	Override the timeout of the notification
options.color	String		Override the color of the notification
options.icon	String		override the icon of the notification
options.dismissIcon	String	$close	dismiss icon

Custom we-notify component

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

You can find our component here