AdonisJS + InertiaJS
8 Lessons
59 minutes
In this series, we'll learn how to integrate, configure and use InertiaJS within an AdonisJS project. In this series, we'll be using Vue 3 as our client-side framework. We'll look at things like authentication, form submissions, redirects, and more.
How To Add InertiaJS to a New AdonisJS Project
In this lesson, we'll create a new AdonisJS project, then install and configure InertiaJS with Vue 3 using the InertiaJS-AdonisJS adapter.
Understanding The Flow Between Adonis, Inertia, and Vue 3
In this lesson, we'll be inspecting the request flow from Adonis through Inertia and to Vue for both initial and subsequent requests.
Creating Layouts and Defining Default Layouts
In this lesson, we'll learn how to create and define layouts within our AdonisJS and InertiaJS app. We'll also learn how we can easily add support for default layouts as well.
Adding TailwindCSS to our Adonis, Inertia, Vue Application
In this lesson, we'll learn how to add TailwindCSS to an Adonis, Inertia, and Vue 3 application using Webpack Encore.
Naive UI and Vue 3 Component Import on Demand
In this lesson, we'll be installing Naive UI, a Vue 3 component library, to our Inertia and Vue 3 application. Then, we'll set up Import on Demand so components will auto-resolve as we use them.
Simplifying Imports with Path Aliases & Global Components
In this lesson, we'll learn how to add a path alias with Webpack Encore to eliminate relative paths from our client-side imports. We'll also learn how to register global Vue 3 components.
Introducing InertiaJS Forms & The InertiaJS Form Helper
In this lesson, we'll learn about InertiaJS and how it differs when it comes to forms. We'll see how it helps simplify response handling and treats forms as a hybrid between APIs and a Monolith. We'll also learn about Inertia's form helper.
Form Validation Error Handling
In this lesson, we'll see just how nice InertiaJS is when it comes to form validation error handling. As you'll see, little work needs to be done on our part.