Laravel + Vue 3 + Inertia: From Zero to Production SPA

learn how to install and configure PHP on Windows, download PHP 8.2 non thread safe, extract to a PHP eight folder, update PATH, and verify installation with PHP -v.

Enable the pdo_mysql extension in php.ini to connect PHP with MySQL, learn how to locate the ini file, uncomment the extension, and restart the terminal.

Install Composer on Windows to manage PHP projects and libraries. Use the Windows installer, point to your PHP path, finish, then run Composer to verify.

Install node.js on Windows by downloading the LTS version from nodejs.org, run the installer with all tools, approve prompts, and verify the installation with node -v.

Install and start Docker Desktop on Windows by downloading from docker.com, running the installer, restarting when prompted, and install the WSL 2 Linux kernel as advised.

Create a new Laravel project with composer create-project, targeting at least version 11, and troubleshoot git and php extensions. Then run php artisan serve to start the local app.

Configure Laravel, Vue 3 and Inertia.js using Vite for a complete working stack. Learn server-side and client-side setup, plugin integration, and running dev servers to build a SPA.

Navigate Inertia.js upgrade guide to apply v1 changes by updating imports to inertia js slash view three, adjusting use page usage, recognizing built-in inertia progress.

Create two initial pages to demonstrate routing in a Laravel Vue 3 SPA, using Inertia for seamless in-browser page updates without full page reloads.

Learn to pass data from a Laravel controller to Vue components via Inertia, define props, and render a passed message in the component using the Composition API.

Create a common layout with a main layout component and slots to share a header, navigation, and footer across index and show pages using Inertia and Vue components.

Explore Vue reactivity by building a timer with a ref that wraps values in a proxy, updated via setInterval, with automatic template unwrapping and real-time UI updates.

Preserve layout state across page visits by applying Inertia's persistent layouts with Vue 3 composition API, using the layout option to wrap pages in a main layout and its slot.

Learn how to implement default layouts with inertia in a Laravel 12 and Vue 3 spa, applying a main layout to pages that lack a specific layout.

Configure ESLint with the Vue plugin, set up jsconfig.json for an @ alias to resources/js, and tailor VS Code settings to auto-fix and format on save.

Explore advanced modern JavaScript topics, including arrow functions, this binding, object destructuring, async/await, promises, and import meta glob in Vue 3 and Laravel SPA apps.

Install the Laravel debug bar and ID helper to expose views, queries, and memory during development, with debug disabled in production; ID helper enhances editors like VS Code or PhpStorm.

Set up a local MySQL database with Docker Compose, connect your Laravel app via environment variables, and verify the connection using localhost:8080 and the database management tool.

Learn how relational databases store data in tables with primary keys and indexes. Build and interact with those tables in Laravel using Eloquent models and migrations.

Master Laravel migrations by creating descriptive names, adding listings fields like beds, buffs, area, and address, and using migrate status and rollback to manage schema changes.

Define listing model factories with faker in Laravel to generate fake data, seed the database with seeders, and use migrate and db seed to test the app.

Learn to use Laravel Tinker to interact with the database via Eloquent, run queries in the command line, and resolve issues with composer dump-autoload and fully qualified namespace.

Learn to query the database with Laravel Eloquent using Tinker, listing all records, finding by id, and building where and or where conditions, then order by beds.

Complete the challenge by querying the listing model for listings with at least four beds at the lowest price, using where and order by price, then use the first method.

Update records and create new ones in Laravel using Tinker, learn to persist changes with save, and enable mass assignment by defining a fillable array.

Create a Laravel resource controller with predefined actions and routes, and use route model binding by type-hinting the listing model to fetch resources automatically.

Master rendering listings with Vue using v-for and v-bind, and assign unique keys for efficient updates. Build a reusable listing address component for both index and show pages.

Learn to handle forms with inertia in a Laravel and Vue 3 app by binding inputs with v-model, using reactive form data and useForm, and posting via Inertia post.

learn to handle form submissions in laravel by storing data in mysql via the listing model's create method, validate inputs, redirect, and display flash messages with inertia.

Learn how Laravel middleware runs before each request and how to share data with every Inertia view, including flash messages stored in the session.

Learn to display flash messages using Inertia and Vue with computed properties that derive data from page props, enabling conditional rendering and automatic UI updates.

This lecture explains back-end and front-end data validation in a Laravel and Vue setup, using request validate and spread merging, with error display and constraints like required, min, and max.

Learn to build an edit form for existing listings using route model binding, reactive props, and an update method with validation and flash feedback.

Learn to implement the destroy action in a Laravel resource controller, delete a model, and redirect back with a flash message, while understanding soft deletes and delete requests in Inertia.

Learn to replace direct URLs with named routes using Ziggy, configure Ziggy in Laravel and Vue, and generate routes with route('name', params) for safer, error-proof navigation.

Install and configure Tailwind CSS in a Laravel and Vue 3 project, using utility-first classes and purge unused styles, with a forms plugin and style imports.

Tailwind CSS is a CSS utility library, not a UI library, with classes that describe properties for fast prototyping, clear markup, responsive breakpoints, hover effects, and easy component extraction.

Style a responsive header with Tailwind, implement dark mode aware borders and background, build a flex navigation with routes, and add a flash message within a centered container.

Create a custom ui component called box to host a listing, and render listings in a responsive tailwind grid. Build a ui components folder with dark mode and mobile-first breakpoints.

Improve a Vue 3 listing interface by adding a listing space component that shows beds, baths, and area, using non prop attributes with a single root element for easy styling.

Build a reusable price component in Vue that formats currency from a price prop (number or string) using a computed property, defaulting to US dollars, rendered in a span.

Explore responsive listing page design using tailwind grid and flex layouts, implement named slots in a reusable box component, and optimize content order for different screen sizes.

Style the new listings form with a six-column grid and precise column spans, and apply consistent label and input styling for light and dark modes using Tailwind utilities.

Use Tailwind's layer and apply directives to extract reusable styles for labels, inputs, and buttons, creating components like label, input, and button primary.

Apply grid layout to the edit form and reuse global label and input classes to match the create form, with a downloadable pre-modified edit view.

Style error messages in forms by adding a global input error class with red text for light and dark modes, and apply it in create and edit forms.

Build a monthly payment calculator in Vue 3 using reactive data and a composable to share logic across components, then reuse it on the main page for real estate parameters.

Create monthly payment markup with sliders for interest rate and duration, styled with headers and classes, and display the monthly payment using a price component in light and dark modes.

Build the monthly payment calculator in Vue by binding rate and loan duration with ref and v-model, computing the payment via a computed property, and extracting the logic for reuse.

Create a reusable Vue 3 composable to compute monthly payments from total, interest rate, and duration, handling refs with isRef and returning the payment for use across components.

Display monthly payments next to every listing by reusing a composable, refactoring into a dedicated index component for per-listing display, with fixed parameters and reusable logic.

Learn how composable functions return multiple values, including total paid, principal paid, and total interest, compute monthly payments, and present them in a three-column layout for listing and show components.

Create a login controller and routes in Laravel to sign in. Treat the authenticated user session as a resource using create, store, and destroy actions, and compare routing.

Create a centered authentication form page for a Laravel 12 and Vue 3 SPA, rendering the login view with Inertia and handling email and password inputs via v-model.

Validate the submitted email and password with request validate, then authenticate via the ALF facade’s attempt with remember me, regenerate the session, and redirect to the intended page.

Learn how to display backend validation errors on the login form using inertia and the use form helper, and how the attempt method authenticates credentials and redirects.

Expose the currently authenticated user id, name, and email to views via inertia middleware, then conditionally render sign-in or user info in Vue.

Learn to log out an authenticated user by destroying and invalidating the session, regenerating the token, and redirecting via the logout route with a delete request.

Protect your Laravel app from cross-site request forgery by using a per-session CSRF token, sent with forms or via inertia/axios headers, verified by the middleware; mismatches trigger a 419 error.

Protect routes in Laravel with authentication middleware on specific controller actions or resource routes using only/except, redirecting unauthenticated users to login.

Create a user registration flow in Laravel 12 and Vue 3 by building a registration form with name, email, password, and password confirmation, plus routing via Inertia.

Implement back-end registration in Laravel by validating inputs, enforcing unique emails and password confirmation, hashing passwords with Hash::make, saving the user, and authenticating after account creation.

Learn how Eloquent mutators and accessors automatically hash passwords on set using attribute make, get and set, with camel case naming and mass assignment via create.

Learn how hashing plaintext with a random salt produces unique, deterministic outputs and how verification re-hashes the password with the stored salt to compare hashes.

Enhance authentication UX by adding navigation links on the login and registration pages, directing users to the registration and login routes with the link component and light/dark mode-friendly styling.

Learn how CSF tokens protect users from malicious forms by validating post, put, or delete requests, and how to exempt the logout URL in the middleware to prevent 419 errors.

define a one-to-many relationship between user and listing models in Laravel, using hasMany and belongsTo methods, with a foreign key by user_id, and create migrations to enforce the relation.

Learn how to connect models in a one-to-many relationship by attaching a new or existing listing to a user, using methods like save, create, associate, and disassociate.

Explore how to implement one-to-many relationships between users and listings in Laravel, creating users, composing listings, and using tinker or controller logic to associate and reassign ownership.

store the new listing for the currently authenticated user by using the user relationship create method, with routes protected by auth middleware so only logged-in users can add listings.

Explore how Laravel uses policy classes tied to eloquent models to decide actions like edit, create, or delete. Register, discover, and apply these policies via service providers and resource controllers.

Create a listing policy class for the listing model, define actions like view and create, and wire them to a resource controller. Use authorize, can, or authorizeResource to enforce policies.

Enable policy rules for listings via authorized resource in the controller, and make the user parameter optional so unauthenticated users can view listings while create and delete require authentication.

Enforce listing policies where anyone can view all listings and individual listings, authenticated users can create listings, but only the creator can update or delete their listing.

Learn how to create admin users in a Laravel 12 and Vue 3 SPA by adding an is admin flag, seeding data, and overriding policy abilities with a before method.

Learn to fetch related data in a one-to-many Laravel relationship, using user listings, accessing relations as property or method, and applying lazy versus eager loading with filtered queries.