Real-Time Notifications with Laravel Reverb, Vue 3, and Inertia 3.x: A 2026 Production Guide

Real-time interactivity is no longer a luxury feature. Modern users expect instant feedback without manual refreshes. Laravel Reverb has simplified this process by providing a first-party WebSocket server built for the php web framework.

When paired with Vue 3 and Inertia 3.x, you can build applications that feel as snappy as native mobile apps. This guide covers the full stack implementation for production environments in 2026.

Reverb: The Infrastructure Layer

Laravel Reverb handles thousands of simultaneous connections with minimal memory overhead. It replaces the need for third-party services or complex Node.js socket servers.

Initial Installation

Start by pulling in the broadcasting capabilities. Run the standard artisan command to scaffold your environment:

php artisan install:broadcasting

This command installs the Reverb package. It also creates the config/reverb.php file and adds the necessary environment variables to your .env file. Choose reverb when prompted for the driver.

Environment Configuration

Your production .env requires specific keys for the handshake to succeed. Define your host and ports clearly:

BROADCAST_CONNECTION=reverb

REVERB_APP_ID=123456
REVERB_APP_KEY=reverb-key
REVERB_APP_SECRET=reverb-secret
REVERB_HOST="sockets.yourdomain.com"
REVERB_PORT=443
REVERB_SCHEME=https

VITE_REVERB_APP_KEY="${REVERB_APP_KEY}"
VITE_REVERB_HOST="${REVERB_HOST}"
VITE_REVERB_PORT="${REVERB_PORT}"
VITE_REVERB_SCHEME="${REVERB_SCHEME}"

Using the VITE_ prefix allows your frontend to access these values during the build process.

Frontend: Connecting Echo

Inertia 3.x apps initialize the frontend once. You should bootstrap Laravel Echo in your main entry point, typically app.js.

The Echo Bootstrap

Create a dedicated echo.js file to keep your configuration clean. Use the pusher-js library as Reverb maintains protocol compatibility.

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

window.Pusher = Pusher;

window.Echo = new Echo({
    broadcaster: 'reverb',
    key: import.meta.env.VITE_REVERB_APP_KEY,
    wsHost: import.meta.env.VITE_REVERB_HOST,
    wsPort: import.meta.env.VITE_REVERB_PORT ?? 80,
    wssPort: import.meta.env.VITE_REVERB_PORT ?? 443,
    forceTLS: (import.meta.env.VITE_REVERB_SCHEME ?? 'https') === 'https',
    enabledTransports: ['ws', 'wss'],
});

Import this file at the top of your app.js. Now, every Vue component in your Inertia application can access window.Echo.

Listening: Private Channels in Vue

Notifications usually contain sensitive data. Always use private channels for user-specific updates.

The Component Lifecycle

In Vue 3, use the onMounted hook to start listening. Use onUnmounted to stop. This prevents memory leaks and duplicate listeners.

<script setup>
import { onMounted, onUnmounted } from 'vue';
import { usePage, router } from '@inertiajs/vue3';

const page = usePage();

onMounted(() => {
    window.Echo.private(`App.Models.User.${page.props.auth.user.id}`)
        .notification((notification) => {
            console.log('New notification received:', notification);
            refreshData();
        });
});

function refreshData() {
    router.reload({ 
        only: ['notifications', 'unreadCount'],
        preserveScroll: true 
    });
}

onUnmounted(() => {
    window.Echo.leave(`App.Models.User.${page.props.auth.user.id}`);
});
</script>

The router.reload method with the only key is critical. It fetches updated data for specific props without a full page reload.

Inertia 3.x: Background Mutations

Inertia 3.x introduced the useHttp hook. It allows you to perform mutations that update the server state without a standard Inertia visit.

Silent Updates

When a notification arrives, you might want to mark it as read immediately in the background. The useHttp hook handles this cleanly.

import { useHttp } from '@inertiajs/vue3';

const { post } = useHttp();

const markAsRead = (id) => {
    post(`/notifications/${id}/read`, {
        onSuccess: () => {
            // Update local state or trigger a partial reload
        }
    });
};

This ensures the user experience remains fluid. The UI stays responsive while the mvc framework php backend processes the logic.

Production: Scaling and Security

Moving from local development to production requires a shift in how you handle connections. Reverb is high-performance, but it needs proper surroundings.

TLS Termination

Never expose Reverb's internal port directly to the internet. Use a reverse proxy like Nginx to terminate TLS.

Nginx receives the wss:// request on port 443. It then proxies it to Reverb listening on port 8080 internally. This centralizes your SSL management.

Horizontal Scaling

For high-traffic apps, you may need multiple Reverb servers. Use the Redis pub/sub adapter to synchronize events across nodes.

When one server receives a broadcast, it publishes to Redis. All other servers subscribe and push that message to their connected clients. This creates a unified real-time network.

Performance Wins

• ShouldBroadcastNow: Use this interface for time-sensitive alerts. It skips the queue and delivers the payload instantly.
• Leading Dot Convention: When listening for events in Echo, prefix the class name with a dot (e.g., .OrderProcessed) if you aren't using the default namespace.
• Redis Horizon: Use Laravel Horizon to monitor the broadcast queues. Stalled queues mean delayed notifications.

Conclusion: Shipping the Experience

Laravel Reverb removes the friction of building real-time apps. The combination of Inertia 3.x and Vue 3 provides a robust toolkit for modern php developer tools.

Stick to private channels for security. Use router.reload for efficient updates. Clean up your listeners in the component lifecycle. These patterns ensure your application stays fast and reliable as it scales.

We'd love to hear how you're using Reverb in your current projects.