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.
| Name | Type | Default | Description |
|---|---|---|---|
| maxNotifications | Number | 10 | Maximum notifications displayed simultaneously |
| transitionGroupClasses | Object | {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.
| Name | Type | Description |
|---|---|---|
| position | String | “bottom” or “top are the posible values |
| group | String | Name of the group of notifications |
Defualt scoped slot
Scope props:
| Name | Type | Description |
|---|---|---|
| notifications | Array | Arrya of notification object |
| close | Function | when 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.