Building a Realtime Chat App with Laravel 5.4 and VueJS

With the announcement of Laravel Dusk, a browser automation and testing API tool, I noticed a cool chunk of demo code. It represents a realtime app that features user interacting using WebSockets:

This inspired me to build an app for which I could use that same exact snippet of code. It ended up involving quite a few steps, but Laravel made it easy!

See the code for this tutorial on Github

Step 1: Setup

In this video, I get the dev version of Laravel installed, get the new Laravel Mix up and running, and render and example Vue component.

Step 2: Vue Components

Now I can start developing several Vue Components to create an interactive chat application. None of the data is persisted to the server yet, but it looks real!

Step 3: Laravel Backend

Now I am POSTing chat messages to the server and start loading messages from the server. It’s basic Laravel models and routes in this video.

Step 4: Laravel Echo

I have a functional chat app connected to the server, but I have to refresh to see new messages from other people. This step involves setting up Event Broadcasting within Laravel and implementing Laravel Echo on the front end using Pusher.

Step 5: Laravel Dusk

I’m finally to the point where I’m ready to test my realtime chat application. I install Laravel Dusk, write a couple example tests, and talk about the benefits of this sort of testing environment.

That’s all that I have! Let me know if you have had similar experiences with Laravel and what sort of things you’ve done with Laravel Dusk.

  • poldixD

    Thank you very much for the tutorial!

  • Winarto Saputro

    Awesome tuts. Thank you very much

  • José Alejandro Realza

    Wow! A great tutorial for learn the new features from Laravel 5.4 and others plus

  • Dino Lukavackic

    Do more Laravel 5.4 stuff… You obviously have the knack for this.

  • questjone

    Hi there! Very nice and easy to follow tutorial. I’m watching video #3 now and would like to make you a question. How can I use the Laravel Auth with my own Login screen created in VueJS?

  • Awesome! Thank u very much! keep it up! and success! 😉

  • jimmy8646

    Very good tutorial!!