Devstack Notify - Vue 3 & Tailwind CSS

Headless Vue 3 notification library with Tailwind CSS.

Inspired by NuxtUI Notifications

🌟 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

yarn add devstack-notify

or

npm i devstack-notify

Setup

This package requires Pinia. Install it and register both in your app:

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:

/* src/app.css or src/index.css */
@import "tailwindcss";

@source "../../node_modules/devstack-notify";

See TAILWIND.md for more details.

🍞 How to use

Add the "StackNotifications" components to your main layout or in App.vue:

<StackNotifications />

Then, trigger notifications from your .vue files:

Composition API

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:

import type { 
  Notification, 
  NotificationAction, 
  NotificationColor,
  Config 
} from 'devstack-notify'

// Use types in your code
const notification: Partial<Notification> = {
  title: 'Hello',
  color: 'blue',
  timeout: 3000
}

toast.add(notification)

📚 Documentation

• Complete Examples - Detailed usage examples and patterns
• Best Practices - Recommended patterns and guidelines
• Tailwind Configuration - Required Tailwind CSS setup
• Migration Guide - Upgrading from previous versions
• Changelog - 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