Build a Realtime Chat App with Laravel 11, Vue 3 and Pinia

Learn how to build a realtime chat app with Laravel 11, Vue 3, Inertia and Reverb, using Pinia for state management

Build a Realtime Chat App with Laravel 11, Vue 3 and Pinia
Build a Realtime Chat App with Laravel 11, Vue 3 and Pinia

Build a Realtime Chat App with Laravel 11, Vue 3 and Pinia udemy course free download

Learn how to build a realtime chat app with Laravel 11, Vue 3, Inertia and Reverb, using Pinia for state management

Using the power of Laravel Reverb, let’s build a real-time multi-room chat application with Laravel 11 and VueJS with InertiaJS,  pulling in Pinia for state management.

We’ll cover:

  • Using the Intersection Observer API to load previous chat messages automatically when the user scrolls to the top of the chat interface

  • Learn how to Use presence channels to show online users for each room

  • Learn how to implement Client-to-client communication using Laravel Echo to show who’s typing and display the typing indicators accordingly

  • Learn how to use Flexbox tricks to keep messages scrolled into view as they roll in

  • Learn database seeding techniques in Laravel

  • Learn how to use API Resources in Laravel

  • Learn how to display better-formatted dates and times

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

  • We'll also learn how to listen for users leaving or joining events and add/remove them from the online user list

  • 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 chat 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.