Laravel Vuejs Private (one to one) Chat App

Install and set up Laravel with Composer and the global installer, then create a new project named private. Start the server with php artisan serve to enable login and registration.

Set up npm, install dependencies from package.json to populate node_modules, then run npm run watch to compile assets from resources to public, including bootstrap and vue components.

Learn to broadcast chat events on a private channel, create or reuse sessions when users chat, and manage user lists and sessions in the backend for a Laravel Vue.js app.

Design a database schema for a private one-to-one chat app. Link messages via a messages table, a chat table, and a session table to isolate conversations.

Learn to create a sessions table via a Laravel migration, including id, user1_id and user2_id fields, enforcing uniqueness, and setting up the private school chat database before migrating.

Create the messages schema by adding a messages table linked to the session with an unsigned session_id and a content field, then migrate and refresh to apply changes.

Create a chat table schema named jets with message_id, optional session_id, user_id, a type flag (0 for sent, 1 for received), and the message content, then run a new migration.

Understand what a factory is and how it creates dummy data for databases, enabling testing and handling schema changes in a private Laravel Vuejs chat app, with three random users.

Learn to create and use Laravel factories to seed the database with three custom users, including setting emails, names, and passwords, and run migrations and seeds.

Resources act as a layer between data and presentation, transforming data to show a single name property and enabling post counts via a user-post relationship.

Create and organize Laravel Jet models for a private chat app, setting up session, message, and user models in a dedicated models folder and exploring their base model inheritance.

Create controllers for chat, block, and session models in a Laravel Vue.js private chat app, each extending a base controller, and prepare to build resources next.

Explore how Laravel resources shape model data, create a user resource, and transform logged-in user data, with optional meta fields and collection transformations for multiple records.

Define and implement belongs to and has many through relationships between sessions, chats, and messages to fetch full message content for each session.

Advocate using Vuejs only for the Laravel Vuejs private chat app, highlighting its simplicity and compatibility with Laravel, and contrast it with Angular and React.

Set up vuejs in a Laravel project by installing dependencies, configuring vue, and integrating a sample component with global and local imports, plus live-reload with npm run watch.

Design a private Laravel Vuejs chat interface by building a jet component, replacing the example component, and creating a header with a left friends list and a right chat box.

Build and integrate a new message component in a Laravel Vuejs private chat app by adding a bootstrap card message, a text input form, and parent-child component communication.

Learn to build a Laravel Vue chat by handling form submission and rendering a messages array. Implement automatic bottom scrolling with view chat scroll to keep the latest messages visible.

Design and test a one-to-one chat interface by adding a close button to chat windows, managing an open state, and emitting a close event between message components.

Learn to implement a three-dot dropdown in the message component using bootstrap, add block and clear checks functionality, and manage blocking and unblocking in a Laravel Vuejs private chat app.

Enable a front-end block feature that disables the input when blocked. Toggle block and unblock, show blocked status, and style the username in the Laravel Vuejs private chat app.

Broadcast private chat events on a private channel using a session ID to enable one-to-one communication, while loading users and creating or retrieving sessions in the backend.

Fetches all friends via a get friends route in Laravel Vuejs app, calls home controller, stores results in a friends array from response.data, and renders each name in a loop.

Transform the user detail in a Laravel Vue.js private chat app by wrapping users in a UserResource collection and exposing id, name, email, and online status.

In a Laravel Vuejs private one-to-one chat app, learn to open a per-user chat window by selecting a friend, using a session open flag to display only the active conversation.

Create a session on frontend by sending a request, filtering out the logged-in user, and verifying or retrieving the session details between users in a Laravel Vuejs private chat app.

Learn to manage private one-to-one chats in a Laravel Vuejs app by showing sessions on the frontend, creating a session when none exists, and guarding against refresh errors.

Create backend chat sessions by checking for a friend's session or creating one with friend and user IDs, returning data via session resource in the Laravel Vuejs private chat app.

Learn to transform a created session with SessionResource, returning id, open status, and user ids, and to include the session under the user resource for proper frontend handling.

Install and configure pusher with Laravel to enable real-time broadcasting for a private chat app. Set up echo and broadcasting settings, and verify via npm watch and events.

Configure pusher settings for the Laravel Vuejs private chat app by obtaining the app id, key, secret, and cluster, and updating the config to enable and create channels.

Learn how presence channels work in a Laravel Vuejs private chat app by showing who is online, who has joined, and who left, without authentication, using real-time updates.

Learn to implement a presence channel to show who is online in a Laravel Vuejs private chat app, using broadcasting and echo to join users and display online status.

Explore how a private Laravel Vue.js chat app shows friends online status by handling join and leave events, updating each friend's online indicator in real time.

Build a private one-to-one chat interface with an online presence indicator beside the user name. Use a circle icon, anchor tags, and green status to show online state.