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


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


  • 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 i vt-notifications --save

1. Import the vt-notifications component.

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

2. Register the component globally.


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

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

4. Show the notification on the app.

  group: "myGroup1",
  title: "Title", 
  text: "Notification Message",
  type: "info" // info, warning


Props forĀ notification component, all are opcional.

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.

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

Defualt scoped slot

Scope props:

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.