And that's specifically why Inertia labels itself the modern monolith. But now, real quick, before we dig in and install it and have a look around, we first need to figure out what the parameters are here. So, is Inertia linked to Laravel? Because it looks like it a little bit here in this example. And the answer is no. Well, is Inertia linked to Vue? And again, the answer is no. But it does offer an adapter for Laravel, and it does offer an adapter for Vue. But if you instead prefer something like React or Svelte, that works as well.

But it does offer an adapter for Laravel, and it does offer an adapter for Vue. But if you instead prefer something like React or Svelte, that works as well. Inertia is not dependent on any one technology. But that being said, if you are a Laravel user, you're going to feel right at home here. Now, you can think of Inertia not as a replacement for Vue, or it's not a big framework on top of Vue. It's really, in many ways, just a client-side routing library that connects a server-side framework like Laravel to a client-side framework like Vue. And really, that's a good way to think of it. Inertia is the glue that connects your server-side framework to your client-side framework.

And really, that's a good way to think of it. Inertia is the glue that connects your server-side framework to your client-side framework. And the great thing is, when you do this, it allows you to continue using traditional controllers, traditional routing, traditional middleware, traditional authentication, traditional authorization. All of that stuff remains unchanged, even though you're building a single-page application. And effectively, what this translates to is, if you use Inertia, then no, you don't need to build an API. No, you don't need to use OAuth. No, you don't need multiple repositories for your API and your client-side application.

Okay, so let's have a look at the demo application before we finish up. It's called Ping, and it's a traditional CRM. Okay, so the first thing I want you to be aware of is how, when I click on these links, notice that we're not performing a traditional postback to the server. So if you have a look, you're not going to see any loading icon as I click here. And that's because, instead, Inertia is intercepting the click of these anchor tags, and instead, it submits an AJAX request to the server. So notice if I click on a link, yeah, we make an AJAX request to the given endpoint, and in response, we get a bit of JSON that contains everything our view component needs to load or refresh the current page, so to speak.

in response, we get a bit of JSON that contains everything our view component needs to load or refresh the current page, so to speak. We have information about the User, any potential flash messages, and then the data that this particular page requires, and that seems to be filters and organizations. Let's do another one. Let's go to the contacts page, which you see here. Well, again, we make an AJAX request. We fetch the content, and then Inertia uses this response to dynamically swap out the current page component with the new page component, and then Vue, as a result, will refresh the page automatically due to standard reactivity of Vue props.

current page component with the new page component, and then view, as a result, will refresh the page automatically due to standard reactivity of view props. So notice the advantage here is you only have to load your basic assets once. You're not re-fetching the CSS and the scripts and the header and the footer for every single page request like you traditionally would with a standard server-side app. And what that translates to is a much faster application. Okay. Now, the last thing I want to show you here is let's go to InertiaJS. We'll go to the GitHub page, and we're going to have a look at the ping-crm demo application. Okay.

We'll go to the GitHub page, and we're going to have a look at the ping-crm demo application. Okay. So you'll notice if we look at the routes here, these are standard Laravel routes. This should all be very familiar to you if you work with Laravel. Let's have a look at maybe, how about this one, for organizations. So that corresponds to what you see here. Okay. So when we visit this endpoint, we're going to load an OrganizationController, and then the index action. Okay.

then the index action. Okay. Now, the index action returns not a traditional Blade view like you might normally do with Laravel. Instead, we're asking Inertia to render a client-side view. But again, notice it's the same basic shape. Don't be confused here. This is just a standard Eloquent query. So we are loading a view, but not a Blade view, a client-side view, and then we are passing a set of data to it.

So we are loading a view, but not a Blade view, a client-side view, and then we are passing a set of data to it. So notice we're passing filters and organizations. Well, we saw that earlier. That's one more time. Go to the organizations page, and you'll see in response, we pass through the filters and the organizations. So this is precisely what Inertia allows for. And again, that's why the creators refer to it sort of like glue. It connects the server-side to the client-side.