لاراول

Learn Inertia With Jeffrey

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?

سطح متوسط 11 جلسه آموزشی 06:01:00 ساعت
01
قسمت 1

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.

02
قسمت 2

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.

03
قسمت 3

The Inertia Directive and Persistent Layouts

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.

04
قسمت 4

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.

05
قسمت 5

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?

06
قسمت 6

How Do I Reference Named Routes

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.

07
قسمت 7

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.

08
قسمت 8

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.

09
قسمت 9

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 a flash "prop" from every controller action. Instead, potential flash messages should probably be passed automatically as part of your Inertia middleware.

10
قسمت 10

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.

11
قسمت 11

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.