Learn InertiaJs using Laravel and Vue

We install Laravel 8 and set up the Database.

We see all the steps required to set up InertiaJs on the Server Side.

We see all the steps required to set up InertiaJs on the Client Side. We will also install Vue3

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.

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.

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.

We see how InertiaJs allows you to Share Global Data which can be used in the Layout or any component.

We will see to configure and display Progress Indicator show as to show nice UI Effects as User browse between pages.

We will install Breeze Package in our Application which will take care of our Authentication Functionality.

We see how the Breeze structures its Components, Layouts and Pages.

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.

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.

We see how we can implement Pagination using InertiaJs.

We come up with a technique to build all our Inertia Links so as keep our design consistent.

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.

We improve our Add Form and implement Loading Functionality and Better UI by improving error display.

We see how we can reset our Form using InertiaJs From Helper. We also clear all the Errors from Form.

We move our Validation from Controller to Request Class in Laravel.

We see how we can display Laravel Flash Message in our Vue Frontend.

We see how to implement Edit Functionality with InertiaJs From Helper again to our rescue.

We will see how to Delete a Resource and then Redirect within Laravel

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.

I share the solution to the Last Test and discuss the approach that I took.

One of the killer feature of InertiaJs which covers how to load only few properties of a Component on a Page.

We will see how to use Inertia Visit to make a Request from the Frontend.

We see how InertiaJs allows you to Preserve Scroll after loading a Page.

We see what preserveState is and when to use it.

We see how to use Authorization in our Laravel using Policies and then use those same Policies on Frontend.

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.

We create the Profile update Page and cover wasSuccessful and recentlySuccessful Properties of InertiaJs Form Helper.

We already covered maintaining Scrolling. Here we cover how to maintain Scrolling Conditionally.

We see how to set up the Active Menu based on the current route.

We fix an interesting bug in our application added via Partial Reload Functionality and fix it.

We will build the Dashboard where we will display multiple Charts. Each Chart will be a separate Component and created using Chart.js Library. We will be using Partial Reload to Generate our Dashboard.

We finish the Dashboard that we started in the Previous Video.