Currently Empty: £0.00
This is a comprehensive Course which describes from Scratch as to how InertiaJs works and how to integrate it with Laravel and Vue3. The Course is based on VILT Stack.
The Course is currently divided into 4 Sections. In the first section, we will understand the Basics of InertiaJs. Some of the topics that we will cover in the initial section include:
-
Installing Laravel
-
InertiaJs Server Side Setup
-
InertiaJs Client Side Setup
-
Routing using Inertia Link
-
Using Laravel Routes in Vue Application
-
Sharing Data
-
Progress Indicator
-
Installing Breeze
-
Breeze Overview
In the 2nd section, we will start building our SPA. We will cover all the CRUD Functionality. In doing so we will cover following topics:
-
Creating UI Components
-
Pagination
-
Using Component to generate Inertia Links
-
Form Helper
-
Form Properties like hasErrors, processing, clearErrors, reset,
-
Flash Messages
-
Redirect
-
CRUD Operations
In Section 3, we will cover some advanced Topics related to InertiaJs to enhance our SPA. Some of the topics that we will cover are:
-
Partial Reload
-
Inertia Visit
-
Scroll Management
-
Preserve State
-
Authorization
-
Table Component to support Sorting
-
Conditional Scrolling
-
Active Link
-
Error Handling
-
Upload Image
In the Section 4, we are going to build our Dashboard. Building a Dashboard using InertiaJS is a bit different from building a Dashboard in a typical Vue App. we will be displaying multiple charts displayed using Chart.js. We will also use Partial Reload so that we can interact with different Components of the Dashboard.
Real World Examples are followed while explaining these concepts so that you can easily related to them. LIVE Project is being built so that you can follow the thought process and learn the best practices.
Code Files at the end of each Video as well as the Github Repo of the whole Project is shared for the reference.
Basics of InertiaJs
Building our SPA - Part 1
-
2Installing Laravel
We install Laravel 8 and set up the Database.
-
3InertiaJs Server Side Setup
We see all the steps required to set up InertiaJs on the Server Side.
-
4InertiaJs Client Side Setup
We see all the steps required to set up InertiaJs on the Client Side. We will also install Vue3
-
5InertiaJs Routes
We will see how to create Pages in Inertia JS and send back the response via Laravel and display on the Front end using Vue Component.
-
6InertiaJs Link
We will see how to set up anchor Tag in InertiaJs so that each page opens up as it does in SPA without refreshing the Browser.
-
7Using Laravel Routes in Vue
We see how to use the Routes defined in Laravel can be used in Vue replacing the need of Vue-Router. Its one of the coolest feature of InertiaJs which really speeds up the development.
-
8Share Data
We see how InertiaJs allows you to Share Global Data which can be used in the Layout or any component.
-
9Progress Indicator
We will see to configure and display Progress Indicator show as to show nice UI Effects as User browse between pages.
-
10Install Breeze
We will install Breeze Package in our Application which will take care of our Authentication Functionality.
-
11Breeze Overview
We see how the Breeze structures its Components, Layouts and Pages.
Building our SPA - Part 2
-
12Listing - Part 1
We set up our Model along with Migration, Factory and Controller and then we work on the first Page of our SPA which displays the Listing using InertiaJs.
-
13Listing - Part 2
We work on the design of our first Page using TailwindCss. We also create our First UI Component and use the existing Components provided by Breeze.
-
14Pagination
We see how we can implement Pagination using InertiaJs.
-
15InertiaJs Link Component
We come up with a technique to build all our Inertia Links so as keep our design consistent.
-
16InertiaJs Form Helper
We start working on Adding a Resource and we are introduced to InertiaJs Form Helper which helps us to quickly write our Vue Functionality. We also use various UI Components provided by Breeze.
-
17InertiaJs Form Helper - Part 2
We improve our Add Form and implement Loading Functionality and Better UI by improving error display.
-
18Reset Form
We see how we can reset our Form using InertiaJs From Helper. We also clear all the Errors from Form.
-
19Request Class
We move our Validation from Controller to Request Class in Laravel.
-
20Flash Messages
We see how we can display Laravel Flash Message in our Vue Frontend.
-
21Edit Functionality
We see how to implement Edit Functionality with InertiaJs From Helper again to our rescue.
-
22Delete Functionality
We will see how to Delete a Resource and then Redirect within Laravel
Building our SPA - Part 3
-
23Employee Functionality - Test
This is a Practice Lesson where I ask to create a Functionality based on previous Videos. Don't skip as this functionality will be used to cover many topics in this Section.
-
24Employee Functionality - Solution
I share the solution to the Last Test and discuss the approach that I took.
-
25Partial Reload
One of the killer feature of InertiaJs which covers how to load only few properties of a Component on a Page.
-
26Inertia Visit
We will see how to use Inertia Visit to make a Request from the Frontend.
-
27Preserve Scroll
We see how InertiaJs allows you to Preserve Scroll after loading a Page.
-
28Preserve State
We see what preserveState is and when to use it.
-
29Authorization
We see how to use Authorization in our Laravel using Policies and then use those same Policies on Frontend.
-
30Implementing Sorting on Listing
In this Lecture, we will update our Table Component to Support Sorting on Various Columns. We will also include Icons for Ascending and Descending Direction.
-
31Update Profile
We create the Profile update Page and cover wasSuccessful and recentlySuccessful Properties of InertiaJs Form Helper.
-
32Conditional Scrolling
We already covered maintaining Scrolling. Here we cover how to maintain Scrolling Conditionally.
-
33Active Menu
We see how to set up the Active Menu based on the current route.
-
34Error Handling
-
35Image Upload
-
36Partial Reload Fix
We fix an interesting bug in our application added via Partial Reload Functionality and fix it.
How long do I have access to the course materials?
You can view and review the lecture materials indefinitely, like an on-demand channel.
Can I take my courses with me wherever I go?
Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don't have an internet connection, some instructors also let their students download course lectures. That's up to the instructor though, so make sure you get on their good side!
Stars 5
18
Stars 4
7
Stars 3
3
Stars 2
1
Stars 1
0