So now that we're using layout files, how do we deal with shared data that should be passed for every single page request? For example, if you're signed in, maybe it should say, welcome back, John Doe, right up here. Alright, well, yeah, if you think about it, let's hide the sidebar, if I go to my home page, yeah, you could pass it here. So for example, I could say, username, and of course in real life you would check if they're authenticated. But assuming they are, alright, well then, if you think about it, I'd have to go to my home view, we would have to accept it as a prop, so username is a string, and then I'd

But assuming they are, alright, well then, if you think about it, I'd have to go to my home view, we would have to accept it as a prop, so username is a string, and then I'd need to pass that to our layout component. So already this is feeling a little cumbersome. But yeah, this would be the manual way, and then down here, same thing, we're accepting that prop again. Finally, I can use it. So maybe something like, welcome back, username. And then finally, because we have a display of flex on this header, let's wrap this within a div and reformat.

And then I'm basically just resetting what we already did. Okay, so now we're not passing any information about the current user. Instead, we're going to do that as part of a middleware. Now you remember when we installed Inertia, we added, or Inertia added, a handleInertiaRequests middleware. I think it's time to have a look at this. So if I scroll down, this is the interesting part. Define the props that are shared by default. And you'll see we have an empty array, which makes sense for a new project. But it does merge in any data from the parent method.

And you'll see we have an empty array, which makes sense for a new project. But it does merge in any data from the parent method. So if I go on up, we can see, ah, so initially, any applicable validation errors will be shared by default, which is why, if I come back and take a look at Vue DevTools, in the initial page, you'll notice that you always have information about the errors. Now you know why. It's being passed automatically by Inertia. Okay, but we can add our own set of data. So if I set foo to bar, and come back and give this a refresh, now I can access it here. foo is bar.

So if I set foo is bar, and come back and give this a refresh, now I can access it here. foo is bar. And notice, if I go to, let's say, settings, give it a refresh, I'm still going to have access to foo. Okay, so incredibly convenient, but also, at the same time, you need to be very thoughtful about this. You don't want to pass more data than you actually require, because, again, this is being shared for every request. Okay, so we could do that username thing, but it's also quite common to namespace it. And that's because you could imagine for another page on your site, at some point, a username

Okay, so we could do that username thing, but it's also quite common to namespace it. And that's because you could imagine for another page on your site, at some point, a username prop is being passed. And in that case, there will be a conflict, of course. So if we namespace it, and again, this is a common Inertia convention, you might end up with something like this. The auth, user, and then maybe username. And again, I'll hard code that to John Doe. Okay, this is looking good. So now, think about it, regardless of which page I'm on, I now have access to an auth.

Okay, this is looking good. So now, think about it, regardless of which page I'm on, I now have access to an auth prop that contains information about the current User. And of course, if you're building a Laravel app, you could do something like this, but you need to be super careful about this. Remember, anything you pass here is being sent to the client side. So if you have columns on your users table that you don't want the end user to see, maybe information, I don't know, maybe a token or information about their subscription status or notes or things like that, well, with what you have here, it's getting sent to the client side, which means they can see it if they want to inspect DevTools.

or notes or things like that, well, with what you have here, it's getting sent to the client side, which means they can see it if they want to inspect DevTools. So again, as a rule, only pass the data that you absolutely need. You can do this by being explicit, like we've done here, or you can leverage Laravel's API resources, and we'll have a look at that as well. Anyways, hard coding it for now will do the trick. So if I switch to my layout file now, again, I don't have to declare a prop or anything like that. I can access it directly off of the page component. Again, notice initial page.

I can access it directly off of the page component. Again, notice initialPage. And we'll use page, which is a shared property that Inertia provides, and it gives us access to that initialPage. Go into the props, go into auth, go into user, and grab the username. And that should do it. So come back, give it a refresh, and sure enough, we see John Doe. And yeah, that's confusing. Remember, we're going right down the list there. Give me the page, then go into props, then go into auth, then go into user, and then

Remember, we're going right down the list there. Give me the page, then go into props, then go into auth, then go into user, and then go into username. Or don't forget, if you're going to be accessing this in multiple places, you could also have a computed prop. So for example, username would return, and same thing, page.props.auth.user.username. And just remember right here, it's squawking because we want to access it off of the current instance if we're using it here. Okay, so now you could bring this back to username, and you're going to get the same thing.