Home
Menu & Navigation
Headless Notification Component With Tailwind CSS

Headless Notification Component With Tailwind CSS

emmanuelsw Last Updated: 2 days ago

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:

Headless Notification Component With Tailwind CSS

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

Related Posts

Add Comment