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.

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.

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.

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.

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.

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.

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 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.

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 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.

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.

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.

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.

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.

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.

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.

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.