Laravel With Inertia.Js And Vue 3 | A Practical Guide

Learn Inertia.js practically using Laravel v11, Inertia.js and Vue 3 by building multiple projects along the way

What you'll learn

Learn how to Build Single Page Applications using Laravel 11, Inertia and Vue 3

Learn how to Implement Roles and Permissions on an Inertia based App (Without using any external package)

Learn how to Build dependent dropdowns in Laravel and Vue

Learn how to Build Data-tables using Laravel, Inertia and Vue.

Learn how to build a Multiple Drag and Drop File Uploading and Processing with Laravel/Inertia/Vue

Learn how to Implement Translations in an Inertia based app.

Requirements

Beginner Level knowledge of PHP/Laravel is required

Beginner Level knowledge of Vue is required

Description

In this course, we will be Learning Inertia.js (A tool to build single-page apps, without creating any APIs)  along with Vue.js in a practical way by building multiple practical projects along the way.Inertia serves as the solution, seamlessly connecting these two components and enabling you to build everything in one application (a monolith) while achieving the same outcome. The best part? We don't have to create an API.Projects Roadmap and Status:[Uploaded] Learn Inertia[Uploaded] Flexible Flash Notifications with Inertia[In Progress] Building a Simple Student's Management System[In Progress] Implementing Roles/Permissions in Inertia-Based Applications.[In Progress] Multiple Drag And Drop File Uploading and Processing with InertiaProject Description:[Uploaded] Learn InertiaIn this section, we'll look into the basics of Inertia and some of the fundamental features of Inertia.js.Some of the topics we'll cover in this section include:Learn how to set up Laravel with Inertia and Vue Stack.Learn how to Format the data with API Resources.Learn about how to work with forms, and display validation errorsLearn how to preserve the scroll behavior, and preserve the state of the pageLearn how to implement Manual Visits and Partial Reloads in Inertia.Learn how to Implement Authorization checks (on both frontend and backend)Learn how to Customize the default Error pages and render Custom Inertia Pages (403, 404, 419 pages)Learn how to display Flash Notifications in Inertia/VueLearn how to Set up page titles and meta tags.[Uploaded] Flexible Flash Notifications with InertiaIn this Section, we'll learn how to build a flexible flash notifications feature in Inertia.By the end of the section, we'll have the ability to flash any type of notification, anywhere in our application, without repeating any code.[In Progress] Building a Simple Student's Management SystemIn this section, we'll build a simple CRUD app and dive into the fundamentals of building CRUD applications with Laravel, Inertia, and the Vue Stack, and we will learn the following topics along the way:Learn about Watchers in Vue.js and Build dependent dropdowns in Inertia/VueLearn how to work with Factories and Seeders in Laravel, and seed the necessary data for all of our ModelsLearn how to use a Re-usable Vue Component to display validation messages.Learn how to Implement Server Side Pagination from scratch.Learn how to Implement Search Functionality in an Inertia/Vue Data-table.[In Progress] Implementing Roles/Permissions in Inertia-Based Applications.We'll continue from where we left off in the previous section and implement the Roles and Permissions functionality without using any external plugins.Some of the features that we'll cover in this section are listed below:Implement Roles CRUD.Implement Authorization/Gate Checks throughout the project (on both frontend and backend)[In Progress] Multiple Drag And Drop File Uploading and Processing with InertiaIn this section, we'll build a multiple-file chunked uploader in Inertia/Vue with the ability to pause, resume, and cancel uploads.And learn the following along the way.Learn how to edit metadata (like the title and description) for each upload — even while they’re uploading and processing.Learn how to queue and process uploaded files on the BackendLearn how to Report to the client with progress updates using Laravel Reverb.And many more…

Overview

Section 1: Learn Inertia.js

Lecture 1 Introduction

Lecture 2 Install and Setup Laravel/Inertia.js and Vue.js

Lecture 3 Overview of the Project

Lecture 4 Creating Pages

Lecture 5 Title and Meta Tags

Lecture 6 Passing Data to Pages

Lecture 7 Swapping to API Resources

Lecture 8 Fixing few Issues before moving forward

Lecture 9 Form Basics

Lecture 10 Submitting Forms

Lecture 11 Showing Validation Errors

Lecture 12 Resetting Forms

Lecture 13 Clearing Validation Errors

Lecture 14 Accessing Form Processing State

Lecture 15 Manual Visits and Partial Reloads

Lecture 16 Partial Visits (and more) with Links

Lecture 17 Shared Data

Lecture 18 Making Use of Ziggy

Students who want to Build Monolith(SPA) Applications using Laravel and InertiaJS