Okay, so we now know whatever information we pass into the prop argument of our inertia render method

is passed directly into the props of our page component. But what about information that we need to pass globally or in middleware and things like that? Well, in the last lesson, whenever we were taking a look

at the CTX inertia property, we saw that there was a share method inside of here. And just like with EdgeJS, this allows us to add an object with a key value pair of any information

that we want to share into our actual pages. So we could say shared from routes through for that, and now shared from route will be shared

along with our page render and via our props. So with the share now in place, we could add that into our defined props paired from route. The type of that is Boolean.

We can plop in another comma and add our shared from route into our render as well. Take a look at that real quick in our browser. And sure enough, there's the true from that right there.

Can also see that directly in the props of the view def tools right down here. All right, let's hide that back away. Now there are use cases where you'll want to reach for that inside of your route

and instances where maybe you need to conditionally add data into your page before you actually get down to your render call. But for the most part, this is gonna be really useful inside of middleware. So if we jump back into our terminal,

give this a stop, clear it out, node is make middleware. And we'll call this share example. We'll add this as a router middleware so that it runs with any route

that's matched against for a request. And there we go. Let's now edit our middleware and edit it to the kernel. So we can jump back to our file explorer, go up to app middleware,

and there is our share example middleware. We'll go ahead and click on that to open it up in the right hand panel that we have in here in our text editor. And you'll see that we also have access to our HTTP context right here.

So we can do CTX inertia share, just as we had done in our route handler. So we can do shared from middleware and say maybe from middleware for this one

so that we can tell the difference. I'm gonna go ahead and plop this down onto the lines and we can add in shared from middleware. And this one is of type string.

So let's add ourselves another comma, shared from middleware, give it a save. Let's open up our browser and take a look at what we got. Give it a refresh. All right, we stopped our server. Jump back into the terminal.

Let's boot that up, npm run dev. Okay, there we go. Let's give that a refresh now. And there we go. So now we got here, true, which is shared from our route handler and then from middleware, which is shared from our middleware.

Awesome. So, so far, so good. Let's hide that back away. Now, what if we wanna share data globally, but we don't wanna have a middleware specifically to do so? Well, if we open our Explorer back up here,

go down to config, we have an inertia config right here. Let's open that up and take a look at it. Hide the Explorer back away. And you're gonna notice a couple of things.

First and foremost, we have a root view right there. The value of this root view is the EdgeJS page that's used to actually render out the mounting element

for our view application or whatever front end it is that you're using. So if you were to want to change the name of that at all, this is where you could do so. Then jumping down to the bottom,

we have an SSR section. This just flags whether or not SSR is enabled. And it also points to the entry point script specifically for SSR.

In between those two, we have shared data. This is information that we can share globally across all pages within our EdgeJS directly into our view application.

You'll see that we already have a value here for errors. The value of this is coming straight from our session, flash messages with the key of errors. So this is literally just our validation errors.

If we were to have a validation, runs into an error, the flash messages that we get back for those errors are directly inside of there. So we're sharing those globally

inside of a key called errors within our view application. Within the shared data object, we can either provide direct values or we can use a callback function to get access to the HTTP context

to do per request sharing if need be. So here the flash messages are being shared specifically for one individual request. It's not being shared for everybody.

It's specific to the HTTP context of this request. If however, we had a set value that we wanted to share with everybody, we could just add that in as a simple key value pair

without a callback function. So shared globally from config, like so. Add that now into our page props.

So shared globally, that too is a string. We can add that into our render as well. Shared globally. Let's check out our page once more. It's gonna refresh and there we go.

So now we have true coming from the share inside of our route handler, from middleware coming from our middleware share, and then from config coming from our global configuration share.

Since errors is null, that's being omitted altogether. Otherwise we would take a look at that. We'll take a look at that later on whenever we get the validations. But if we take a look at our props, you can see it's not in there,

but all of our other data is. Now there are types for this. With view, those are a little hindered, but down at the bottom of our configuration, you'll see that we have this shared props type.

The default value from this is gonna be inferred from our initial config, specifically for the shared data. So anything that you add to your shared data will be inferred and automatically added

to the shared props type. And this type is available within the AdonisJS inertia types namespace. Now you might be thinking, okay, cool.

So I can just do something like an shared props, import that, import's all wrong there. Let's fix that real quick.

Import type shared props from at AdonisJS inertia types, like so. However, with view, the key and the type

needs to be explicitly defined within the object of the defined props for it to be picked up. Unfortunately, that means that the shared props here isn't going to expand in and automatically include

all of our shared data. To my knowledge, this explicitly just hinders Vue.js. If you're using React, Svelte, and the like, you'll be able to just use shared props like we are here.

So for example, if I give this a save and we get rid of our shared globally and we do const props equals, and we take a look at what actually comes back here.

So props dot, you can see that we still have shared globally because that's actually inside of the shared props type. However, if we were to actually try and render this out, take a look at our browser

and take a look specifically at our registered page props, you'll see first and foremost, inside of the actual render, we don't have that global share right up here. But furthermore, if we take a look

at the actual stateful information that we have, our props contains all of our other shares except for our global one that's hindered down here in our attributes.

This is noted on the AdonisJS documentation. So with Vue, if you do need to use your shared props, you'll want to explicitly add that into the type of the defined props

like we were doing before, and it will work a-okay. Alternatively, you can also access the props from the page using the InertiaJS use page composable.

So we could make use of that. So const page equals use page and import that from InertiaJS Vue 3.

And then we'll type in this with our shared props like so. Oop, got a double import there. Let's get rid of one. There we go. Now, if we do page dot,

you'll see that we have access to our component props, remember state, scroll regions, URL, and versions. If you're paying attention, you'll notice that that schema looks relatively similar

to the Inertia page initial page data. And that's because that's exactly what it is. The only difference is instead of being the initial page, whenever we call use page here,

this is our live page data that's updated and kept in sync with our page for the specific request that we're on. So we could do page dot, get access to our props via props.

And there you'll see that now we have shared globally. So we could do shared globally there and get access to it as well. And this works as well if we were to try and render that out.

So if we drop our page props shared globally, just like so, get rid of it inside of our props altogether, you'll see that we get back the exact same thing if we jump back into our browser,

where from config renders out a okay. All right, so we now know how we can share some stuff globally within Inertia as well. We haven't really put it into much practice. We've just kind of tested around and played with it,

but further on down the road, we'll actually put this into practice and use some information globally as well.