Back Button Frameworks
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?

Intermediate
11 episodes
1h 30m
11
Latest Episode in This Series

Added 3 months ago

How Do I Handle Policy Authorization

The final thing I'd like to review in this series is how to handle authorization from...

Watch
Learn Inertia With Jeffrey

Learn Inertia With Jeffrey

Version: Laravel 8, Inertia 0.8

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?

Begin
11
Latest Episode in This Series

Added 3 months ago

How Do I Handle Policy Authorization

The final thing I'd like to review in this series is how to handle authorization from within...
Watch

Your Teacher | Jeffrey Way

https://laracasts.s3.amazonaws.com/avatars/jeffrey-avatar.jpg's avatar
Hi, I'm Jeffrey. I'm the creator of Laracasts and spend most of my days building the site and thinking of new ways to teach confusing concepts. I live in Orlando, Florida with my wife and two kids.
  1. Section 1 Up and Running

    1. Free Episode Run Time 5:07 View Source

      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.

    2. Free Episode Run Time 14:28

      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.

    3. 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.

  2. Section 2 My Questions

    1. Free Episode Run Time 5:31

      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.

    2. Free Episode Run Time 7:55

      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?

    3. Free Episode Run Time 5:50

      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.

    4. Free Episode Run Time 7:44

      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.

    5. Free Episode Run Time 3:59

      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.

    6. Free Episode Run Time 4:56

      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.

    7. Free Episode Run Time 19:02

      Table filtering can often be a tricky thing to implement. Let's figure out how Ping manages it in this episode.

    8. Free Episode Run Time 5:23

      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.