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.
- Easy integration with Alpine JS
- Customizable notification content
- Permission checking
- 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.
<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>yarn add -D alpinejs-desktop-notify
npm install -D alpinejs-desktop-notifyimport Alpine from 'alpinejs'
import notifications from 'alpinejs-desktop-notify'
Alpine.plugin(notifications)
Alpine.start()<button
x-data
@click="$notify({ title: 'New message', body: 'Hello there 👋' })"
>
Notify
</button><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.