Creating Responsive Component Networks with Laravel Livewire's #[On] Event System

Building interconnected components that communicate seamlessly is essential for modern web applications. Laravel Livewire provides a sophisticated event-driven architecture through its #[On] attribute and dispatch system, enabling components to interact without tight coupling.

The #[On] attribute replaces the traditional $listeners property, offering a cleaner approach to event handling. Components can listen for specific events and react accordingly, creating dynamic interfaces that respond to changes throughout your application.

use Livewire\Component;
use Livewire\Attributes\On;
 
class NotificationBell extends Component
{
    public $unreadCount = 0;
 
    #[On('notification-added')]
    public function incrementCount()
    {
        $this->unreadCount++;
    }
 
    public function render()
    {
        return view('livewire.notification-bell');
    }
}

Events are triggered using the dispatch method from any component within your application. This creates a publish-subscribe pattern where components remain independent while still coordinating their behavior.

class MessageSender extends Component
{
    public function sendAlert($message)
    {
        Notification::create(['message' => $message, 'user_id' => auth()->id()]);
 
        $this->dispatch('notification-added', message: $message);
    }
 
    public function render()
    {
        return view('livewire.message-sender');
    }
}

The system supports multiple event listeners per component and allows for dynamic event names based on component properties. You can also target specific components using the dispatch()->to() method for more precise communication.

#[On('user-{userId}-updated')]
public function refreshUserData($userData)
{
    $this->userData = $userData;
}

Consider implementing a project management dashboard where different components need to stay synchronized. The task board, progress tracker, and team notifications all require updates when project milestones change, but they operate independently of each other.

class ProjectDashboard extends Component
{
    public $activeProjects = [];
    public $completedTasks = 0;
    public $teamAlerts = [];
 
    #[On('task-completed')]
    public function updateProgress($taskData)
    {
        $this->completedTasks++;
        $this->teamAlerts[] = "Task '{$taskData['title']}' completed by {$taskData['assignee']}";
    }
 
    #[On('project-milestone-reached')]
    public function addMilestoneAlert($projectId, $milestone)
    {
        $project = Project::find($projectId);
        $this->teamAlerts[] = "🎉 {$project->name} reached: {$milestone}";
 
        $this->dispatch('send-team-email',
            subject: "Milestone Achievement",
            project: $project->name,
            milestone: $milestone
        );
    }
 
    #[On('new-project-added')]
    public function refreshProjectList()
    {
        $this->activeProjects = Project::where('status', 'active')->get();
    }
 
    public function render()
    {
        return view('livewire.project-dashboard');
    }
}

This dashboard component demonstrates how multiple event types can be handled within a single component. When tasks are completed, milestones are reached, or new projects are added, the dashboard automatically updates its display and can trigger additional actions like sending team notifications.

The event system integrates seamlessly with Laravel Echo for real-time broadcasting, JavaScript event listeners, and Alpine.js components. Events can be dispatched from the server-side PHP code, client-side JavaScript, or directly from Blade templates using the $dispatch helper.