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

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.

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.

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.

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.

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

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.