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.
In this episode, we'll take a look at the
@inertia directive 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 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.
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?
Laravel provides a useful
route() 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.
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.
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.
Any application should offer an easy way to render a flash message to the user. Now, we surely don't want to pass a
flash "prop" from every controller action. Instead, potential flash messages should probably be passed automatically as part of your Inertia middleware.
Table filtering can often be a tricky thing to implement. Let's figure out how Ping manages it in this episode.
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.