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

$3

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


`

$3

`shell
yarn add -D alpinejs-desktop-notify

npm install -D alpinejs-desktop-notify
`

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

Alpine.plugin(notifications)

Alpine.start()
`

Example

$3

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

`

$3

`html



`

_You can also pass icon` in the object._