Build a Realtime Chat App with Laravel 11, Vue 3 and Pinia
What you'll learn
- Learn how to Integrate Laravel with Reverb to build Real-Time Applications
- Learn how to display user typing events using Whisper and implement Client-to-Client communication
- Learn how to use presence channels to show online users for each room
- Learn how to use the Intersection Observer API to automatically load previous chat messages
- Learn State management with Pinia
- Learn how to use flexbox tricks to keep messages scrolled into view as they roll in
- Learn how to listen for Broadcasted events from the backend and react to them accordingly
- Learn how to listen for users leaving or joining events and add/remove them from the online user list
Requirements
- Beginner level knowledge of PHP/Laravel and VueJS is Required
Description
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.
Who this course is for:
- Laravel Developers who want to Build Realtime Applications using InertiaJS, Vue 3 and Reverb
Instructor
- 4.5 Instructor Rating
- 373 Reviews
- 3,423 Students
- 14 Courses
A Computer Engineer with a motive to gain and share knowledge with the World in the field of Programming and Development
I create video tutorials and content related to Laravel and its ecosystem. Along with youtube, I wanted to make more in-depth project-based courses, and hence, I chose this Platform.
It's time to have some fun and teach you some very interesting and useful stuff/techniques that I learn while building different kinds of Systems! There is so much going on out there in the web development world and I want to share them all - with you.