Learn Inertia With Jeffrey
Inertia.js allows you to build single-page applications, while still allowing Laravel to be responsible for routing, controllers, authorization, policies, and more. Think of it like the glue that connects a server-side framework like Laravel, to a client-side framework like Vue.
Despite all the hype, I'm only just now taking a first look at all that Inertia has to offer. If you're in the same position, why don't you come along and we'll learn it together?
Progress
Series Info
- Episodes
- 11
- Run Time
- 1h 30m
- Difficulty
- Intermediate
- Last Updated
- Mar 10, 2021
- Version
- Laravel 8, Inertia 0.8
Series Episodes
- Up and Running (3)
Hello Ping
Rather than browsing the documentation together (not an enjoyable watch), let's instead use Inertia's Ping demo app as a jumping-off point. In this lesson, we'll quickly discuss Inertia before installing and configuring Ping.Routing to Vue Components
With the Ping demo app now installed, let's browse the codebase. When I first learn a new app, I typically begin with the home page route. What controller does it lead to? What does the controller action return? How is the data passed to the Vue component? We'll figure all of that out in this episode.The Inertia Directive and Persistent Layouts
In this episode, we'll take a look at the@inertiadirective that the documentation tells you to add to your Blade layout file. As part of this review, we'll also run into the topic of persistent layouts.
- My Questions (8)
How Do I Manage HTML Metadata
My first question may not necessarily relate to Inertia specifically, and yet it's still something we need to figure out. If we're using a Vue component as the view for a given page, where exactly do we set the HTML metadata? As it turns out, the Ping app seems to pull in a package, called Vue-meta. Let's have a look.How Do I Share Data
Let's figure out how Ping handles shared data. If the currently signed in user's name should be available to all components, what's a good way to allow for this?How Do I Reference Named Routes
Laravel provides a usefulroute()function that fetches the URL for a particular named route. It would be nice if these named routes were available on the client-side as well. Let's figure out how Ping allows for it, using the Ziggy package.How Do I Work With Forms
The way you approach form handling largely depends on your chosen development stack. You might build classic forms for a traditional server-side app. If you, say, pull in Laravel Livewire, you'll likely wrap and process your form in a Livewire component (removing the need for a second route endpoint to catch the form submission). On the other hand, if you're building an SPA with Vue and Inertia, you'll want to submit the form as part of an AJAX call. Let's review how Ping does it.How Does Form Validation Work?
Typically when building an SPA, the AJAX call that submits the form will catch any potential 422 (Unprocessable Entity) response, and then store the validation errors in a component data property, that is then rendered for the user. Inertia takes a slightly different approach. Let's have a look.How Do I Manage Flash Messages
Any application should offer an easy way to render a flash message to the user. Now, we surely don't want to pass aflash"prop" from every controller action. Instead, potential flash messages should probably be passed automatically as part of your Inertia middleware.How Does Real-Time Table Filtering Work
Table filtering can often be a tricky thing to implement. Let's figure out how Ping manages it in this episode.How Do I Handle Policy Authorization
The final thing I'd like to review in this series is how to handle authorization from within your Vue components. We of course don't want to duplicate this logic on both the server and client-side. So it sounds like we need a way to pass policy authorization as a Vue prop.
