Real-Time Chat with Laravel, Vue.js & Pusher

In this video I build a real-time chat application using:

Laravel (Backend PHP Framework)
Laravel Sanctum (Authentication Package)
Jetstream Inertia (Front/Back end user authentication scaffolding)
Pusher (Real-time web-socket connects)

[ttncmok]

At 1:03:20 you say " we didn't set that up yet, I'm gonna go back into the event file and set that up momentarily". However, we don't see you this in the video. I think you might have missed this part out in the recording and it maybe the cause of the issues I am having. Would greatly appreciate if you could look into this when you get the chance.

[josuebarros-desenvolvedorw]

Laravel with Vue is a beast!! Thanks for the awesome tutorial!

[GeorgeBrotherston]

Excellent tutorial, thank you! This really provides the overall connectivity of all the parts as well as the “behind the scenes reasons why it may be a “best practice”. I’ll use a few different pieces (eg self hosted web sockets, Inertia-recommended “manual visit shortcuts” and associated Inertia “returns/renders” for Laravel controllers), but without the benefit of your tutorial this would have been weeks to implement and possibly without the proper understanding of the whats and whys. I’ll skim through one more time and then watch again in detail while I follow along as I implement this in my environment. Thank you again!

[jaygrayson]

Amazing! I found this video when I started giving up on getting Laravel Echo to work with Pusher on Laravel 10, Vue 3 and Pusher. Nothing I was doing was working correctly and all of the examples that I had found were older Laravel, older Vue and older Pusher. While this video is using old versions as well, I was able to incorporate this into the newer versions and it finally worked! Thank you for the great explanations! This was one of the first videos that I have watched that I didn't have to multiply the speed also. :)

[jimburns]

Excellent work! Thank you. Suggestion: show finished work at the beginning to provide viewers a visual understanding of what you are building toward.

[lozobojan]

Wow! What a great video. Explanations as they should be, not too long, not too short and the perfect video pace.

[asifm]

Pretty amazing explanation. After Laracast I found your tutorial as best resource. Keep doing your best.

[rafaelmaghari]

Thank you for this tut! This is the most updated video related to vuejs, laravel pusher + chat.
I just encountered two problems while following your tutorial.

1. add broadcastAs in NewChatMessage Event
public function broadcastAs() {
return 'message.new';
}

2. Don't forget to implement the ShouldBroadcast in NewMessageEvent.


Appreciate you man! New subscriber here :)

[tahzidmahmud]

you are awesome man ...one of the best contents i have ever seen on laravel...keep them coming

[bytebandit_x]

thanks for the tutorial it was a huge help,
the best chat tutorial with laravel, vue and pusher on youtube

[toyly]

It is great, I watched it from start to end and stayed satisfied. Thank you.

[Soulaimaneyh]

If you face a problem in live chat: 1:03:20 put the event name inside .listen ("NewChatMessage")

[gluckgamer]

Awesome video and explanation. Thank you! <3

[elmomahupil]

THANKYOU VERY MUCH. PLEASE CONTINUE DOING MORE VIDEOS LIKE THIS. IT REALLY MEANS A LOT <3

[adante]

Just found your Channel, subbed. Great content 👍 Are you going to be doing any more Vue Laravel in the near future?

[pwhak]

It's nice to see someone using MAMP for Laravel development. Have you come across any issues with choosing MAMP over Docker or Homestead?

[vmsurjf]

Wow, spaces before and after function arguments

[samuelpradhan]

Thanks for this wonderful tutorial 😊😊😊

[davidescobedo]

Hello there. I developed my chat using your tutorial, but my vue is in different folder than my laravel. Can you explain how to configure vue in the correct way? Thanks a lot for this video.

[badralwattar]

in minute 12:04, why didn't you use belongsTo instead of hasOne ?