Master Laravel, Vue 3 & Inertia Full Stack 2023

35h 53m 40s
English
Paid

Course description

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.

Read more about the course

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

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 314 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing

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

0:00
/
#1: What you Will Build and Learn in This Course?

All Course Lessons (314)

#Lesson TitleDurationAccess
1
What you Will Build and Learn in This Course? Demo
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

Unlock unlimited learning

Get instant access to all 313 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription

Comments

0 comments

Want to join the conversation?

Sign in to comment

Similar courses

Vue.js + Laravel: CRUD with SPA

Vue.js + Laravel: CRUD with SPA

Sources: laraveldaily.com
Everyone wants a full-stack developer these days, with some JS framework and Laravel as API.
1 hour 50 minutes 29 seconds
Vue - The Complete Guide (incl. Router & Composition API)

Vue - The Complete Guide (incl. Router & Composition API)

Sources: Academind Pro
Learn Vue.js - in its latest version - step by step from the ground up. Learn how to build highly reactive web apps with one of the most popular frameworks!
28 hours 45 minutes 29 seconds
Vue 3 Composition API 3

Vue 3 Composition API 3

Sources: vueschool.io
Explore Vue 3 Composition API with hands-on learning. From basic concepts to advanced usage, gain a complete understanding of Vue.js component logic and state
1 hour 59 minutes 20 seconds
Reusable Components

Reusable Components

Sources: Michael Thiessen
Master the art of writing highly reusable Vue — and make the most of your components. Reusable Components is all about how to make your components more flexible
4 hours 10 minutes 42 seconds