+ PHPFlasher + works seamlessly with Livewire v3, bringing dynamic flash notifications to your reactive components. +
+ + ++ If you need to use PHP < v8.2 or Livewire < v3.0, use + PHPFlasher v1 instead. + It supports PHP ≥ v5.3 and earlier Livewire versions. + + Check out the v1 documentation here + . +
++ To use PHPFlasher with Livewire, follow the same installation steps as in the + Laravel Installation guide. +
+ + +composer require php-flasher/flasher-laravelAfter installing, run this command to set up the required assets:
+ +php artisan flasher:install+ PHPFlasher automatically integrates with Livewire. No additional configuration needed - flash notifications work instantly across component updates and page refreshes. +
+
+ Using PHPFlasher
+ in Livewire components is simple. Just call the flash()
+ helper function in your component methods.
+
Dispatch notifications from your Livewire components:
+ + +namespace App\Livewire;
+
+use Livewire\Component;
+
+class UserComponent extends Component
+{
+ public function save()
+ {
+ // Save user logic here...
+
+ // Show success notification
+ flash()->success('User saved successfully!');
+ }
+
+ public function render()
+ {
+ return view('livewire.user');
+ }
+}+ PHPFlasher automatically handles Livewire component updates and page refreshes. Notifications will display correctly even during partial page updates. +
+Here's a more complete example of a Livewire component with form handling and notifications:
+ + +namespace App\Livewire;
+
+use Livewire\Component;
+use App\Models\Contact;
+
+class ContactForm extends Component
+{
+ public $name = '';
+ public $email = '';
+ public $message = '';
+
+ protected $rules = [
+ 'name' => 'required|min:3',
+ 'email' => 'required|email',
+ 'message' => 'required|min:10',
+ ];
+
+ public function submit()
+ {
+ $this->validate();
+
+ try {
+ Contact::create([
+ 'name' => $this->name,
+ 'email' => $this->email,
+ 'message' => $this->message,
+ ]);
+
+ // Success notification
+ flash()->success('Your message has been sent!', 'Thank you');
+
+ // Reset form
+ $this->reset(['name', 'email', 'message']);
+
+ } catch (\Exception $e) {
+ // Error notification
+ flash()->error('There was a problem sending your message.');
+ }
+ }
+
+ public function render()
+ {
+ return view('livewire.contact-form');
+ }
+}Here's the corresponding Blade view for the component:
+ +<div>
+ <form wire:submit.prevent="submit" class="space-y-4">
+ <div>
+ <label for="name" class="block text-sm font-medium text-gray-700">Name</label>
+ <input type="text" id="name" wire:model="name"
+ class="mt-1 block w-full rounded-md border-gray-300 shadow-sm">
+ @error('name') <span class="text-red-500 text-xs">{{ $message }}</span> @enderror
+ </div>
+
+ <div>
+ <label for="email" class="block text-sm font-medium text-gray-700">Email</label>
+ <input type="email" id="email" wire:model="email"
+ class="mt-1 block w-full rounded-md border-gray-300 shadow-sm">
+ @error('email') <span class="text-red-500 text-xs">{{ $message }}</span> @enderror
+ </div>
+
+ <div>
+ <label for="message" class="block text-sm font-medium text-gray-700">Message</label>
+ <textarea id="message" wire:model="message" rows="4"
+ class="mt-1 block w-full rounded-md border-gray-300 shadow-sm"></textarea>
+ @error('message') <span class="text-red-500 text-xs">{{ $message }}</span> @enderror
+ </div>
+
+ <div>
+ <button type="submit" class="inline-flex justify-center py-2 px-4 border border-transparent
+ shadow-sm text-sm font-medium rounded-md text-white bg-purple-600 hover:bg-purple-700
+ focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500">
+ <div wire:loading wire:target="submit" class="mr-2">
+ <svg class="animate-spin h-4 w-4 text-white" fill="none" viewBox="0 0 24 24">
+ <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+ <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
+ </svg>
+ </div>
+ Send Message
+ </button>
+ </div>
+ </form>
+</div>You can use all the standard notification types in your Livewire components:
+ + +flash()->success('Record updated successfully!')
+flash()->error('An error occurred while saving.')
+flash()->warning('Unsaved changes will be lost.')
+flash()->info('Your session will expire in 5 minutes.')
++ PHPFlasher integrates with Livewire's event system, allowing you to listen for notification events in your components. + This is particularly useful for interactive notifications like SweetAlert confirmations. +
+ +
+ For SweetAlert, you can listen to sweetalert:confirmed,
+ sweetalert:denied, and
+ sweetalert:dismissed events within your component.
+
namespace App\Livewire;
+
+use Livewire\Attributes\On;
+use Livewire\Component;
+
+class UserComponent extends Component
+{
+ public function render()
+ {
+ return <<<'HTML'
+
+
+
+ HTML;
+ }
+
+ public function deleteUser()
+ {
+ sweetalert()
+ ->showDenyButton()
+ ->info('Are you sure you want to delete the user?');
+ }
+
+ #[On('sweetalert:confirmed')]
+ public function onConfirmed(array $payload): void
+ {
+ // Delete the user here
+
+ flash()->info('User successfully deleted.');
+ }
+
+ #[On('sweetalert:denied')]
+ public function onDeny(array $payload): void
+ {
+ flash()->info('Deletion cancelled.');
+ }
+}Each listener method accepts an array $payload parameter, which contains:
public function sweetalertConfirmed(array $payload)
+{
+ // Access the payload data
+ $promise = $payload['promise'];
+ $envelope = $payload['envelope'];
+
+ // $promise - Contains the resolved promise data from SweetAlert
+ // $envelope - Contains the notification where the event happened
+
+ // You can use this data for further processing
+ $userId = $envelope->getOption('userId'); // If you had set this option
+}
+ With Livewire 3, use the new #[On('event')] attribute syntax
+ for cleaner event handling. This makes your code more readable and follows modern PHP practices.
+
Here's a more complete example showing how to implement CRUD operations with confirmations:
+ +namespace App\Livewire;
+
+use App\Models\Task;
+use Livewire\Attributes\On;
+use Livewire\Component;
+
+class TasksComponent extends Component
+{
+ public $tasks = [];
+ public $taskToDelete = null;
+
+ public $title = '';
+ public $description = '';
+
+ protected $rules = [
+ 'title' => 'required|min:3',
+ 'description' => 'required',
+ ];
+
+ public function mount()
+ {
+ $this->tasks = Task::latest()->get();
+ }
+
+ public function saveTask()
+ {
+ $this->validate();
+
+ Task::create([
+ 'title' => $this->title,
+ 'description' => $this->description,
+ ]);
+
+ $this->reset(['title', 'description']);
+ $this->tasks = Task::latest()->get();
+
+ flash()->success('Task created successfully!');
+ }
+
+ public function confirmDelete($taskId)
+ {
+ $this->taskToDelete = $taskId;
+
+ sweetalert()
+ ->showDenyButton()
+ ->option('confirmButtonText', 'Yes, delete it!')
+ ->option('denyButtonText', 'Cancel')
+ ->option('taskId', $taskId) // Store taskId in the options
+ ->warning('Are you sure you want to delete this task?', 'Confirm Deletion');
+ }
+
+ #[On('sweetalert:confirmed')]
+ public function deleteTask(array $payload)
+ {
+ $task = Task::find($this->taskToDelete);
+
+ if ($task) {
+ $task->delete();
+ $this->tasks = Task::latest()->get();
+ flash()->success('Task deleted successfully!');
+ } else {
+ flash()->error('Task not found.');
+ }
+
+ $this->taskToDelete = null;
+ }
+
+ #[On('sweetalert:denied')]
+ public function cancelDelete()
+ {
+ $this->taskToDelete = null;
+ flash()->info('Task deletion cancelled.');
+ }
+
+ public function render()
+ {
+ return view('livewire.tasks', [
+ 'tasks' => $this->tasks
+ ]);
+ }
+}wire:ignore on notification container elements if you're manually placing them
+ + PHPFlasher works seamlessly with Livewire's SPA (Single Page Application) mode, ensuring notifications are displayed correctly + during page transitions without reloading. +
+ +<a href="{{ route('dashboard') }}" wire:navigate>Dashboard</a>
+
+<!-- In your component -->
+<script>
+// PHPFlasher's notifications will persist during SPA navigation
+Livewire.hook('commit', ({ component }) => {
+ // Any custom code that needs to run after component updates
+ // PHPFlasher will automatically handle the notifications
+});
+</script>+ You can create complex interaction flows by chaining notifications with events: +
+ +namespace App\Livewire;
+
+use Livewire\Attributes\On;
+use Livewire\Component;
+
+class PublishArticle extends Component
+{
+ public $article;
+
+ public function confirmPublish()
+ {
+ sweetalert()
+ ->option('title', 'Publish article?')
+ ->option('text', 'This will make the article visible to all users')
+ ->option('icon', 'question')
+ ->option('showCancelButton', true)
+ ->option('confirmButtonText', 'Yes, publish it!')
+ ->option('cancelButtonText', 'Not yet')
+ ->fire();
+ }
+
+ #[On('sweetalert:confirmed')]
+ public function publishArticle()
+ {
+ // Publish the article
+ $this->article->published = true;
+ $this->article->save();
+
+ // First notification
+ flash()->success('Article published successfully!');
+
+ // Second notification (after a delay)
+ sweetalert()
+ ->timer(3000)
+ ->option('title', 'Would you like to share it?')
+ ->option('showCancelButton', true)
+ ->option('confirmButtonText', 'Yes, share it!')
+ ->option('cancelButtonText', 'No thanks')
+ ->option('actionType', 'share') // Custom option to identify action
+ ->fire();
+ }
+
+ #[On('sweetalert:confirmed')]
+ public function handleConfirmation(array $payload)
+ {
+ $envelope = $payload['envelope'];
+ $actionType = $envelope->getOption('actionType');
+
+ if ($actionType === 'share') {
+ // Show sharing UI
+ $this->dispatch('show-share-modal', articleId: $this->article->id);
+ }
+ }
+
+ public function render()
+ {
+ return view('livewire.publish-article');
+ }
+}+ PHPFlasher works with other popular Livewire plugins and Laravel features. +
+ + ++ PHPFlasher works perfectly with Alpine.js directives in your Livewire components. +
+<div x-data="{ show: false }">
+ <button x-on:click="show = true; $wire.showToast()">
+ Show Toast
+ </button>
+</div>+ Mix Blade directives with Livewire and PHPFlasher notifications. +
+@if (session('status'))
+ <script>
+ document.addEventListener('livewire:initialized', () => {
+ flasher.success('{{ session('status') }}');
+ });
+ </script>
+@endifStart using PHPFlasher today and + give your users beautiful notifications in minutes!
+