Effortless Real-Time Chat Apps with Laravel Reverb and Vue.js 3

Опубликовано: 29 Сентябрь 2024
на канале: QiroLab

8,618

234

Laravel Reverb Tutorial: This video dives into building a seamless real-time chat application using Laravel Reverb and Vue.js 3! We'll show you how to leverage Reverb's power alongside Vue.js 3 to create a smooth, effortless chat experience for your users.

In this video, you'll learn:
- The magic of Laravel Reverb for real-time features
- Integrating Reverb with Vue.js 3 for a seamless frontend
- Building a real-time chat application step-by-step
- Essential techniques for a user-friendly chat experience

By the end of this video, you'll be equipped to build and deploy modern chat applications confidently!

Don't get left behind! Try Spec Coder: Supercharge Your Coding with AI!
50% off! Use code YT-FAMILY (limited time offer).
👉 https://qirolab.com/spec-coder

GitHub Repository:
https://github.com/qirolab/laravel-re...

Blog Post: Building Real-Time Chat Applications with Laravel Reverb and Vue 3
https://qirolab.com/posts/building-re...

🔥 Spec Coder: Supercharge Your Coding with AI! (Features & AI Setup)
   • 🔥 Spec Coder: Supercharge Your Coding...

▶ Real-time Chat system (Laravel WebSockets, VueJs, Laravel-echo)
   • Real-time Chat system (Laravel WebSoc...

▶ Laravel Themer: Add multi-theme support for the Laravel application
   • Laravel Themer: Add multi theme suppo...

▶ VSCode Customisation Tips & Tricks
   • VS Code Customisation Tips & Tricks

▶ Code Quality DevTools
   • Code Quality DevTools

▶ #1: SPA Authentication using Laravel Sanctum Tutorial
   • #1: SPA Authentication using Laravel ...

▶ #2: API Token Authentication using Laravel Sanctum
   • #2: API Token Authentication using La...

▶ SOLID design principles Playlist
   • SOLID design principles

▶ Install Laravel Valet Linux Plus
   • #4: How to install Laravel Valet Linu...

▶ Laravel Eloquent Relationships
   • #1 - One to One relationship | hasOne...

▶ Laravel Excel Tutorial
   • #1: Laravel Excel Export data in Exce...

#LaravelReverb #laravel #Vuejs3 #RealTimeChatApp #WebDevelopment #CodingTutorial #qirolab #programming #laravel11 #laravelphp #laravel_tutorial

Timestamps:
00:00 - Introduction
02:01 - Create Fresh Laravel 11 App
03:05 - (Optional) Installing Laravel-Themer Package for quick authentication scaffolding
07:06 - Display list of users on the Dashboard page
10:06 - Create a Chat Page
12:07 - Chat Component in Vue 3
17:07 - Create `ChatMessage` Model & Migration
19:28 - Display Chat messages
27:14 - Implementing the Send Message feature
30:38 - Installing Laravel Reverb
36:01 - Broadcasting `MessageSent` event & Creating Channel Route
38:21 - Listen for broadcasted messages in the Chat Component using Laravel Echo
40:33 - Fix scroll on receive a new message
42:32 - Wisper typing event using Laravel Echo

Support my work:
1. On BuyMeACoffee: https://www.buymeacoffee.com/qirolab

Also, follow us on:
𝐅𝐚𝐜𝐞𝐛𝐨𝐨𝐤: https://fb.com/qirolab
𝐓𝐰𝐢𝐭𝐭𝐞𝐫:   / qirolab