Level 63
Can you show your code where you are listening to the events in the frontend ?
Have you configured correctly Echo in your app.js file ?
Aug 23, 2025
6
Level 1
Vue front end not changing when my reverb websocket events are hit.
Hi All.
I have a ShouldBroadcast event and I can see in my console browser window that my websocket event is picked up.
I can also see the event if I run php artisan reverb:start --debug
However my vue page does not seem to react to the events, I wonder if I am simply misunderstanding how to make a Vue component?
For reference websocket is setup as:
<?php
namespace App\Events;
use App\Models\Post;
use Illuminate\Broadcasting\Channel;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
use Illuminate\Queue\SerializesModels;
use Illuminate\Broadcasting\InteractsWithSockets;
class PostCreated implements ShouldBroadcast
{
use InteractsWithSockets, SerializesModels;
public $message;
public function __construct(string $message)
{
$this->message = $message;
}
// Broadcast on a public channel for all users
public function broadcastOn(): array
{
return [new Channel('posts')];
}
public function broadcastAs(): string
{
return 'PostCreated';
}
}
Called with:
use Illuminate\Support\Facades\Broadcast;
broadcast(new PostCreated($post));
I have also tried:
Broadcast::on('posts')
->as('PostCreated')
->with(['dummy'])
->send();
My vue page is simply:
<template>
<div>
<h1>Test</h1>
<p>Console window should have events</p>
</div>
</template>
<script setup lang="ts">
import { onMounted } from 'vue';
import { useEchoPublic } from '@laravel/echo-vue';
onMounted(() => {
useEchoPublic('posts', 'PostCreated', (e) => {
console.log('Event received:', e);
});
});
</script>
Level 1
HI Vincent, when I ran the reverb install commands it automatically put this in my app.ts:
import { configureEcho } from '@laravel/echo-vue';
configureEcho({
broadcaster: 'reverb',
});
Which I am sure is working as I can see the webhook events in my chrome network panel.
My Vue page is simply:
<template>
<div>
<h1>Test</h1>
<p>Console window should have events</p>
</div>
</template>
<script setup lang="ts">
import { onMounted } from 'vue';
import { useEchoPublic } from '@laravel/echo-vue';
onMounted(() => {
useEchoPublic('posts', 'PostCreated', (e) => {
console.log('Event received:', e);
});
useEchoPublic('posts', '.PostCreated', (e) => { // tried it this way too
console.log('Event received:', e);
});
});
</script>
1 like
Level 63
@bobsLearning I never used the @laravel/echo-vue package.
When I tried Reverb to see how it works (with Laravel 11 I think, I don't remember), I had this configuration in my local environment and it worked fine.
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'],
});
REVERB_APP_ID=my-app-id
REVERB_APP_KEY=my-app-key
REVERB_APP_SECRET=my-app-secret
REVERB_HOST=localhost
REVERB_PORT=8080
REVERB_SCHEME=http
1 like
Level 1
Hi @vincent15000, thank you so much, using a Echo object has done the trick here. I am not sure what my '@laravel/echo -vue' attempt was missing but I am glad to have a method that works!
1 like
Level 63
@bobsLearning Happy to help.
Please close the post if you have solved your problem ;).
Level 1
Thanks again so much, marking your post as the best reply but not sure how to close the post. :)
1 like
Please or to participate in this conversation.