A fully customizable headless notification component based on Vue 3 Composition API and Tailwind CSS.
How to use it:
1. Import the notification component and register it as a Vue plugin as follows:
import { createApp } from 'vue' import Notifications from 'notiwind' import App from './App.vue' createApp(App) .use(Notifications) .mount('#app')
2. Add the component to your app.
<NotificationGroup group="example"> <div class="fixed inset-0 flex items-start justify-end p-6 px-4 py-6 pointer-events-none" > <div class="w-full max-w-sm"> <Notification v-slot="{ notifications }" enter="transform ease-out duration-300 transition" enter-from="translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-4" enter-to="translate-y-0 opacity-100 sm:translate-x-0" leave="transition ease-in duration-500" leave-from="opacity-100" leave-to="opacity-0" move="transition duration-500" move-delay="delay-300" > <div class="flex w-full max-w-sm mx-auto mt-4 overflow-hidden bg-white rounded-lg shadow-md" v-for="notification in notifications" :key="notification.id" > <div class="flex items-center justify-center w-12 bg-green-500"> <svg class="w-6 h-6 text-white fill-current" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg"> <path d="M20 3.33331C10.8 3.33331 3.33337 10.8 3.33337 20C3.33337 29.2 10.8 36.6666 20 36.6666C29.2 36.6666 36.6667 29.2 36.6667 20C36.6667 10.8 29.2 3.33331 20 3.33331ZM16.6667 28.3333L8.33337 20L10.6834 17.65L16.6667 23.6166L29.3167 10.9666L31.6667 13.3333L16.6667 28.3333Z" /> </svg> </div> <div class="px-4 py-2 -mx-3"> <div class="mx-3"> <span class="font-semibold text-green-500">{{ notification.title }}</span> <p class="text-sm text-gray-600">{{ notification.text }}</p> </div> </div> </div> </Notification> </div> </div> </NotificationGroup>
3. Trigger the component.
this.$notify({ group: "example", title: "Example Notification", text: "Notification Message Here" }, 3000) // dismiss after 3 seconds
4. All default component props.
maxNotifications: { type: Number, default: 10, }, enter: { type: String, default: '' }, enterFrom: { type: String, default: '' }, enterTo: { type: String, default: '' }, leave: { type: String, default: '' }, leaveFrom: { type: String, default: '' }, leaveTo: { type: String, default: '' }, move: { type: String, default: '' }, moveDelay: { type: String, default: '' }
5. Available props for NotificationGroup
.
group: { type: String, default: '', }, position: { type: String, default: 'top', validator(value) { return ['top', 'bottom'].includes(value) }, },
Preview:
Changelog:
v2.0.0 (01/25/2023)
- Rewrite codebase with TypeScript
v1.2.5 (01/25/2022)
- Update dependencies
v1.2.4 (01/24/2022)
- Update dependencies
v1.2.4 (11/16/2021)
- Update dependencies
v1.2.3 (09/09/2021)
- Update dependencies
Download Details:
Author: emmanuelsw
Live Demo: https://notiwind-demo.netlify.app/
Download Link: https://github.com/emmanuelsw/notiwind/archive/refs/heads/main.zip
Official Website: https://github.com/emmanuelsw/notiwind
Install & Download:
# Yarn
$ yarn add notiwind
# NPM
$ npm i notiwind --save