Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/sansil/vt-notifications
A headless vue notification library to use with tailwind
https://github.com/sansil/vt-notifications
tailwindcss tailwindui vue vuejs
Last synced: about 2 months ago
JSON representation
A headless vue notification library to use with tailwind
- Host: GitHub
- URL: https://github.com/sansil/vt-notifications
- Owner: sansil
- License: mit
- Created: 2020-09-09T18:46:50.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2022-11-03T00:05:23.000Z (almost 2 years ago)
- Last Synced: 2024-07-05T13:38:28.869Z (3 months ago)
- Topics: tailwindcss, tailwindui, vue, vuejs
- Language: Vue
- Homepage:
- Size: 199 KB
- Stars: 91
- Watchers: 5
- Forks: 17
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
[](https://github.com/sansil/vt-notifications)
[](https://www.npmjs.com/package/vt-notifications)
# vt-notifications
A headless vue notification library to use with tailwind
## 🌟 Features
- 100% customizable
- Create different groups of notifications
- Built in transitions
## 🤖 Demo
[Live demo](https://codesandbox.io/s/vue-tailwind-notifications-i4tgd?file=/src/App.vue)
## ⚡️ Installation
```bash
yarn add vt-notifications
```
or
```bash
npm i vt-notifications
```
You can then register Notifications as a Vue plugin.
```js
import Vue from "vue";
import Notifications from "vt-notifications";
Vue.use(Notifications);
```
## 🍞 How to use
```vue
// Here put your notifications wrapper box
...
// Here put your notification layout
...
```
### Basic example
For example in your App.vue
```vue
{{notification.title}}
{{notification.text}}
```
Then in any of your vue files:
```javascript
this.$notify(
{ group: "foo", title: "Success", text: "Your account was registered!" },
2000
); // 2s
```
The first argument is an object containing the data for the `notification` layout, it important to specify the group where the notificatoins are going to be displayed, the second argument is the timeout. The default timeout is 3 seconds.
### Example with differents groups
You can use `notificationGroup` component to have different types of notifcations. For example, notifcations error messages in top center and generic app notifications in bottom-right corner
```vue
{{notification.title}}
{{notification.text}}
{{notification.title}}Info
{{notification.text}}
```
Then in any of your vue files:
```javascript
// error notifcation
this.$notify(
{ group: "error", title: "Error", text: "Your email is already used!" },
4000
);
// generic notification
this.$notify(
{
group: "generic",
title: "Info",
text: "This channel archived by the owner",
},
4000
);
```
### Using different types of notifcations
You can render different types of notifications in the same group using a conditional, for example `v-if="notification.type==='info'"`
```vue
{{notification.title}}
T{{notification.text}}
{{notification.title}}
{{notification.text}}
```
Then in any of your vue files:
```javascript
// error notifcation
this.$notify(
{
title: "Info",
text: "This channel archived by the owner!",
type: "info",
group: "foo",
},
4000
);
// generic notification
this.$notify(
{
title: "Warning",
text: "Your image size is too large!",
type: "warning",
group: "foo",
},
4000
);
```
## 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 |
### Example
```vue
Holy smokes!
Something seriously bad happened.
Close
```
## Using the library in Nuxt.js
To get this library working in Nuxt.js you need to prepare a few things.
Create a new plugin in your Nuxt.js project `plugin/vt-notifications.js` and add the following:
```js
import Vue from "vue";
import Notifications from "vt-notifications";
Vue.use(Notifications);
```
Now you need to add the plugin in your `nuxt.config.js` and add vt-notifications to the transpilation build step.
Add the following lines in your `nuxt.config.js`:
```js
plugins: [
{ src: "~/plugins/vt-notifications" },
],
build: {
transpile: [
"vt-notifications"
],
}
```