Build A Realtime Chat App With Laravel 11, Vue 3 And Pinia
Build A Realtime Chat App With Laravel 11, Vue 3 And Pinia
Published 9/2024
MP4 | Video: h264, 1920x1080 | Audio: AAC, 44.1 KHz
Language: English | Size: 460.06 MB | Duration: 0h 49m
Learn how to build a realtime chat app with Laravel with Reverb, Vue and Inertia, pulling in Pinia for state management
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 interfaceLearn how to Use presence channels to show online users for each roomLearn how to implement Client-to-client communication using Laravel Echo to show who's typing and display the typing indicators accordinglyLearn how to use Flexbox tricks to keep messages scrolled into view as they roll inLearn database seeding techniques in LaravelLearn how to use API Resources in LaravelLearn how to display better-formatted dates and timesLearn how to listen for Broadcasted events from the backend and react to them accordinglyWe'll also learn how to listen for users leaving or joining events and add/remove them from the online user listAll of this state will be managed on the client side, using PiniaBy 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.
Overview
Section 1: Introduction
Lecture 1 Installing Laravel
Lecture 2 Scaffolding Chat Rooms
Lecture 3 Let's work on the Chat UI
Lecture 4 Building the Chat TextArea
Lecture 5 Seeding Fake Messages in Order
Lecture 6 Creating a Pinia Store
Lecture 7 Creating the Messages Endpoint
Laravel Developers who want to Build Realtime Applications using InertiaJS, Vue 3 and Reverb
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 interfaceLearn how to Use presence channels to show online users for each roomLearn how to implement Client-to-client communication using Laravel Echo to show who's typing and display the typing indicators accordinglyLearn how to use Flexbox tricks to keep messages scrolled into view as they roll inLearn database seeding techniques in LaravelLearn how to use API Resources in LaravelLearn how to display better-formatted dates and timesLearn how to listen for Broadcasted events from the backend and react to them accordinglyWe'll also learn how to listen for users leaving or joining events and add/remove them from the online user listAll of this state will be managed on the client side, using PiniaBy 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.
Overview
Section 1: Introduction
Lecture 1 Installing Laravel
Lecture 2 Scaffolding Chat Rooms
Lecture 3 Let's work on the Chat UI
Lecture 4 Building the Chat TextArea
Lecture 5 Seeding Fake Messages in Order
Lecture 6 Creating a Pinia Store
Lecture 7 Creating the Messages Endpoint
Laravel Developers who want to Build Realtime Applications using InertiaJS, Vue 3 and Reverb
