How to Set Up Reverb in Laravel 11 and Vue

Reverb is a real-time broadcasting and WebSockets solution introduced in Laravel 11. It is an alternative to Pusher, making it easier to handle real-time events like comments, notifications, and chat in a Laravel + Vue.js blog.

In this guide, we will:
✅ Install and configure Reverb in Laravel 11
✅ Use Vue.js to listen for real-time blog updates

Step 1: Install Laravel 11

If you haven’t already set up Laravel 11, install it using Composer:

composer create-project laravel/laravel blog-project

Navigate to your project folder:

cd blog-project

Step 2: Install Laravel Reverb

Run the following command to install Laravel Reverb:

php artisan reverb:install

This will create a config/reverb.php file for configuration.

Step 3: Configure Reverb

Open your .env file and update the Reverb settings:

REVERB_ENABLED=true
REVERB_HOST=127.0.0.1
REVERB_PORT=6001

Step 4: Start Reverb Server

Run the following command to start the Reverb WebSocket server:

php artisan reverb:start

By default, it runs on port 6001.

Step 5: Set Up Broadcasting in Laravel

1️⃣ In config/broadcasting.php, update the default driver:

'default' => env('BROADCAST_DRIVER', 'reverb'),

2️⃣ Open config/app.php and enable event broadcasting:

'providers' => [
    App\Providers\BroadcastServiceProvider::class,
],

3️⃣ Run the migration for the failed_jobs table:

php artisan queue:table
php artisan migrate

4️⃣ Create a new event for real-time blog updates:

php artisan make:event BlogUpdated

Modify the generated event file app/Events/BlogUpdated.php:

use Illuminate\Broadcasting\Channel;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;

class BlogUpdated implements ShouldBroadcast
{
    public function __construct(public $blog) {}

    public function broadcastOn()
    {
        return new Channel('blog-updates');
    }
}

Step 6: Broadcast Events from Laravel

Whenever a new blog post is created or updated, broadcast an event. Modify app/Http/Controllers/BlogController.php:

use App\Events\BlogUpdated;
use App\Models\Blog;
use Illuminate\Http\Request;

class BlogController extends Controller
{
    public function store(Request $request)
    {
        $blog = Blog::create($request->all());

        broadcast(new BlogUpdated($blog))->toOthers();

        return response()->json(['message' => 'Blog created successfully!']);
    }
}

Step 7: Set Up Vue.js to Listen for Events

1. Install Laravel Echo and Pusher

npm install laravel-echo pusher-js

2. Configure Echo in `resources/js/bootstrap.js`

Add the following code:

import Echo from "laravel-echo";
import Pusher from "pusher-js";

window.Echo = new Echo({
    broadcaster: "pusher",
    key: process.env.MIX_PUSHER_APP_KEY,
    wsHost: window.location.hostname,
    wsPort: 6001,
    disableStats: true,
    forceTLS: false,
});

3. Create a Vue Component to Listen for Updates

Create a new component BlogUpdates.vue:

<template>
    <div>
        <h2>Real-Time Blog Updates</h2>
        <ul>
            <li v-for="blog in blogs" :key="blog.id">{{ blog.title }}</li>
        </ul>
    </div>
</template>

<script>
export default {
    data() {
        return {
            blogs: [],
        };
    },
    mounted() {
        window.Echo.channel("blog-updates").listen("BlogUpdated", (event) => {
            this.blogs.push(event.blog);
        });
    },
};
</script>

4. Register the Component in `app.js`

Open resources/js/app.js and add:

import { createApp } from "vue";
import BlogUpdates from "./components/BlogUpdates.vue";

const app = createApp({});
app.component("blog-updates", BlogUpdates);
app.mount("#app");

5. Add the Component to `resources/views/welcome.blade.php`

<div id="app">
    <blog-updates></blog-updates>
</div>

<script src="{{ mix('js/app.js') }}"></script>

Step 8: Test the Real-Time Blog Updates

1️⃣ Run your Laravel development server:

php artisan serve

2️⃣ Start the Reverb WebSocket server:

php artisan reverb:start

3️⃣ Open your Vue.js front end and add a new blog post via Postman or your Laravel app. You should see the new blog post appear in real-time without refreshing.

Final Thoughts

🎯 Reverb in Laravel 11 makes it easy to add real-time functionality. By combining it with Vue.js, we can create live blog updates just like Medium or Dev.to.

Let me know if you need more help! 🚀

About The Author

Manoj Damor

See author's posts