Stop Refreshing! Laravel Echo Hooks for React and Vue

Prerequisites

To follow this guide, you should have a baseline understanding of

and

JavaScript

. Familiarity with the

Inertia.js

stack is helpful, as the hooks are designed to work seamlessly within that ecosystem. You will need a local development environment capable of running

Laravel

11+ and

Node.js

.

Key Libraries & Tools

• Laravel Reverb: A first-party, high-performance
  WebSocket
  server for Laravel applications.
• Laravel Echo: The JavaScript library that makes it painless to subscribe to channels and listen for events.
• echo-react / echo-vue: Specialized packages containing the new hooks (like useEcho and useEchoModel) for modern frontend frameworks.
• Laravel Idea: A
  PhpStorm
  plugin that accelerates development through advanced code generation.

Code Walkthrough

Setting up real-time features starts with the server-side configuration. Use the artisan command to pull in the necessary broadcasting scaffolding:

php artisan install:broadcasting

When prompted, select Reverb as the driver. This command installs the backend dependencies and the frontend packages, including echo-react or echo-vue.

Listening for Events

In a

component, you can now use the useEcho hook to subscribe to a private channel and react to a specific event. This replaces the old window.Echo.private().listen() syntax with a more declarative pattern:

useEcho('orders', (echo) => {
    echo.private().listen('OrderStatusUpdated', (event) => {
        console.log('Order Update:', event.order);
        setOrder(event.order);
    });
});

Synchronizing Models

The useEchoModel hook is even more specialized. It listens for standard

model events like updates or deletions. To use this, your

Laravel

model must implement the BroadcastsEvents trait and define a broadcastOn method:

namespace App\Models;

use Illuminate\Database\Eloquent\BroadcastsEvents;

class User extends Authenticatable
{
    use BroadcastsEvents;

    public function broadcastOn($event)
    {
        return [new PrivateChannel('App.Models.User.' . $this->id)];
    }
}

On the frontend, the hook tracks the specific model instance:

useEchoModel('App.Models.User', userId, {
    updated: (event) => setUser(event.model),
});

Syntax Notes

When using

, you should define interfaces for your event payloads. This ensures that when you access event.order or event.model, your IDE provides full auto-completion. Notice the naming convention for private channels;

Laravel

often expects a dot-notated string (e.g., App.Models.User) which must match exactly between the channels.php routes and the frontend hook call.

Practical Examples

• Live Notifications: Displaying a toast message when a user receives a new message without requiring a page poll.
• Order Tracking: Updating a progress bar or status badge on a dashboard as a package moves through shipping stages.
• Presence Indicators: Showing which team members are currently active on a shared document.

Tips & Gotchas

Always remember that private channels require authorization. If you see a 403 Forbidden error in your browser console, check routes/channels.php. You must define the authorization logic for every private channel. Additionally, ensure your queue worker is running (php artisan queue:work), as broadcasting events are dispatched to the queue by default to maintain application performance.