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!

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

Requirements

Basics of JavaScript

Basics of PHP

Description

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!

Overview

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 Download the starter pack!

Lecture 23 Creating Laravel project

Lecture 24 Adding Vue and Vite to the stack

Lecture 25 Configuring Inertia.js

Section 6: Your First SPA

Lecture 26 Your First SPA - Section Introduction

Lecture 27 Creating first pages

Lecture 28 Passing data to pages

Lecture 29 Layouts

Lecture 30 Reactive data in Vue

Lecture 31 Persistent layouts with Inertia

Lecture 32 Default layouts

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

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

Section 7: Working with the Database

Lecture 35 Working with the Database - Section Introduction

Lecture 36 Laravel Debugbar & IDE Helper

Lecture 37 Connecting to the Database

Lecture 38 Models and Migrations

Lecture 39 Working with Migrations

Lecture 40 Model Factories & Seeders

Lecture 41 Querying the Database

Lecture 42 Querying the Database (CHALLENGE)

Lecture 43 Updating and Inserting Data, Mass Assignment

Lecture 44 Resource Controller and Route Model Binding

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

Lecture 46 Handling Forms (useForm, v-model)

Lecture 47 Handling Forms in Laravel

Lecture 48 Middlewares and Sharing Data with All Pages

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

Lecture 50 Data Validation (Back End & Front End)

Lecture 51 Edit Form

Lecture 52 Deleting Data

Lecture 53 Laravel Route Names in Vue

Section 8: Adding Some Style (Tailwind CSS)

Lecture 54 Adding Some Style (Tailwind CSS) - Section Introduction

Lecture 55 Installing and Setting Up Tailwind CSS

Lecture 56 Why Tailwind CSS? Tailwind Overview

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

Lecture 58 Custom UI Components and Grid Responsive Design

Lecture 59 Listing Details (Non-Prop Attributes)

Lecture 60 Custom Price Formatting Component

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

Lecture 62 Styling Forms

Lecture 63 Extracting Tailwind Styles Using @apply Directive

Lecture 64 Edit Form Styling

Lecture 65 Progress Bar Loading Indicator

Lecture 66 Styling Error Messages

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

Lecture 67 What Are We About to Build?

Lecture 68 Payment Calculator Markup (Sliders)

Lecture 69 Payment Calculator Logic

Lecture 70 Composables - Reusable Logic in Vue (Reactive Monthly Payment)

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

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

Section 10: Authentication & Security

Lecture 73 Authentication & Security - Introduction

Lecture 74 Authentication Controller and Routes

Lecture 75 Authentication Form Markup and Basic Logic

Lecture 76 Signing-In Logic - Authentication Process Explained

Lecture 77 Explaining the Authentication Process

Lecture 78 Getting the Currently Logged In User

Lecture 79 Logging Users Out

Lecture 80 CSRF Tokens

Lecture 81 Protecting Routes (Authorization) - Can You Access a Specific Page?

Lecture 82 User Registration Form

Lecture 83 User Registration Logic & Hashing Passwords

Lecture 84 Eloquent Mutators & Accessors - Hashing Password Example

Lecture 85 How Hashing of The Passwords Work

Lecture 86 Form Links

Lecture 87 419 Errors When Logging Out

Section 11: Database Relations & User Authorization

Lecture 88 Database Relations & User Authorization - Introduction

Lecture 89 Creating a One-to-Many Database Relationship

Lecture 90 One-to-Many Connecting Models Together - the Theory

Lecture 91 One-to-Many Connecting Models - Practice

Lecture 92 Every New Listing Needs an Owner!

Lecture 93 Model Policies - Theoretical

Lecture 94 Model Policies - In Practice

Lecture 95 Model Policy and Guest Users

Lecture 96 Only Owners Can Edit or Delete!

Lecture 97 Admin Users - Overriding Policy Implementation

Lecture 98 Reading the Related Data (Using Database Relationship)

Section 12: Data Pagination & Filtering

Lecture 99 Data Pagination & Filtering - Introduction

Lecture 100 Adding Pagination

Lecture 101 Filtering Form Markup

Lecture 102 Filtering JavaScript Logic

Lecture 103 Filtering the Data

Lecture 104 Conditional Queries in Eloquent

Lecture 105 Local Query Scopes in Eloquent

Lecture 106 Filtering Using Local Query Scope

Section 13: The My Account Section

Lecture 107 Realtor My Account - What We're Going to Build?

Lecture 108 Controller Routes Grouping

Lecture 109 Showing the Realtor Listings

Lecture 110 Soft Deletes (Putting Records Into Trash - To Be Restored)

Lecture 111 Soft Deleting Listings

Lecture 112 Filtering Using Checkboxes - The Markup

Lecture 113 Vue Watchers - Filtering Using Checkboxes

Lecture 114 The Debounce Function - Handling the Events Flood

Lecture 115 Filtering Using Checkboxes - The Backend Part

Lecture 116 Customizable Sorting - Back End

Lecture 117 Customizable Sorting - Front End

Lecture 118 Filtering Form - Default Values

Lecture 119 My Account Section Pagination

Lecture 120 Edit, Delete and Preview Buttons

Lecture 121 Restoring Models

Section 14: File Uploading

Lecture 122 File Uploading - Introduction

Lecture 123 File Data Model

Lecture 124 Laravel Filesystem Abstraction Explained

Lecture 125 Preparing for the File Uploads

Lecture 126 Uploading Multiple Images (Backend Part)

Lecture 127 Uploading Multiple Images (In Vue)

Lecture 128 Styling the Upload Input & UX Improvement

Lecture 129 File Upload Progress Indicator

Lecture 130 Displaying the Uploaded Images

Lecture 131 Removing Uploaded Files

Lecture 132 Displaying Listing Images on the Listing Page

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

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

Section 15: Making Offers

Lecture 135 Making Offers - Introduction

Lecture 136 Offers Data Model and Relations

Lecture 137 Offer Widget - Adding Widget in Vue

Lecture 138 Making Offer - the Backend Part

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

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

Lecture 141 How Many Offers Were Made?

Lecture 142 Offer List Page

Lecture 143 Single Listing View with All The Offers

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

Lecture 145 Seeing Which Offer is Sold

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

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

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

Lecture 149 UI Improvements

Section 16: Notifications - Informing Users About What Happened

Lecture 150 Notifications - Informing Users About What Happened - Introduction

Lecture 151 Notifications Introduction & Database Setup

Lecture 152 Sending Notification When Offer is Made

Lecture 153 Showing the Notification Count

Lecture 154 Showing an Empty State

Lecture 155 Notifications List Page Backend Part

Lecture 156 Notifications List Page Front End

Lecture 157 Marking Notifications as Read

Section 17: Sending Email & User Verification

Lecture 158 Sending Email - Introduction

Lecture 159 Local Email Testing with Mailhog (in Docker)

Lecture 160 Delivering Notifications via Email

Lecture 161 Registered User - Email Verification Process

Lecture 162 Requiring Verification on Pages & Not Verified Notice Page

Lecture 163 User Verification Route

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

Lecture 165 Testing the Email Resending Process

Section 18: OLD - Introduction

Lecture 166 Introduction

Lecture 167 Required and optional software for the course

Lecture 168 MacOS specific setup

Lecture 169 Windows specific setup

Lecture 170 Where to find the full source code?

Lecture 171 Visual Studio Code - extensions, shortcuts and tricks

Section 19: OLD - Laravel API & Vue routing and basics

Lecture 172 Creating a new Laravel project using Composer

Lecture 173 Setting up Vue.js application

Lecture 174 Fallback route in Laravel

Lecture 175 Installing and setting up Vue Router

Lecture 176 HTML5 history mode in Vue Router

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

Lecture 178 Router Link component and routing inside a Vue application

Lecture 179 Bootstrap, styling and Laravel Mix

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

Lecture 181 Styling the navigation bar

Section 20: OLD - Diving into Vue.js

Lecture 182 Single file Vue components

Lecture 183 Child components (using components in other components)

Lecture 184 Component props and prop types

Lecture 185 One-way data flow

Lecture 186 Lifecycle hooks

Lecture 187 Component state and reactivity

Lecture 188 Reactivity gotchas

Lecture 189 Conditional rendering (v-if)

Lecture 190 List rendering and v-else

Lecture 191 Computed properties

Lecture 192 Component methods

Section 21: OLD - Database, Models, Migrations, Seeders, Queries, API testing, HTTP requests

Lecture 193 Setting up database

Lecture 194 Specified key was too long problem

Lecture 195 Model and migrations

Lecture 196 Model factory, database seeder and faker

Lecture 197 Routes and model all() method

Lecture 198 API testing in Postman

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

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

Lecture 201 JavaScript Promises explained

Lecture 202 Making HTTP requests with Axios

Lecture 203 CSS Flexbox and Bootstrap utility classes

Section 22: OLD - Controllers, HTTP resources

Lecture 204 Vue router parameters

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

Lecture 206 Vue router links

Lecture 207 Understanding CSS grid system

Lecture 208 Laravel controllers

Lecture 209 Resource controllers

Lecture 210 API Resources

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

Lecture 211 Availability component (horizontal forms, scoped styles)

Lecture 212 Form input binding (v-model)

Lecture 213 Handling DOM events in Vue

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

Lecture 215 Booking model and relations

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

Lecture 217 Single Action Controller

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

Lecture 219 Eloquent Local Query Scopes

Lecture 220 Returning bookable availability (HTTP response statuses)

Lecture 221 Getting object availability in Vue.js

Lecture 222 Displaying form errors

Lecture 223 Final touches - displaying availability

Section 24: OLD - ReviewList Component

Lecture 224 ReviewList component markup (using responsive grid options)

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

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

Lecture 227 Review model factory & seeder

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

Lecture 229 Reviews HTTP resource (serializing model)

Lecture 230 Loading reviews in Vue component

Lecture 231 Vue filters and moment.js

Lecture 232 Star Rating component (using FontAwesome)

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

Lecture 234 Review list cleanup and section wrap-up

Section 25: OLD - Review Page

Lecture 235 Review Page component markup and route

Lecture 236 Emitting and handling custom Vue.js events

Lecture 237 Parent and child components communication

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

Lecture 239 Leaving a rating flow explained

Lecture 240 Checking if review already exists on backend

Lecture 241 Checking if review already exists on frontend

Lecture 242 Booking review key and Eloquent model events

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

Lecture 244 Creating Resource classes for booking

Lecture 245 Understanding promise chaining

Lecture 246 Displaying the booking information on review page

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

Lecture 248 Handling request errors in Vue

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

Lecture 250 Fixing a 500 error in BookingByReview controller

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

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

Lecture 253 Validation on Review sending page

Lecture 254 Reusable validation errors component

Lecture 255 Vue Mixins - how to reuse the same code in different components

Lecture 256 Async/Await explained

Lecture 257 Using async/await in Review component

Lecture 258 Vue Component Slots

Section 26: OLD - Vuex - managing global state

Lecture 259 Fixing application Vue issues

Lecture 260 Vuex introduction - managing global state

Lecture 261 Setting up Vuex

Lecture 262 State mutations - storing last search dates

Lecture 263 Reading Vuex state

Lecture 264 Binding to Vuex state

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

Lecture 266 Initializing Vuex state from the browser local storage

Section 27: OLD - Price Breakdown Component

Lecture 267 Vue Transitions

Lecture 268 Using animated icons

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

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

Lecture 271 Loading price in Bookable component and using Vuex bindings

Lecture 272 Price breakdown component

Section 28: OLD - Basket and Checkout

Lecture 273 Vuex - a basket (adding/removing)

Lecture 274 Vuex getters - how many items in the basket?

Lecture 275 Checking what's in the basket, removing from the basket

Lecture 276 Vuex getters - property vs method access, higher order functions, composition

Lecture 277 Keeping basket state in localStorage

Lecture 278 Creating a Basket/Checkout page

Lecture 279 Rendering contents of the basket and allowing removal

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

Lecture 281 Checkout form markup

Lecture 282 Address model and booking changes

Lecture 283 Checkout logic explained

Lecture 284 Validating nested fields

Lecture 285 Validating arrays of input

Lecture 286 Storing booking and address

Lecture 287 Refactoring price calculations

Lecture 288 Binding form

Lecture 289 Making a booking

Lecture 290 Empty basket state

Lecture 291 Clearing the basket after purchase

Lecture 292 Displaying booking errors

Lecture 293 Rendering purchase confirmation

Section 29: OLD - Authentication using Laravel Sanctum

Lecture 294 Laravel Sanctum

Lecture 295 Laravel Sanctum introduction

Lecture 296 Laravel Sanctum installation

Lecture 297 Sanctum configuration - domains

Lecture 298 Understanding authentication with Sanctum

Lecture 299 Authentication using Vue practical example

Lecture 300 Logic component (page) markup

Lecture 301 Login component logic

Lecture 302 Is user authenticated - local storage? (Part I)

Lecture 303 Is user authenticated - VueX? (Part II)

Lecture 304 Handling unauthenticated state (401) - using Axios interceptors

Lecture 305 Header changes and logout

Lecture 306 Fixing "is logged in" delay

Lecture 307 Registration component markup

Lecture 308 Registration component logic

Lecture 309 Bonus!

Beginners in PHP,Beginners in JavaScript