[](https://github.com/killmenot/vue3-vt-notifications)
[](https://www.npmjs.com/package/vue3-vt-notifications)
# vue3-vt-notifications
A headless vue notification library to use with tailwind
- This is port of Vue 2 [vt-notifications](https://github.com/sansil/vt-notifications) created by [sansil](https://github.com/sansil). Please use his version if you use Vue 2.x
- Sponsored by [Britton Mathew](https://github.com/printscreen) from Veedback
## 🌟 Features
- 100% customizable
- Create different groups of notifications
- Built in transitions
## 🤖 Demo
[Live demo](https://codesandbox.io/s/vue-tailwind-notifications-forked-i74t0?file=/src/App.vue)
## ⚡️ Installation
```bash
yarn add vue3-vt-notifications
```
or
```bash
npm i vue3-vt-notifications
```
You can then register Notifications as a Vue plugin.
```js
import { createApp } from 'vue'
import Notifications from 'vue3-vt-notifications'
import App from './App.vue'
createApp(App)
.use(Notifications)
.mount('#app')
```
## 🍞 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",enterFromClass:"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",leaveFromClass:"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.
```
## 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/vue3-vt-notifications.js` and add the following:
```js
import Vue from "vue";
import Notifications from "vue3-vt-notifications";
Vue.use(Notifications);
```
Now you need to add the plugin in your `nuxt.config.js` and add vue3-vt-notifications to the transpilation build step.
Add the following lines in your `nuxt.config.js`:
```js
plugins: [
{ src: "~/plugins/vue3-vt-notifications" },
],
build: {
transpile: [
"vue3-vt-notifications"
],
}
```