Building Realtime Web Apps with Laravel, Vue 3 and Reverb

Building Realtime Web Apps with Laravel, Vue 3 and Reverb

Introduction

Using the power of Laravel Reverb, let’s build a real-time post-timeline application with Laravel 11, VueJS 3, Sanctum, and Reverb,  pulling in Pinia for state management.

What you'll learn in this Course:

  • Learn how to build realtime applications with Laravel (with Sanctum, Reverb) and Vue 3 (SPA)
  • Learn how to configure Laravel Sanctum (along with Fortify) to serve a Frontend SPA
  • Learn how to setup broadcasting in Laravel and listen for events in our Vue 3 app using Echo
  • Learn how to configure and implement private broadcasting in an API/SPA environment
  • Learn how to implement an infinite scrolling behaviour in a Vue 3 app
  • We'll also learn how to implement login (which is session based implemented with Sanctum)
  • Learn State management with Pinia

Prerequisites:

  • Beginner level knowledge of PHP/Laravel is Required
  • Beginner level knowledge of VueJS 3 is Required

Who is this Course for:

  • Laravel Developers who want to Build Realtime web applications using Vue 3 and Reverb
  • VueJS Developers who want to learn how to integrate Laravel with Reverb to build Real-Time Applications

Projects Roadmap and Status:

[Uploaded] A Guide to Setup Laravel with Vue 3 and Reverb
[Uploaded] Let's Build a Realtime Post Timeline Project

Project Description:

[Uploaded] A Guide to Setup Laravel with Vue 3 and Reverb

In this section, we'll look into the basics of Laravel and Vue, by setting up both projects.

Some of the topics we'll cover in this section include:

  • Learn how to set up Laravel Sanctum to serve an SPA.

  • Look into the basics of broadcasting in Laravel and our frontend Vue 3 app.

  • We'll also configure private broadcasting in our front-end app.

  • Learn how to use composable in Vue 3

  • Learn how to implement authentication features like login flow, and grab the user data on reload.

[Uploaded] Let's Build a Realtime Post Timeline Project

In this section, we'll build a real-time post timeline project, where the users can create posts, view all the posts, and like the posts, all of these interactions will be real-time, and we'll also implement an infinite scrolling feature.

Some of the topics we'll cover in this section include:

  • Learn how to create posts and broadcast that event to show the created post in real-time.

  • Learn how to display server-driven validation errors.

  • We'll learn how to implement an infinite scrolling feature in Vue 3 with the API served by Laravel.

  • We'll learn how to manage the state of our app using Pinia

  • Learn how to like the posts and broadcast the Liked event to implement real-time functionality

  • Learn how to Edit the posts and implement real-time editing functionality

  • And many more topics.

Course Summary:

  • Building real-time applications with Laravel (with Sanctum, Reverb) and Vue 3 (SPA)

  • Configuring Laravel Sanctum (along with Fortify) to serve a Frontend SPA

  • Setting up  broadcasting in Laravel and listening for events in our Vue 3 app using Laravel Echo

  • Configuring and implementing private broadcasting in an API/SPA environment

  • Using the Intersection Observer API to load the next chunk of posts automatically when the user scrolls to the bottom of the timeline

  • Learn database seeding techniques in Laravel

  • Learn how to use API Resources in Laravel

  • Learn how to listen for Broadcasted events from the backend and react to them accordingly in the frontend

  • All of this state will be managed on the client side, using Pinia

By the end of this course, you will have built a feature-rich, real-time timeline application that showcases your understanding of front-end and back-end technologies, perfect for any aspiring developer looking to enhance their skills in dynamic web application development.

Building Realtime Web Apps with Laravel, Vue 3 and Reverb