https://github.com/devstack-be/devstack-notify
A headless Vue 3 notification library to use with Tailwind CSS.
https://github.com/devstack-be/devstack-notify
composition-api notifications nuxt tailwind tailwindcss toast typescript vue vuejs
Last synced: 4 days ago
JSON representation
A headless Vue 3 notification library to use with Tailwind CSS.
- Host: GitHub
- URL: https://github.com/devstack-be/devstack-notify
- Owner: devstack-be
- License: mit
- Created: 2024-05-04T20:07:41.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2026-03-06T21:40:34.000Z (about 1 month ago)
- Last Synced: 2026-03-07T01:23:40.135Z (about 1 month ago)
- Topics: composition-api, notifications, nuxt, tailwind, tailwindcss, toast, typescript, vue, vuejs
- Language: Vue
- Homepage:
- Size: 405 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
```
### Setup
This package requires Pinia. Install it and register both in your app:
```js
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import Notifications from 'devstack-notify'
import App from './App.vue'
const app = createApp(App)
app.use(createPinia())
app.use(Notifications())
app.mount('#app')
```
### Tailwind CSS 4 Configuration
⚠️ **Important**: Add this line to your main CSS file:
```css
/* src/app.css or src/index.css */
@import "tailwindcss";
@source "../../node_modules/devstack-notify";
```
See [TAILWIND.md](./TAILWIND.md) for more details.
## 🍞 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'
})
```
## TypeScript Support
All types are exported from the package:
```typescript
import type {
Notification,
NotificationAction,
NotificationColor,
Config
} from 'devstack-notify'
// Use types in your code
const notification: Partial = {
title: 'Hello',
color: 'blue',
timeout: 3000
}
toast.add(notification)
```
## 📚 Documentation
- **[Complete Examples](./EXAMPLES.md)** - Detailed usage examples and patterns
- **[Best Practices](./BEST-PRACTICES.md)** - Recommended patterns and guidelines
- **[Tailwind Configuration](./TAILWIND.md)** - Required Tailwind CSS setup
- **[Migration Guide](./MIGRATION.md)** - Upgrading from previous versions
- **[Changelog](./CHANGELOG.md)** - Version history and changes
## 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