Customizable Notification Component With Tailwind – vt-notifications

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

Basic usage:

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 single notification popup or notification group 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
);

Preview:

Changelog:

v0.4.1 (03/06/2021)

• Update

Download Details:

Author: sansil

Live Demo: https://codesandbox.io/s/vue-tailwind-notifications-i4tgd?file=/src/App.vue

Download Link: https://github.com/sansil/vt-notifications/archive/master.zip

Official Website: https://github.com/sansil/vt-notifications

Install & Download:

# Yarn
$ yarn add vt-notifications

# NPM
$ npm i vt-notifications --save