https://github.com/devstack-be/devstack-notify
Headless Vue 3 notification library with Tailwind CSS
https://github.com/devstack-be/devstack-notify
notifications nuxtui tailwindcss tailwindui toast vite vue3
Last synced: 3 months ago
JSON representation
Headless Vue 3 notification library with Tailwind CSS
- Host: GitHub
- URL: https://github.com/devstack-be/devstack-notify
- Owner: devstack-be
- License: mit
- Created: 2024-03-08T18:26:09.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-04-12T19:03:34.000Z (about 1 year ago)
- Last Synced: 2024-04-14T05:08:29.570Z (about 1 year ago)
- Topics: notifications, nuxtui, tailwindcss, tailwindui, toast, vite, vue3
- Language: Vue
- Homepage:
- Size: 150 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Devstack Notify - Vue 3 & Tailwind CSS
[](https://www.npmjs.com/package/devstack-notify) [](https://img.shields.io/badge/Vue-3-green)
Headless Vue 3 notification library with Tailwind CSS.
Inspired by [NuxtUI Notifications](https://ui.nuxt.com/)
## 🌟 Features
- Vue 3 composition API support
- Fully written in Typescript
- Light and beautiful
- Easy to install and personnalisable
- Timeout, callback, actions
## 🤖 Demo
[Live Preview - coming soon]()
## ⚡️ Installation
```bash
yarn add devstack-notify
```
or
```bash
npm i devstack-notify
```
You can then register `Notifications` as a Vue plugin:
```js
import { createApp } from 'vue'
import Notifications from 'devstack-notify'
import App from './App.vue'
createApp(App)
.use(Notifications)
.mount('#app')
```
## 🍞 How to use
Add the "StackNotifications" components to your main layout or in `App.vue`:
```vue
```
Then, trigger notifications from your `.vue` files:
###### Composition API
```javascript
import { useToast } from "devstack-notify"
toast.add({
title: 'No type specified',
description: 'Small description'
})
toast.success({
title: 'Success',
description: 'Small description'
})
toast.error({
title: 'Error',
description: 'Small description'
})
toast.warning({
title: 'Warning',
description: 'Small description'
})
toast.info({
title: 'Info',
description: 'Small description'
})
```
## Props
* To do
## To do
* Complete documentation
* Tests
## Contributing
1. Fork it
2. Create your feature branch (`git checkout -b my-new-feature`)
3. Commit your changes (`git commit -am 'Added some feature'`)
4. Push to the branch (`git push origin my-new-feature`)
5. Create new Pull Request
## License
MIT