The Notification vue plugin allow you to display notifications from all your app. Just with one ligne of code. I know there are lots of others but the peculiarity of this one is to have GSAP to animate your toast of a million way

Install with npm. If you don't already have GSAP in your project. You also have to install it.

npm i @kugatsu/vuenotification --save
npm i gsap --save

Import with ES6

import VueNotification from "@kugatsu/vuenotification";

Vue.use(VueNotification, {
  timer: 20
});

Throw notification where you want.

this.$notification.new("hello world", {  timer: 10 });
this.$notification.error("hello world", { infiniteTimer: false });
...

There is 5 notifications types.

• primary
• dark
• success
• warning
• error

To custom the colors of the notification you can do globaly or localy :

// Sample to change all error notification
Vue.use(NotificationVuejs, {
  error: {
    background: "green",
    color: "red"
  }
});

To animate the in and out animation, we use GSAP. To customize the default animation, you have to add to your config object. animateIn and animateOut with function that return gsap timeline.

Vue.use(NotificationVuejs, {
  animateIn: function() {
    var tl = new TimelineMax()
      .from(this.notificationEl, 0.6, {
        opacity: 0
      })
      .from(this.notificationEl, 0.4, {
        borderRadius: 100,
        width: 58,
        height: 58
      })
      .from(this.notificationElContent, 0.3, {
        opacity: 0
      });
    return tl;
  }
});

You can select the notification with custom selector.