Alpine JS Desktop Notifications

Create desktop notifications with Alpine JS 📣

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/[email protected]/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: 'Can you get me a mayo chicken?' })"
>
  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.

Stats