Building a Realtime Chat App with Vue.js and Laravel

New tutorial series, which consists of five main steps, all explained through videos. The goal is a real time chat application in a project made with Vue.js, Laravel 5.4 and Laravel Dusk. Each step consists of a video and the code for it.

Step 1: In the first video of the series, the development version of Laravel is installed, and the new Laravel Mix is up and running, with rendering and Vue component example.

Code for Step 1

Step 2 Video: Vue Components

Start developing several Vue Components to create an interactive chat application.

Code for Step 2

Step 3 Video: Laravel Backend

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

Code for Step 3

Step 4 Video: Laravel Echo

Chat app is connected to the server, but a refresh is required 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.

Code for Step 4 Event Broadcasting docs Pusher

Step 5 Video: Laravel Dusk

Testing the realtime chat application. Installation of Laravel Dusk, example tests, and the benefits of this sort of testing environment.

Final Code Laravel Dusk docs

See the code for this tutorial on Github, by Josh Larson.