Headless Vue Notification Library for Use With Tailwind | vt-notifications

vue-notifications-npm

vt-notifications is a customizable headless Vue notification component designed for the Tailwind framework.

notification component library, vue create notification component example how to use vue notifications vue notification toast component npm, react notifications not working

Features

  • 100% customizable
  • Create different combinations of notifications
  • Built-in transitions

How to make use of it:

Install and download:

# Yarn
$ yarn add vt-notifications

# NPM
$ npm i vt-notifications --save

1. Import the vt-notifications component.

import Vue from "vue";
import Notifications from "vt-notifications";

2. Register the component globally.

Vue.use(Notifications);

3. Create a notification popup or group notification as follows:

<notificationGroup group="myGroup1">
  // wrapper box
  <notification v-slot="{notifications}">
    notification layout
  </notification>
</notificationGroup>
<notificationGroup group="myGroup2">
  // wrapper box
  <notification v-slot="{notifications}">
    notification layout
  </notification>
</notificationGroup>
...

4. Show the notification on the app.

this.$notify({ 
  group: "myGroup1",
  title: "Title", 
  text: "Notification Message",
  type: "info" // info, warning
  },
  5000
);

Props

Props forĀ notification component, all are opcional.

NameTypeDefaultDescription
maxNotificationsNumber10Maximum notifications displayed simultaneously
transitionGroupClassesObject{enterActiveClassDelayed:”transform ease-out duration-300 transition delay-300″,enterActiveClass:”transform ease-out duration-300 transition”,enterClass:”translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-4″,enterToClass:”translate-y-0 opacity-100 sm:translate-x-0″,leaveActiveClass:”transition ease-in duration-500″,leaveClass:”opacity-100″,leaveToClass: “opacity-0”, moveClass: “transition duration-500 “}Classes for the transition-group component

Props forĀ notification group component, all are opcional.

NameTypeDescription
positionString“bottom” or “top are the posible values
groupStringName of the group of notifications

Defualt scoped slot

Scope props:

NameTypeDescription
notificationsArrayArrya of notification object
closeFunctionwhen called closes the notification. Expect the notification id as input

Customizable Notification Component With Tailwind, vt-notifications Plugin/Github


See Demo And Download

Official Website(sansil): Click Here

This superior jQuery/javascript plugin is developed by sansil. For extra Advanced Usages, please go to the official website.