Build Modern Laravel Apps Using Inertia.js

Build Modern Laravel Apps Using Inertia.js

Inertia.js, created by Jonathan Reinink, is an incredible tool that glues a server-side framework, like Laravel, to a client-side framework, like Vue. Think of it as a new way to build traditional server-driven applications. With Inertia, you can continue using server-side routing, and controllers, and authentication, and validation. With Inertia, you don't need to learn how to build an API, and you definitely don't need to use OAuth. Instead, relax and continue creating apps the way you traditionally would.

I really think you're going to enjoy Inertia as much as I do. In fact, Laracasts itself uses Inertia under the hood; I wouldn't have it any other way. So let me show you everything I know about building modern apps with Laravel, Vue, and Inertia.js in this series.

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

What is Inertia.js

Before we install Inertia.js and have a look around, let's first take five minutes to discuss what Inertia actually is and, more importantly, isn't.

قسمت 2

Install and Configure Inertia

We're now ready to install and configure Inertia. In this episode, we'll closely following the Inertia docs, as we pull in the server-side and client-side adapters for Laravel and Vue, respectively. We'll next create the initial layout file, and then compile our assets down using Laravel Mix.

قسمت 3


Now that we've installed and configured Inertia, we can now create our first Page component. You can think of these as the client-side equivalent of a typical Blade view. Let's have a look.

قسمت 4

Inertia Links

Let's now create a few pages that we can seamlessly link between. But as you'll quickly see, we can't use a standard anchor tag to link from one page to the next. That would perform a full page refresh, which we of course don't want. Instead, we should pull in Inertia's Link component, which will intercept the click and automatically perform an AJAX request to the server to fetch the appropriate JSON response for the new page.

قسمت 5

Progress Indicators

If, for any reason, a server request takes a bit of time to prepare the appropriate response data, the user will currently be left waiting without an ounce of feedback. To remedy this, we can install Inertia's progress indicator package, which will display a familiar loading bar at the top of the page for any long-running request.

قسمت 6

Perform Non-GET Requests

We can also use Inertia's Link component to perform non-GET requests. For example, what if we want to render a button that submits a POST request to log the user out. How might we do that, when using the Link component?

قسمت 7

Preserve the Scroll Position

You'll often want to make an Inertia request to the current page in order to retrieve updated data. However, by default, any clicked link will of course reset the scrollbar's position to the top of the page. In situations when that's not desirable, we can leverage the preserve-scroll attribute on the Link component.

قسمت 8

Active Links

Next up, we should receive active links. At the moment, if you click any of the items in the navigation bar, there isn't any visual indication that you did in fact select that link. Let's fix that by leveraging both the $page.url and $page.component properties that Inertia provides to us.

قسمت 9

Layout Files

We can finally move on to layout files. At the moment, every page must manually import and render the navigation section. But, clearly, this isn't ideal. Instead, let's extract a Layout file that can be responsible for all portions of the UI that should remain consistent as we browse from page to page.

قسمت 10

Shared Data

Now that we've successfully extracted a Layout component, the next thing we need to sort out is how to share data across components. Luckily, Inertia provides a nice and friendly solution that we'll review in this episode.

قسمت 11

Global Component Registration

Before we move on to persistent layouts in the next episode, first I'd like to quickly discuss global component registration. For example, it's slightly combersome to import Inertia's Link component every time you want to render what is effectively an anchor tag. If you wish, we can solve this by registering it as a global component.

قسمت 12

Persistent Layouts

Currently, layout state is reset each time we click from page to page. This is because every page component includes the Layout as part of its template. As such, when you visit a new page, that component, including the layout, is destroyed. If you instead want state from your layouts to persist across pages - such as for a podcast that continues playing as your browse the site - we'll need to review persistent layouts.