Okay, I think we're now ready to install Inertia and begin configuring it. Now, we're going to use Laravel and Vue in this series, so why don't we start by pulling in a fresh Laravel app. I'll just call it Demo. All right, let's cd in there. And if we now visit this in the browser, of course we see the standard Laravel splash page. Okay, now let's install Inertia. If I switch back to the website, again, we need to grab two adapters. Inertia has an adapter for your server-side framework, like Laravel or Rails, and then

If I switch back to the website, again, we need to grab two adapters. Inertia has an adapter for your server-side framework, like Laravel or Rails, and then it has another adapter for your client-side framework, like Vue 2 or Vue 3 or React or Svelte. We're going to start with the server-side adapter. So we'll install the dependencies. Okay. Next we need to set up our root template. Think of this as your layout file for an Inertia app, and it should look pretty familiar other than this Inertia directive, and we'll talk about that in just a second.

Think of this as your layout file for an Inertia app, and it should look pretty familiar other than this Inertia directive, and we'll talk about that in just a second. So I'm going to copy this, and let's open this in my editor. And let's go to Resources, Views, and let's do this. I'm going to rename the welcome page to app.blade.php, and if I select everything, we can replace it with what we got from the documentation. Okay, and let's add the link. Okay, so a standard layout file. The only unique thing is this Inertia directive. And really, this is just a convenience.

The only unique thing is this Inertia directive. And really, this is just a convenience. Ultimately, it expands to something like this, a div with an ID of app, where we pass to it the initial page data. So yeah, that would be something like, and you've probably done this in your own projects at some point or another, where you json_encode a piece of server-side data, and then you pass it as a Vue prop. And yeah, really, that's it. So this is how we pass the initial page data to Inertia. Anyways, you can stick with the Inertia directive.

So this is how we pass the initial page data to Inertia. Anyways, you can stick with the Inertia directive. Same thing. Now, if I switch back to the documentation, the next thing we need to do is set up the initial middleware. And we'll talk about this more a little bit later, but it effectively tells Laravel how to provide the proper response to Inertia. So let's go ahead and run that. And if I switch to my editor, that's going to create a new app/Http/Middleware/HandleInertiaRequests.php file.

And if I switch to my editor, that's going to create a new app, HTTP, middleware, handle Inertia requests file. OK. But of course, we have to first register it in our Kernel class. And let's scroll down to your standard web middleware group, and we'll add it here. OK. And that's basically it for the server-side setup. So the next step is to set up the client-side adapter. And again, Inertia provides first-party support for React, Vue, and Vue 3, as well as Svelte. OK.

And again, Inertia provides first-party support for React, Vue, and Vue 3, as well as Svelte. OK. So I'm going to use Vue 3 here. We're going to pull in the Inertia package, and then specifically the Vue 3 adapter. So let's run that now. And while that's doing its thing, the next step is to initialize your app. Now I'm going to assume you have a basic familiarity with Vue. Even if you're not yet familiar with Vue 3, we can work through that. But mostly, you're creating a Vue app the way you normally would. You then use the Inertia plugin, and you mount it to your root element.

But mostly, you're creating a Vue app the way you normally would. You then use the Inertia plugin, and you mount it to your root element. So that sets up Vue. Then we need to set up our Inertia app, and then instruct it how to find your current page component. And we'll talk about all of this, so you don't need to feel overwhelmed if you don't quite understand what's going on here. For now, just copy and paste, and then move on. So I'm going to grab this. And of course, if I'm using Vue, I need to go ahead and pull that in through npm.

So I'm going to grab this. And of course, if I'm using Vue, I need to go ahead and pull that in through npm. And then for Vue 3, if we also want to support single-file components, which we do, then we also need to pull in one additional package. And this is just standard Vue stuff. It's not related to Inertia at all. So let's do installation through npm. And yeah, we also want to pull in this package here. Okay, so now, in my project, we'll go to resources/js/app. You'll see that requires a bootstrap file, but we're not going to use any of this right

Okay, so now, in my project, we'll go to resources/js/app.js. You'll see that requires a bootstrap file, but we're not going to use any of this right now. So we're going to delete that, and then paste in the code we got from Inertia's website. Now real quick, before we compile everything down, notice when we create our Inertia app, we tell it how to track down the current page component. And at the moment, and by common convention, we're asking it to look in a pages directory. So why don't we go ahead and create that directory now. And again, this is what I do for Laracasts as well. It's very common.

And again, this is what I do for Layercast as well. It's very common. Now the final step is to compile this down. And we're going to use Laravel Mix, as this is a Laravel site. We're compiling the JavaScript here. We're going to turn on Vue support. And it will try to figure out which version you're using, or you can hard code the version. In this case, Vue 3. And then lastly, let's turn on versioning support. And that's basically going to add a hash to your compiled files to deal with cache busting.

And then lastly, let's turn on versioning support. And that's basically going to add a hash to your compiled files to deal with cache busting. And actually on that note, in app.php, you can see this example is already configured to use Laravel Mix. So it's going to look for this file, and that will expand to a cache busted path to where that asset is located. Okay. So a little bit of setup, but you only have to do it once for a project. So let's install any remaining dependencies we have, and then we'll compile this down. All right.

So let's install any remaining dependencies we have, and then we'll compile this down. All right. And now I can run mix or npx mix. And that will pull in any required dependencies we have. Let's do it one more time. And that should compile everything down according to our configuration. And it did. So yeah, notice it compiled these two files down. Those will be referenced in your mix.manifest. And notice each one points to a path to the file, including a unique query string.

Those will be referenced in your mix manifest. And notice each one points to a path to the file, including a unique query string. So then when we use the mix helper function, that will expand to the location of those files. Okay. And that's the entire setup process. We're now done. So, of course, if we were to come back and give this a refresh, because we deleted that welcome.blade.php page, we see an error here, but that's okay. We entirely expected that.