Master Laravel 9 Vue 3 Inertia Fullstack 2023

Learn to build great SPA with Laravel 9, Vue 3, Inertia & Tailwind CSS! Fully Re-Recorded for 2023!
Master Laravel 9 Vue 3 Inertia Fullstack 2023
File Size :
17.34 GB
Total length :
35h 57m



Piotr Jura | 45,000+ Enrollments


Last update




Master Laravel 9 Vue 3 Inertia Fullstack 2023

What you’ll learn

Learn Laravel 9 from Scratch
Learn Vue 3 from Scratch
Learn the All New Vue 3 Composition API!
Mix Backend and Frontend Frameworks using Inertia
Learn Tailwind CSS

Master Laravel 9 Vue 3 Inertia Fullstack 2023


Basics of JavaScript
Basics of PHP


Learn Laravel 9,  Vue 3, Inertia, and Tailwind in this brand new 2023-ready FULL STACK course!Learn Laravel 9 and Vue 3 (the most recent versions!) from Scratch! Everything about both frameworks is explained!We will build a real-world, fully featured Single Page Application (SPA) by using the most modern and productive tech in 2023. You will not only master Laravel but also Vue 3 including the all-new Composition API!The course comes with the full source code! Every single lecture change can be found on GitHub, with a direct link straight from every video!I start by explaining how to get set up on both Windows and Mac!TOPICS COVEREDIn Laravel:Routing, including optional parameters, route groupingMiddlewareEloquent ORMModels, MigrationsSeeding databases with fake dataDatabase relations – creating, managing, you will learn how they work and how to use them effectivelyAuthentication & authorization – registering users, signing in, user verification, limiting access, admin usersSending emails, and testing emails locally using MailHog!Notifications – database & emailsPagination & FilteringUploading Images!Forms and data validationIn Vue:All-new Composition API!Reactive dataComputed propertiesPassing data using props!Emitting custom eventsHandling eventsMaking requestsComponents & component slotsCreating layoutsFile uploading using JavaScriptFor styling, we will learn the super popular Tailwind CSS! Tailwind is the de-facto standard in 2023!


Section 1: Introduction, Source Code, Resources and Getting Help!

Lecture 1 What you Will Build and Learn in This Course?

Lecture 2 How to get Help?

Lecture 3 The Visual Studio Code

Lecture 4 Visual Studio Code Resources!

Lecture 5 Where to Find and How to Use the Course Source Code

Lecture 6 Introduction to the Udemy UI

Section 2: Setting Up for Windows!

Lecture 7 Setting Up for Windows! – Section Introduction

Lecture 8 Windows Installing PHP

Lecture 9 Windows Installing Composer

Lecture 10 Windows Installing Node.js

Lecture 11 Windows Installing Docker

Section 3: Setting Up for Mac!

Lecture 12 Setting Up for Mac! – Section Introduction

Lecture 13 MacOS Installing Homebrew

Lecture 14 MacOS Installing PHP

Lecture 15 MacOS Installing Composer

Lecture 16 MacOS Installing Node.js

Lecture 17 MacOS Installing Docker

Section 4: Laravel, Vue & Inertia

Lecture 18 Laravel, Vue & Inertia – Section Introduction

Lecture 19 What is Laravel?

Lecture 20 What is Vue?

Lecture 21 What is Inertia?

Section 5: Setting Up Laravel, Vue & Inertia

Lecture 22 Inertia Upgraded to Version 1.0!

Lecture 23 Download the starter pack!

Lecture 24 Creating Laravel project

Lecture 25 Adding Vue and Vite to the stack

Lecture 26 Configuring Inertia.js

Section 6: Your First SPA

Lecture 27 Your First SPA – Section Introduction

Lecture 28 Creating first pages

Lecture 29 Passing data to pages

Lecture 30 Layouts

Lecture 31 Reactive data in Vue

Lecture 32 Persistent layouts with Inertia

Lecture 33 Default layouts

Lecture 34 (OPTIONAL) Using linter (ESLint), jsconfig and getting most out of VSCode

Lecture 35 (OPTIONAL) Advanced JS topics (arrow functions, promises, async importing etc.)

Section 7: Working with the Database

Lecture 36 Working with the Database – Section Introduction

Lecture 37 Laravel Debugbar & IDE Helper

Lecture 38 Connecting to the Database

Lecture 39 Models and Migrations

Lecture 40 Working with Migrations

Lecture 41 Model Factories & Seeders

Lecture 42 Querying the Database

Lecture 43 Querying the Database (CHALLENGE)

Lecture 44 Updating and Inserting Data, Mass Assignment

Lecture 45 Resource Controller and Route Model Binding

Lecture 46 Vue Directives (v-for, v-bind) & Custom Components

Lecture 47 Handling Forms (useForm, v-model)

Lecture 48 Handling Forms in Laravel

Lecture 49 Middlewares and Sharing Data with All Pages

Lecture 50 Computed Data and Conditional Rendering (Displaying Flash Messages)

Lecture 51 Data Validation (Back End & Front End)

Lecture 52 Edit Form

Lecture 53 Deleting Data

Lecture 54 Laravel Route Names in Vue

Section 8: Adding Some Style (Tailwind CSS)

Lecture 55 Adding Some Style (Tailwind CSS) – Section Introduction

Lecture 56 Installing and Setting Up Tailwind CSS

Lecture 57 Why Tailwind CSS? Tailwind Overview

Lecture 58 Basic Styling of the App (Hands on With Tailwind)

Lecture 59 Custom UI Components and Grid Responsive Design

Lecture 60 Listing Details (Non-Prop Attributes)

Lecture 61 Custom Price Formatting Component

Lecture 62 Listing Page (Getting Even Better With Responsive Design!) + Vue Named Slots

Lecture 63 Styling Forms

Lecture 64 Extracting Tailwind Styles Using @apply Directive

Lecture 65 Edit Form Styling

Lecture 66 Progress Bar Loading Indicator

Lecture 67 Styling Error Messages

Section 9: Monthly Payment Calculator (Mini Vue Project Within a Project)

Lecture 68 What Are We About to Build?

Lecture 69 Payment Calculator Markup (Sliders)

Lecture 70 Payment Calculator Logic

Lecture 71 Composables – Reusable Logic in Vue (Reactive Monthly Payment)

Lecture 72 Displaying Payment Next to Every Listing (Reusing Composable)

Lecture 73 Adding More Composable Members (Total Paid, Total Interest)

Section 10: Authentication & Security

Lecture 74 Authentication & Security – Introduction

Lecture 75 Authentication Controller and Routes

Lecture 76 Authentication Form Markup and Basic Logic

Lecture 77 Signing-In Logic – Authentication Process Explained

Lecture 78 Explaining the Authentication Process

Lecture 79 Getting the Currently Logged In User

Lecture 80 Logging Users Out

Lecture 81 CSRF Tokens

Lecture 82 Protecting Routes (Authorization) – Can You Access a Specific Page?

Lecture 83 User Registration Form

Lecture 84 User Registration Logic & Hashing Passwords

Lecture 85 Eloquent Mutators & Accessors – Hashing Password Example

Lecture 86 How Hashing of The Passwords Work

Lecture 87 Form Links

Lecture 88 419 Errors When Logging Out

Section 11: Database Relations & User Authorization

Lecture 89 Database Relations & User Authorization – Introduction

Lecture 90 Creating a One-to-Many Database Relationship

Lecture 91 One-to-Many Connecting Models Together – the Theory

Lecture 92 One-to-Many Connecting Models – Practice

Lecture 93 Every New Listing Needs an Owner!

Lecture 94 Model Policies – Theoretical

Lecture 95 Model Policies – In Practice

Lecture 96 Model Policy and Guest Users

Lecture 97 Only Owners Can Edit or Delete!

Lecture 98 Admin Users – Overriding Policy Implementation

Lecture 99 Reading the Related Data (Using Database Relationship)

Section 12: Data Pagination & Filtering

Lecture 100 Data Pagination & Filtering – Introduction

Lecture 101 Adding Pagination

Lecture 102 Filtering Form Markup

Lecture 103 Filtering JavaScript Logic

Lecture 104 Filtering the Data

Lecture 105 Conditional Queries in Eloquent

Lecture 106 Local Query Scopes in Eloquent

Lecture 107 Filtering Using Local Query Scope

Section 13: The My Account Section

Lecture 108 Realtor My Account – What We’re Going to Build?

Lecture 109 Controller Routes Grouping

Lecture 110 Showing the Realtor Listings

Lecture 111 Soft Deletes (Putting Records Into Trash – To Be Restored)

Lecture 112 Soft Deleting Listings

Lecture 113 Filtering Using Checkboxes – The Markup

Lecture 114 Vue Watchers – Filtering Using Checkboxes

Lecture 115 The Debounce Function – Handling the Events Flood

Lecture 116 Filtering Using Checkboxes – The Backend Part

Lecture 117 Customizable Sorting – Back End

Lecture 118 Customizable Sorting – Front End

Lecture 119 Filtering Form – Default Values

Lecture 120 My Account Section Pagination

Lecture 121 Edit, Delete and Preview Buttons

Lecture 122 Restoring Models

Section 14: File Uploading

Lecture 123 File Uploading – Introduction

Lecture 124 File Data Model

Lecture 125 Laravel Filesystem Abstraction Explained

Lecture 126 Preparing for the File Uploads

Lecture 127 Uploading Multiple Images (Backend Part)

Lecture 128 Uploading Multiple Images (In Vue)

Lecture 129 Styling the Upload Input & UX Improvement

Lecture 130 File Upload Progress Indicator

Lecture 131 Displaying the Uploaded Images

Lecture 132 Removing Uploaded Files

Lecture 133 Displaying Listing Images on the Listing Page

Lecture 134 Validating Uploaded Files (Make Sure It is an Image!)

Lecture 135 Counting Related Models (How Many Images We Have?)

Section 15: Making Offers

Lecture 136 Making Offers – Introduction

Lecture 137 Offers Data Model and Relations

Lecture 138 Offer Widget – Adding Widget in Vue

Lecture 139 Making Offer – the Backend Part

Lecture 140 Vue Custom Component Events (Passing Data to the Parent Component)

Lecture 141 Fetching and Displaying an Existing Offer of the Current User

Lecture 142 How Many Offers Were Made?

Lecture 143 Offer List Page

Lecture 144 Single Listing View with All The Offers

Lecture 145 Accepting Offers (Single Action Controller & Loading Nested Relations)

Lecture 146 Seeing Which Offer is Sold

Lecture 147 Filtering Out Sold Offers (Querying Relationship Presence/Absence)

Lecture 148 Simpler Way To Identify Sold Listings (Refactoring the Query Scope!)

Lecture 149 No Offer Making or Changing of Listings That Are Sold!

Lecture 150 UI Improvements

Section 16: Notifications – Informing Users About What Happened

Lecture 151 Notifications – Informing Users About What Happened – Introduction

Lecture 152 Notifications Introduction & Database Setup

Lecture 153 Sending Notification When Offer is Made

Lecture 154 Showing the Notification Count

Lecture 155 Showing an Empty State

Lecture 156 Notifications List Page Backend Part

Lecture 157 Notifications List Page Front End

Lecture 158 Marking Notifications as Read

Section 17: Sending Email & User Verification

Lecture 159 Sending Email – Introduction

Lecture 160 Local Email Testing with Mailhog (in Docker)

Lecture 161 Delivering Notifications via Email

Lecture 162 Registered User – Email Verification Process

Lecture 163 Requiring Verification on Pages & Not Verified Notice Page

Lecture 164 User Verification Route

Lecture 165 Resending the Verification Link (and Understanding Throttling and Cache)

Lecture 166 Testing the Email Resending Process

Section 18: Appendix A – JavaScript Crash Course

Lecture 167 What is JavaScript?

Lecture 168 Using Chrome Console to Learn JavaScript

Lecture 169 Variables – var, let, const

Lecture 170 Primitive Data Types

Lecture 171 Data Type Gotchas

Lecture 172 Functions

Lecture 173 Arrays

Lecture 174 Objects

Section 19: OLD – Introduction

Lecture 175 Introduction

Lecture 176 Required and optional software for the course

Lecture 177 MacOS specific setup

Lecture 178 Windows specific setup

Lecture 179 Where to find the full source code?

Lecture 180 Visual Studio Code – extensions, shortcuts and tricks

Section 20: OLD – Laravel API & Vue routing and basics

Lecture 181 Creating a new Laravel project using Composer

Lecture 182 Setting up Vue.js application

Lecture 183 Fallback route in Laravel

Lecture 184 Installing and setting up Vue Router

Lecture 185 HTML5 history mode in Vue Router

Lecture 186 Vue component registration (global/local) and Index component

Lecture 187 Router Link component and routing inside a Vue application

Lecture 188 Bootstrap, styling and Laravel Mix

Lecture 189 v-bind, v-bind shorthand and named Vue routes

Lecture 190 Styling the navigation bar

Section 21: OLD – Diving into Vue.js

Lecture 191 Single file Vue components

Lecture 192 Child components (using components in other components)

Lecture 193 Component props and prop types

Lecture 194 One-way data flow

Lecture 195 Lifecycle hooks

Lecture 196 Component state and reactivity

Lecture 197 Reactivity gotchas

Lecture 198 Conditional rendering (v-if)

Lecture 199 List rendering and v-else

Lecture 200 Computed properties

Lecture 201 Component methods

Section 22: OLD – Database, Models, Migrations, Seeders, Queries, API testing, HTTP requests

Lecture 202 Setting up database

Lecture 203 Specified key was too long problem

Lecture 204 Model and migrations

Lecture 205 Model factory, database seeder and faker

Lecture 206 Routes and model all() method

Lecture 207 API testing in Postman

Lecture 208 Using Model::find() and mandatory/optional route parameters

Lecture 209 Using Model::findOrFail() and Accept header

Lecture 210 JavaScript Promises explained

Lecture 211 Making HTTP requests with Axios

Lecture 212 CSS Flexbox and Bootstrap utility classes

Section 23: OLD – Controllers, HTTP resources

Lecture 213 Vue router parameters

Lecture 214 Passing all object properties as props (v-bind trick)

Lecture 215 Vue router links

Lecture 216 Understanding CSS grid system

Lecture 217 Laravel controllers

Lecture 218 Resource controllers

Lecture 219 API Resources

Section 24: OLD Forms, Events, Eloquent relations, Validation, Query Scopes, Handling errors

Lecture 220 Availability component (horizontal forms, scoped styles)

Lecture 221 Form input binding (v-model)

Lecture 222 Handling DOM events in Vue

Lecture 223 Laravel Debugbar (seeing what happens behind the scenes)

Lecture 224 Booking model and relations

Lecture 225 Seeding bookings (generating random, non overlapping time series)

Lecture 226 Single Action Controller

Lecture 227 Request input validation (validating data clients send to our server)

Lecture 228 Eloquent Local Query Scopes

Lecture 229 Returning bookable availability (HTTP response statuses)

Lecture 230 Getting object availability in Vue.js

Lecture 231 Displaying form errors

Lecture 232 Final touches – displaying availability

Section 25: OLD – ReviewList Component

Lecture 233 ReviewList component markup (using responsive grid options)

Lecture 234 Review model & migration (using UUID as model primary key)

Lecture 235 Review model relationships (one-to-one, one-to-many)

Lecture 236 Review model factory & seeder

Lecture 237 Reviews controller (using latest() query scope)

Lecture 238 Reviews HTTP resource (serializing model)

Lecture 239 Loading reviews in Vue component

Lecture 240 Vue filters and moment.js

Lecture 241 Star Rating component (using FontAwesome)

Lecture 242 Star Rating component logic (calculating stars to display from average rating)

Lecture 243 Review list cleanup and section wrap-up

Section 26: OLD – Review Page

Lecture 244 Review Page component markup and route

Lecture 245 Emitting and handling custom Vue.js events

Lecture 246 Parent and child components communication

Lecture 247 v-model explained, adding v-model support to custom components

Lecture 248 Leaving a rating flow explained

Lecture 249 Checking if review already exists on backend

Lecture 250 Checking if review already exists on frontend

Lecture 251 Booking review key and Eloquent model events

Lecture 252 Fetching booking by review key (custom model methods)

Lecture 253 Creating Resource classes for booking

Lecture 254 Understanding promise chaining

Lecture 255 Displaying the booking information on review page

Lecture 256 A new API endpoint for storing a review (validation rules, complex flow)

Lecture 257 Handling request errors in Vue

Lecture 258 Storing a new review (using POST in axios)

Lecture 259 Fixing a 500 error in BookingByReview controller

Lecture 260 FatalError component (custom Vue component for unhandled errors)

Lecture 261 Handling only specific errors (HTTP error codes, validation errors)

Lecture 262 Validation on Review sending page

Lecture 263 Reusable validation errors component

Lecture 264 Vue Mixins – how to reuse the same code in different components

Lecture 265 Async/Await explained

Lecture 266 Using async/await in Review component

Lecture 267 Vue Component Slots

Section 27: OLD – Vuex – managing global state

Lecture 268 Fixing application Vue issues

Lecture 269 Vuex introduction – managing global state

Lecture 270 Setting up Vuex

Lecture 271 State mutations – storing last search dates

Lecture 272 Reading Vuex state

Lecture 273 Binding to Vuex state

Lecture 274 Using Vuex actions to add side effects when committing to the store

Lecture 275 Initializing Vuex state from the browser local storage

Section 28: OLD – Price Breakdown Component

Lecture 276 Vue Transitions

Lecture 277 Using animated icons

Lecture 278 Bookable price (controller, migration, factory), Carbon date library

Lecture 279 Async/Await in Availability, emitting a custom event

Lecture 280 Loading price in Bookable component and using Vuex bindings

Lecture 281 Price breakdown component

Section 29: OLD – Basket and Checkout

Lecture 282 Vuex – a basket (adding/removing)

Lecture 283 Vuex getters – how many items in the basket?

Lecture 284 Checking what’s in the basket, removing from the basket

Lecture 285 Vuex getters – property vs method access, higher order functions, composition

Lecture 286 Keeping basket state in localStorage

Lecture 287 Creating a Basket/Checkout page

Lecture 288 Rendering contents of the basket and allowing removal

Lecture 289 List transitions – animating adding/deleting to a list (v-for)

Lecture 290 Checkout form markup

Lecture 291 Address model and booking changes

Lecture 292 Checkout logic explained

Lecture 293 Validating nested fields

Lecture 294 Validating arrays of input

Lecture 295 Storing booking and address

Lecture 296 Refactoring price calculations

Lecture 297 Binding form

Lecture 298 Making a booking

Lecture 299 Empty basket state

Lecture 300 Clearing the basket after purchase

Lecture 301 Displaying booking errors

Lecture 302 Rendering purchase confirmation

Section 30: OLD – Authentication using Laravel Sanctum

Lecture 303 Laravel Sanctum

Lecture 304 Laravel Sanctum introduction

Lecture 305 Laravel Sanctum installation

Lecture 306 Sanctum configuration – domains

Lecture 307 Understanding authentication with Sanctum

Lecture 308 Authentication using Vue practical example

Lecture 309 Logic component (page) markup

Lecture 310 Login component logic

Lecture 311 Is user authenticated – local storage? (Part I)

Lecture 312 Is user authenticated – VueX? (Part II)

Lecture 313 Handling unauthenticated state (401) – using Axios interceptors

Lecture 314 Header changes and logout

Lecture 315 Fixing “is logged in” delay

Lecture 316 Registration component markup

Lecture 317 Registration component logic

Lecture 318 Bonus!

Beginners in PHP,Beginners in JavaScript

Course Information:

Udemy | English | 35h 57m | 17.34 GB
Created by: Piotr Jura | 45,000+ Enrollments

You Can See More Courses in the Developer >> Greetings from

New Courses

Scroll to Top