Let's have a look at the Blade layout file. We haven't looked at this just yet. And it looks pretty standard. We pull in your app.js file. I see this routes directive. Now I think that's related to Ziggy, and we're going to save that for a different lesson. But right now I want to focus on this inertia directive. So I imagine this is a Blade directive that expands to the root div that your main Vue component will mount to. Let's have a look.

component will mount to. Let's have a look. Go to Firefox, refresh, view the source, scroll on down, and yeah, look right there. So that's what the inertia directive expands to. So it looks like a div with an ID of app. How does it know it should be app? We should figure that out. And then it looks like there's a data-page attribute where it passes through, yeah, the component and prop information from the controller action. I guess that's how it's passed to your Vue component.

component and prop information from the controller action. I guess that's how it's passed to your Vue component. Okay, fair enough. So now if we go into js/app.js, scrolling up, again, this looks fairly standard. A couple of things we need to look at. Real quick, let's go over it. We pull in Vue. VueMeta, that must be the package that handles, yeah, the meta information. Okay, we'll look at that later. It deals with portals.

You use the plugin the same way you always do with Vue 2. Inertia progress. I guess this is probably a progress bar. Okay, I guess that's separate, and you have to initialize that. And then, yeah, look, find the div with an ID of app. Well, that's what the Inertia directive expands to. And then we create our Vue component, and we mount it to that element. Now real quick, let's look at the render function. By the way, if you're confused by H, H stands for hyperscript, which is a way to create HTML.

you say element.dataset.whatever the second part of the attribute name is. So dataset.page. That gets parsed and saved as this initial page prop. So I bet if I open up Vue dev tools, Inertia, there it is. Initial page. And this has all the information that we passed from the LoginController. So let's have a look here. And I guess that doesn't pass anything. But if it did, I'm assuming that shows up there. And it does.

We import. Okay, so I'm guessing this is how it knows where and how to load the component you reference, right? If we say auth login, inertia needs to know, well, where am I going to find that Vue component? So I'm assuming that's what this is. Notice it's saying, okay, we're going to import from the pages directory. This would then be something like this. So it just tells inertia how to load the file and where to load the file. Quick little tip here. That @ symbol, that can sometimes be confusing.

Quick little tip here. That at symbol, that can sometimes be confusing. You need to configure that. You don't get that for free. So I bet if we go into his webpack.mix.js file, there it is. So the at symbol, it's just a common convention and webpack alias that you can see expands effectively to your resources/js directory. So it gives you a way to not always have to do things like if you're in a nested directory, but you've got to get up to the js folder, sometimes you end up doing this, you know, something like that.

but you've got to get up to the js folder, sometimes you end up doing this, you know, something like that. Instead, you can create an alias for whatever this path normalizes to, and then you can just reference your alias, whatever it happens to be. And actually a quick little tip. This is totally fine. But if you want, with Laravel Mix, you can also do mix.alias. So in this case, you do @ symbol goes to path.resolve. That would work as well. Anyways, a little mix tip there.

That would work as well. Anyways, a little mix tip there. Okay, so this all makes sense, which means if I decided to change this folder name to, you know, site or something like that, I would have to update this as well. Okay, we're getting it. So let's go back to let's let's sign in the dashboard again. Okay, so the dashboard returns a call to Inertia, it passes the component name, it passes some props. This tells us how to find that component. Inertia will then swap that out dynamically.

This tells us how to find that component. Inertia will then swap that out dynamically. And then if we have a look at dashboard.index, yeah, let's finish up by figuring out this layout file. That's the one part that's confusing me a little bit. Now don't confuse we have two layouts here, right? You have your primary Blade layout file that has your head tag, your wrapper, but then within your view components, you will often you don't have to do this, but you will often have a view layout component. And that would probably be in shared.

have a view layout component. And that would probably be in shared. Yeah. So this would have things like maybe your footer, your navigation, we can already see this is important how you can access shared data. I want to dedicate a full lesson to that, as I figure it out. And then it looks like he has access to a route. This must be no, I thought that would be Ziggy. Or is it? Is it a composer package?

Or is it? Is it a composer package? Oh, it is. Okay. So Ziggy is how he's handling routes. So that's not something built into Inertia. That's a separate package, peachystorm, that shares your, your Blade file routes with the front end. And I guess actually while we're here, I'm assuming I have never used Ziggy before, but I'm assuming it provides a directive called routes that will spit that out.

And I guess actually while we're here, I'm assuming I have never used Ziggy before, but I'm assuming it provides a directive called route that will spit that out. Let's have a look. Refresh routes. Yeah. $ziggy. And then you get your name to routes. And yeah, this is every single route. You'll see a lot of ignition stuff here, but that's fine. Let's go on to the end.

You'll see a lot of ignition stuff here, but that's fine. Let's go on to the end. Yeah. Users.edit. Yeah. So notice each one of those routes, you have the full URI, the methods. It's kind of cool. Okay. So let's see. Is it global?

So can I learn in Ziggy here? Hmm. Oh yeah. Cause that would be the homepage. Well, that's not a good example. Let's do users.create. Hmm. I'm not sure how that works. Again, this is, I can look at the documentation for two minutes. So route users, just bear with me for a minute.

And that works too. So why are we doing it the other way? What is the benefit? I'm sure there is a benefit to doing it like that. Let's have a look. Let's look for layout. While not required, it makes sense to create a site layout that your pages can extend. There's nothing Inertia specific here. This is a standard JavaScript component. Yeah, so this is what a layout file would look like.