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

Install a fresh Laravel project using the Laravel Breeze starter kit with Inertia and Vue.js, configure SQLite, run migrations, and prepare to scaffold chat rooms in the browser.

Scaffold chat rooms by defining rooms and messages tables with title and slug, implement room model and controller, and bind routes by slug for inertia rendering.

Refactor the chat UI into modular components—header, messages, nav, and footer—in a chat folder. Display received messages with sender name, content, and time, and sent messages with time only.

Replace the default text input with a text area to enable enter submissions and shift-enter for new lines, emitting messages to the parent for backend storage.

Seed dummy data for a chat app by creating user, room, and message seeders in Laravel, generating many messages with varied timestamps and random users to power a real-time interface.

Install and configure Pinia to manage app state, define a messages store with state and getters, and integrate it into Vue components to fetch and display messages from the backend.

Create a messages endpoint in Laravel that returns all messages for a specific room, using the room's messages relationship and user data, with eager loading, API resources, and 50-record pagination.

Fetch messages from the backend using the rooms/{roomSlug}/messages API with axios in the Pinia store, supporting pagination, merging data, and enabling infinite scrolling.

Render messages by looping through all messages from the store after fetching them, apply conditional alignment and colors by user, display sender names for received messages, and format timestamps.

Use flexbox to reverse message order so the latest appears at the bottom, keep the scroll anchored, and enable infinite scroll to load older messages.

Enable infinite scrolling using the intersection observer from Vue use to load additional data from the backend when the watched element enters the viewport, then merge it with existing messages.

Use the Intersection Observer API to load previous messages for the room slug when the observed element enters the viewport, incrementing the page and merging data.

Implement infinite scrolling to fetch and merge messages, store a new message on enter via the backend, and append it to the timeline with room and user IDs.

Install and configure Laravel Reverb to enable real-time features in a Laravel 11 app, then emit backend events and listen with Laravel Echo on the client.

Broadcast new messages in real time using Laravel 11, Vue 3 and Pinia via Laravel Reverb, WebSockets, and a presence room channel.

Listen for the message created event, pass full message data to the front end via a resource, and push it into the message store to update real-time messaging.

Explore presence channels to detect online users for a chat room and display real-time user lists, including authorization and join/leave events in a Laravel 11, Vue 3, and Pinia app.

Store online user data in a dedicated Pinia store and expose all users and a count getter. Display online avatars in the navigation by looping the user store data.

Sync online user lists in real time by listening to join and leave events on the channel, updating the users store with add and remove actions, and preventing duplicates.

Register a keydown listener on the text area to emit a typing event, and display a typing indicator in the navbar with a three second timeout.

Seamlessly implement client-to-client typing indicators by whispering typing events over a presence channel with Laravel Echo, updating the typing state for other connected users without backend requests.