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

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.

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.

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

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.

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

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.

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.