JS Code Review

@RemiM Yes, you understood my goal correctly. The toastr theme I use belongs to, but I will investigate your alternative offer. Do you have any suggestions as an alternative?

@onurzdgn For the suggestions, you can have a look here. Of course, make sure the library you pick works with Alpine and Livewire. As long as it's using vanilla JS, you should be good to go.

As for your main concern, you can leverage Livewire Events to achieve what you're looking for.

In summary, within your component, you would define your save() method and use the dispatch function to trigger the desired event:

The Livewire component:

<?php

namespace App\Livewire;

use Livewire\Component;
use App\Models\Post;
use Livewire\Attributes\Rule;

class CreatePost extends Component
{
    #[Rule('required|min:5')]
    public string $title = '';

    #[Rule('required|min:10')]
    public string $content = '';

    public function save()
    {
        $validated = $this->validate();

        try {
            Post::create($validated);
            $this->dispatch('post-created', message: 'Post created successfully!');
            $this->reset();
        } catch (\Exception $e) {
            $this->dispatch('post-error', message: 'Failed to create post: ' . $e->getMessage());
        }
    }

    public function render()
    {
        return view('livewire.create-post');
    }
}

The Blade file:

<div x-data>
    <form wire:submit="save">
        <div>
            <label for="title">Title</label>
            <input type="text" id="title" wire:model="title">
            @error('title') <span>{{ $message }}</span> @enderror
        </div>
        
        <div>
            <label for="content">Content</label>
            <textarea id="content" wire:model="content"></textarea>
            @error('content') <span>{{ $message }}</span> @enderror
        </div>
        
        <button type="submit">Create Post</button>
    </form>

    <!-- Notification Listener -->
    <div x-on:post-created.window="toastr.success($event.detail.message)"
         x-on:post-error.window="toastr.error($event.detail.message)">
    </div>
</div>