Master Laravel, Vue 3 & Inertia Full Stack 2023

35h 53m 40s
English
Paid
May 1, 2024

Learn Laravel together with Vue.js in this brand new, full-stack, project based course! Learn how to create a robust API in Laravel and a Single Page Application frontend in Vue.js! As with my other courses, you will start straight away with creating a project. During the course you will build a booking page, similar to very popular online booking websites! No time wasted on so called "theory". I did by best and went extra mile, to explain everything that you need to learn by practical examples. It's not one of these courses when instructor in the first 10 hours reads the documentation out loud.

More

Topics covered include:

from Laravel: Controllers, Eloquent, Query Scopes, Model Events, HTTP resouces.

from Vue: Vue Router, Vue Components, Vuex (global state management).

Don't waste your time and money anymore, this course is the only resource you need to get up to speed with full-stack development using Laravel Framework 6+ and Vue.js!

Requirements:
  • Good command of JavaScript fundamentals
  • Good command of PHP fundamentals, including Object Oriented Programming (a must have!)
Who this course is for:
  • PHP developers looking to learn Laravel to build APIs
  • JavaScript developers wanting to start with Vue that have PHP basics
  • Laravel developers wanting to enhance their skills by learning how to work with Vue

What you'll learn:

  • Using Vue to build a Single Page Application
  • Using Laravel to build a robust API backend for any application
  • Combining Laravel with Vue to create a powerful SPA
  • Vue/API SPA Authentication using Laravel Sanctum

Watch Online Master Laravel, Vue 3 & Inertia Full Stack 2023

Join premium to watch
Go to premium
# Title Duration
1 What you Will Build and Learn in This Course? 07:54
2 How to get Help? 05:51
3 The Visual Studio Code 07:12
4 Where to Find and How to Use the Course Source Code 06:42
5 Introduction to the Udemy UI 03:26
6 Setting Up for Windows! - Section Introduction 00:22
7 Windows Installing PHP 05:51
8 Windows Installing Composer 02:49
9 Windows Installing Node.js 03:04
10 Windows Installing Docker 03:07
11 Setting Up for Mac! - Section Introduction 00:32
12 MacOS Installing Homebrew 01:49
13 MacOS Installing PHP 02:28
14 MacOS Installing Composer 01:53
15 MacOS Installing Node.js 02:26
16 MacOS Installing Docker 02:42
17 Laravel, Vue & Inertia - Section Introduction 00:32
18 What is Laravel? 02:22
19 What is Vue? 01:30
20 What is Inertia? 03:04
21 Download the starter pack! 01:27
22 Creating Laravel project 03:20
23 Adding Vue and Vite to the stack 06:42
24 Configuring Inertia.js 09:04
25 Your First SPA - Section Introduction 02:12
26 Creating first pages 13:52
27 Passing data to pages 06:02
28 Layouts 05:28
29 Reactive data in Vue 05:58
30 Persistent layouts with Inertia 04:52
31 Default layouts 03:17
32 (OPTIONAL) Using linter (ESLint), jsconfig and getting most out of VSCode 08:09
33 (OPTIONAL) Advanced JS topics (arrow functions, promises, async importing etc.) 05:41
34 Working with the Database - Section Introduction 02:05
35 Laravel Debugbar & IDE Helper 06:09
36 Connecting to the Database 07:28
37 Models and Migrations 06:09
38 Working with Migrations 06:59
39 Model Factories & Seeders 11:33
40 Querying the Database 06:31
41 Querying the Database (CHALLENGE) 03:15
42 Updating and Inserting Data, Mass Assignment 08:11
43 Resource Controller and Route Model Binding 08:25
44 Vue Directives (v-for, v-bind) & Custom Components 13:48
45 Handling Forms (useForm, v-model) 14:01
46 Handling Forms in Laravel 07:08
47 Middlewares and Sharing Data with All Pages 07:43
48 Computed Data and Conditional Rendering (Displaying Flash Messages) 08:30
49 Data Validation (Back End & Front End) 10:49
50 Edit Form 10:15
51 Deleting Data 06:31
52 Laravel Route Names in Vue 09:17
53 Adding Some Style (Tailwind CSS) - Section Introduction 01:36
54 Installing and Setting Up Tailwind CSS 07:32
55 Why Tailwind CSS? Tailwind Overview 06:20
56 Basic Styling of the App (Hands on With Tailwind) 12:08
57 Custom UI Components and Grid Responsive Design 04:39
58 Listing Details (Non-Prop Attributes) 06:15
59 Custom Price Formatting Component 06:09
60 Listing Page (Getting Even Better With Responsive Design!) + Vue Named Slots 11:49
61 Styling Forms 06:54
62 Extracting Tailwind Styles Using @apply Directive 05:47
63 Edit Form Styling 01:16
64 Progress Bar Loading Indicator 04:59
65 Styling Error Messages 03:44
66 What Are We About to Build? 01:12
67 Payment Calculator Markup (Sliders) 04:51
68 Payment Calculator Logic 06:03
69 Composables - Reusable Logic in Vue (Reactive Monthly Payment) 08:24
70 Displaying Payment Next to Every Listing (Reusing Composable) 08:56
71 Adding More Composable Members (Total Paid, Total Interest) 07:54
72 Authentication & Security - Introduction 01:35
73 Authentication Controller and Routes 07:19
74 Authentication Form Markup and Basic Logic 09:20
75 Signing-In Logic - Authentication Process Explained 14:35
76 Explaining the Authentication Process 05:46
77 Getting the Currently Logged In User 07:34
78 Logging Users Out 05:19
79 CSRF Tokens 07:10
80 Protecting Routes (Authorization) - Can You Access a Specific Page? 09:47
81 User Registration Form 08:25
82 User Registration Logic & Hashing Passwords 09:50
83 Eloquent Mutators & Accessors - Hashing Password Example 09:05
84 How Hashing of The Passwords Work 04:42
85 Form Links 02:53
86 419 Errors When Logging Out 02:32
87 Database Relations & User Authorization - Introduction 01:58
88 Creating a One-to-Many Database Relationship 08:24
89 One-to-Many Connecting Models Together - the Theory 04:38
90 One-to-Many Connecting Models - Practice 08:11
91 Every New Listing Needs an Owner! 03:05
92 Model Policies - Theoretical 04:56
93 Model Policies - In Practice 13:43
94 Model Policy and Guest Users 02:49
95 Only Owners Can Edit or Delete! 02:54
96 Admin Users - Overriding Policy Implementation 08:01
97 Reading the Related Data (Using Database Relationship) 06:49
98 Data Pagination & Filtering - Introduction 01:48
99 Adding Pagination 11:13
100 Filtering Form Markup 16:52
101 Filtering JavaScript Logic 13:42
102 Filtering the Data 07:32
103 Conditional Queries in Eloquent 08:18
104 Local Query Scopes in Eloquent 06:03
105 Filtering Using Local Query Scope 04:31
106 Realtor My Account - What We're Going to Build? 01:40
107 Controller Routes Grouping 04:56
108 Showing the Realtor Listings 16:53
109 Soft Deletes (Putting Records Into Trash - To Be Restored) 10:01
110 Soft Deleting Listings 07:59
111 Filtering Using Checkboxes - The Markup 05:37
112 Vue Watchers - Filtering Using Checkboxes 08:25
113 The Debounce Function - Handling the Events Flood 05:57
114 Filtering Using Checkboxes - The Backend Part 07:49
115 Customizable Sorting - Back End 08:23
116 Customizable Sorting - Front End 09:01
117 Filtering Form - Default Values 03:17
118 My Account Section Pagination 04:10
119 Edit, Delete and Preview Buttons 11:32
120 Restoring Models 12:47
121 File Uploading - Introduction 02:07
122 File Data Model 07:14
123 Laravel Filesystem Abstraction Explained 08:06
124 Preparing for the File Uploads 10:04
125 Uploading Multiple Images (Backend Part) 06:07
126 Uploading Multiple Images (In Vue) 09:36
127 Styling the Upload Input & UX Improvement 05:58
128 File Upload Progress Indicator 03:42
129 Displaying the Uploaded Images 07:23
130 Removing Uploaded Files 06:38
131 Displaying Listing Images on the Listing Page 01:55
132 Validating Uploaded Files (Make Sure It is an Image!) 07:55
133 Counting Related Models (How Many Images We Have?) 03:02
134 Making Offers - Introduction 03:06
135 Offers Data Model and Relations 09:00
136 Offer Widget - Adding Widget in Vue 10:38
137 Making Offer - the Backend Part 13:17
138 Vue Custom Component Events (Passing Data to the Parent Component) 10:04
139 Fetching and Displaying an Existing Offer of the Current User 11:29
140 How Many Offers Were Made? 04:56
141 Offer List Page 09:02
142 Single Listing View with All The Offers 09:49
143 Accepting Offers (Single Action Controller & Loading Nested Relations) 12:43
144 Seeing Which Offer is Sold 05:07
145 Filtering Out Sold Offers (Querying Relationship Presence/Absence) 08:04
146 Simpler Way To Identify Sold Listings (Refactoring the Query Scope!) 07:29
147 No Offer Making or Changing of Listings That Are Sold! 09:02
148 UI Improvements 05:04
149 Notifications - Informing Users About What Happened - Introduction 02:04
150 Notifications Introduction & Database Setup 04:07
151 Sending Notification When Offer is Made 08:34
152 Showing the Notification Count 10:52
153 Showing an Empty State 05:31
154 Notifications List Page Backend Part 04:17
155 Notifications List Page Front End 10:34
156 Marking Notifications as Read 13:38
157 Sending Email - Introduction 02:25
158 Local Email Testing with Mailhog (in Docker) 06:10
159 Delivering Notifications via Email 05:01
160 Registered User - Email Verification Process 09:39
161 Requiring Verification on Pages & Not Verified Notice Page 05:28
162 User Verification Route 09:57
163 Resending the Verification Link (and Understanding Throttling and Cache) 06:10
164 Testing the Email Resending Process 05:23
165 What is JavaScript? 01:56
166 Using Chrome Console to Learn JavaScript 01:12
167 Variables - var, let, const 02:12
168 Primitive Data Types 03:45
169 Data Type Gotchas 05:36
170 Functions 03:01
171 Arrays 01:42
172 Objects 02:44
173 Introduction 02:27
174 Required and optional software for the course 05:06
175 MacOS specific setup 05:15
176 Windows specific setup 00:00
177 Where to find the full source code? 03:58
178 Visual Studio Code - extensions, shortcuts and tricks 07:28
179 Creating a new Laravel project using Composer 03:41
180 Setting up Vue.js application 13:18
181 Fallback route in Laravel 05:58
182 Installing and setting up Vue Router 13:03
183 HTML5 history mode in Vue Router 04:44
184 Vue component registration (global/local) and Index component 07:39
185 Router Link component and routing inside a Vue application 02:28
186 Bootstrap, styling and Laravel Mix 04:14
187 v-bind, v-bind shorthand and named Vue routes 05:25
188 Styling the navigation bar 03:24
189 Single file Vue components 04:10
190 Child components (using components in other components) 08:53
191 Component props and prop types 09:44
192 One-way data flow 05:00
193 Lifecycle hooks 06:42
194 Component state and reactivity 11:39
195 Reactivity gotchas 07:19
196 Conditional rendering (v-if) 03:59
197 List rendering and v-else 09:02
198 Computed properties 09:53
199 Component methods 13:25
200 Setting up database 06:39
201 Specified key was too long problem 02:53
202 Model and migrations 06:38
203 Model factory, database seeder and faker 12:02
204 Routes and model all() method 07:43
205 API testing in Postman 07:48
206 Using Model::find() and mandatory/optional route parameters 06:37
207 Using Model::findOrFail() and Accept header 03:34
208 JavaScript Promises explained 13:06
209 Making HTTP requests with Axios 06:47
210 CSS Flexbox and Bootstrap utility classes 02:54
211 Vue router parameters 07:06
212 Passing all object properties as props (v-bind trick) 05:58
213 Vue router links 02:28
214 Understanding CSS grid system 05:30
215 Laravel controllers 09:39
216 Resource controllers 04:24
217 API Resources 10:16
218 Availability component (horizontal forms, scoped styles) 10:38
219 Form input binding (v-model) 03:58
220 Handling DOM events in Vue 04:48
221 Laravel Debugbar (seeing what happens behind the scenes) 03:23
222 Booking model and relations 04:55
223 Seeding bookings (generating random, non overlapping time series) 13:58
224 Single Action Controller 04:45
225 Request input validation (validating data clients send to our server) 07:23
226 Eloquent Local Query Scopes 10:42
227 Returning bookable availability (HTTP response statuses) 05:18
228 Getting object availability in Vue.js 08:06
229 Displaying form errors 09:47
230 Final touches - displaying availability 03:41
231 ReviewList component markup (using responsive grid options) 11:58
232 Review model & migration (using UUID as model primary key) 07:21
233 Review model relationships (one-to-one, one-to-many) 03:53
234 Review model factory & seeder 08:44
235 Reviews controller (using latest() query scope) 06:53
236 Reviews HTTP resource (serializing model) 04:00
237 Loading reviews in Vue component 09:55
238 Vue filters and moment.js 07:20
239 Star Rating component (using FontAwesome) 09:48
240 Star Rating component logic (calculating stars to display from average rating) 14:04
241 Review list cleanup and section wrap-up 02:49
242 Review Page component markup and route 07:44
243 Emitting and handling custom Vue.js events 09:13
244 Parent and child components communication 03:49
245 v-model explained, adding v-model support to custom components 06:33
246 Leaving a rating flow explained 07:16
247 Checking if review already exists on backend 07:45
248 Checking if review already exists on frontend 06:45
249 Booking review key and Eloquent model events 09:11
250 Fetching booking by review key (custom model methods) 07:56
251 Creating Resource classes for booking 05:37
252 Understanding promise chaining 11:45
253 Displaying the booking information on review page 10:24
254 A new API endpoint for storing a review (validation rules, complex flow) 12:05
255 Handling request errors in Vue 13:14
256 Storing a new review (using POST in axios) 05:01
257 Fixing a 500 error in BookingByReview controller 03:07
258 FatalError component (custom Vue component for unhandled errors) 04:46
259 Handling only specific errors (HTTP error codes, validation errors) 11:09
260 Validation on Review sending page 06:17
261 Reusable validation errors component 10:37
262 Vue Mixins - how to reuse the same code in different components 08:56
263 Async/Await explained 00:00
264 Using async/await in Review component 07:54
265 Vue Component Slots 08:17
266 Fixing application Vue issues 02:48
267 Vuex introduction - managing global state 05:02
268 Setting up Vuex 11:30
269 State mutations - storing last search dates 02:52
270 Reading Vuex state 02:50
271 Binding to Vuex state 06:44
272 Using Vuex actions to add side effects when committing to the store 07:46
273 Initializing Vuex state from the browser local storage 06:42
274 Vue Transitions 07:15
275 Using animated icons 03:37
276 Bookable price (controller, migration, factory), Carbon date library 09:38
277 Async/Await in Availability, emitting a custom event 06:21
278 Loading price in Bookable component and using Vuex bindings 06:16
279 Price breakdown component 09:07
280 Vuex - a basket (adding/removing) 08:03
281 Vuex getters - how many items in the basket? 06:48
282 Checking what's in the basket, removing from the basket 11:32
283 Vuex getters - property vs method access, higher order functions, composition 07:24
284 Keeping basket state in localStorage 08:54
285 Creating a Basket/Checkout page 07:50
286 Rendering contents of the basket and allowing removal 08:03
287 List transitions - animating adding/deleting to a list (v-for) 05:01
288 Checkout form markup 09:07
289 Address model and booking changes 10:58
290 Checkout logic explained 04:56
291 Validating nested fields 06:10
292 Validating arrays of input 13:41
293 Storing booking and address 11:48
294 Refactoring price calculations 07:08
295 Binding form 07:02
296 Making a booking 10:06
297 Empty basket state 04:38
298 Clearing the basket after purchase 05:26
299 Displaying booking errors 08:06
300 Rendering purchase confirmation 07:49
301 Laravel Sanctum introduction 09:26
302 Laravel Sanctum installation 06:14
303 Sanctum configuration - domains 02:25
304 Understanding authentication with Sanctum 16:44
305 Authentication using Vue practical example 05:39
306 Logic component (page) markup 11:17
307 Login component logic 07:48
308 Is user authenticated - local storage? (Part I) 07:22
309 Is user authenticated - VueX? (Part II) 13:40
310 Handling unauthenticated state (401) - using Axios interceptors 08:12
311 Header changes and logout 12:21
312 Fixing "is logged in" delay 03:14
313 Registration component markup 06:43
314 Registration component logic 06:57

Similar courses to Master Laravel, Vue 3 & Inertia Full Stack 2023

Laravel Livewire

Laravel LivewireCaleb Porziolaravel-livewire.com

Duration 11 hours 29 minutes 28 seconds
Advanced Shopify Theme Development: Liquid + Vue.js (v3.0)
The Vue 3 Bootcamp - The Complete Developer Guide

The Vue 3 Bootcamp - The Complete Developer Guideudemy

Duration 17 hours 31 minutes 14 seconds
The Vue Firebase Project Course

The Vue Firebase Project Coursefireship.io

Duration 46 minutes 28 seconds
React Js A-Z With Laravel - For Beginner to Advanced Level
Laravel 8 - Advance Course Build School Management System
PWA with Vue JS, Quasar & Firebase (with NodeJS & Express)