Skip to content

Conversation

@cz-lucas
Copy link

@cz-lucas cz-lucas commented Dec 4, 2025

Hi,

we are developing a new advanced search and predefined filters (See #17494), and we needed a way to show notifications from JS on the frontend. So we developed a solution to do that over livewire.

Issue: #18289

Usage:

Livewire.dispatch('showNotification', {
   type: 'success',
   title: 'Asset Saved',
   message: 'MacBook Pro added.',
   description: 'Tag: MBP-4418<br>Assigned to Jane Doe',
   icon: 'fas fa-laptop',
   html: true,
   tag: 'asset-create'
 });

 // Update same tagged notification later:
 Livewire.dispatch('showNotification', {
   type: 'info',
   message: 'Processing (70%)',
   tag: 'bulk-import'
 });

 // Dismiss all notifcations:
 Livewire.dispatch('dismissAllNotifications');

It supports:

  • Dispatching events with basic (type, message)
  • Extended payload (type, title, message, description, icon, html, confetti, auto, tag)
  • Replacing an existing alert by tag (so you can "update progress" style messages)
  • Optional legacy string-only usage

Livewire Notifications Component:

  • Added a new Notifications Livewire component (app/Livewire/Notifications.php) supporting dynamic notifications with extended payloads, tag-based replacement, and dismissals.
  • Updated the default layout to render the new Livewire notifications component instead of the legacy Blade include (resources/views/layouts/default.blade.php).

View Layer Refactor:

  • Created a new Blade view for the Livewire notifications component that renders both legacy session flashes and new dynamic alerts (resources/views/livewire/notifications.blade.php).
  • Added a partial for rendering individual live alerts with support for icons, titles, descriptions, and HTML content (resources/views/partials/live-alert.blade.php).
  • Introduced a reusable alert Blade component for consistent alert rendering (resources/views/components/alert.blade.php).

Testing:

  • Added some tests for the notifications component, covering dynamic alerts, tag replacement, dismissals, and legacy session flashes (tests/Feature/NotificationsComponentTest.php).

In #18264 @marcusmoore mentioned that we should move this in a separate PR.

@cz-lucas cz-lucas marked this pull request as ready for review December 4, 2025 09:14
@cz-lucas cz-lucas requested a review from snipe as a code owner December 4, 2025 09:14
Refactor notification handling to use custom alert components for better readability and maintainability.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant