https://github.com/markmead/alpinejs-desktop-notifications
Create desktop notifications with Alpine JS 📣
https://github.com/markmead/alpinejs-desktop-notifications
alpine-js alpinejs alpinejs-notification alpinejs-plugin desktop-notification javascript-desktop-notifications javascript-notification
Last synced: about 2 months ago
JSON representation
Create desktop notifications with Alpine JS 📣
- Host: GitHub
- URL: https://github.com/markmead/alpinejs-desktop-notifications
- Owner: markmead
- License: mit
- Created: 2023-10-02T13:18:48.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-03-06T19:53:52.000Z (3 months ago)
- Last Synced: 2025-03-24T20:12:35.710Z (2 months ago)
- Topics: alpine-js, alpinejs, alpinejs-notification, alpinejs-plugin, desktop-notification, javascript-desktop-notifications, javascript-notification
- Language: JavaScript
- Homepage: https://js.hyperui.dev/examples/alert-desktop-notifications
- Size: 19.5 KB
- Stars: 9
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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
```html
```
### With a Package Manager
```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
### Static Notification
```html
Notify
```
### Dynamic Notification
```html
Notify
```
_You can also pass `icon` in the object._