Customizable Notification Component With Tailwind – vt-notifications

Install & Download:

# Yarn
$ yarn add vt-notifications
# NPM
$ npm i vt-notifications --save

Description:

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