Alpine JS Desktop Notifications Plugin

This plugin extends Alpine JS to enable desktop notifications in your web applications. With a simple API, you can create native browser notifications to enhance user experience and engagement.

Features

• Easy integration with Alpine JS
• Customizable notification content
• Permission checking

Use Cases

• Alert users of important events even when they're in another tab
• Notify users when background tasks complete
• Create reminder systems for web applications
• Enhance chat applications with new message notifications

The plugin provides a straightforward way to leverage the Web Notifications API within the Alpine JS framework, making it easy to implement desktop notifications without complex JavaScript.

Install

With a CDN

<script
  defer
  src="https://unpkg.com/alpinejs-desktop-notify@latest/dist/notifications.min.js"
></script>

<script defer src="https://unpkg.com/alpinejs@latest/dist/cdn.min.js"></script>

With a Package Manager

yarn add -D alpinejs-desktop-notify

npm install -D alpinejs-desktop-notify

import Alpine from 'alpinejs'
import notifications from 'alpinejs-desktop-notify'

Alpine.plugin(notifications)

Alpine.start()

Example

Static Notification

<button
  x-data
  @click="$notify({ title: 'New message', body: 'Hello there 👋' })"
>
  Notify
</button>

Dynamic Notification

<div x-data="{ title: '', body: '' }">
  <input type="text" x-model="title" />

  <textarea x-model="body"></textarea>

  <button @click="$notify({ title, body })"> Notify </button>
</div>

You can also pass icon in the object.