00:05
So in the last lesson, whenever we added our layout in, that's referred to as the default layout. It's being applied to all of our pages by default via
00:13
our inertia page component resolve method. If we take a look at the actual props provided to our layout, you'll see that we do have access to our prop information
00:21
being provided from our server as well here. This too is also cascaded down through to our page. So we have the same access to our props inside of our layout as we do in our page.
00:31
So we don't need to worry about cascading things through, it's just going to automatically happen for us, which is awesome. But now, as mentioned in our last lesson and whenever we were walking through the application as well,
00:41
we're going to have one layout for our authentication, which we have applied already. And then we're going to have a completely separate application shell for
00:48
the actual app content so that we can manage our organization, our account, and the like. So how do we go about having both a default layout and applying a different layout for some pages as well?
00:58
Well, this comes back to our application resolve function again. So here we're inside of our app.ts file, and we're specifically going to be paying attention to our resolve function.
01:06
What we're doing to apply our default layout is setting our page default layout property to the component that we want to use for our layout.
01:13
But we can also specify a layout property inside of our page components as well, which will give us a way to specify a particular layout that we want to use.
01:21
So prior to setting our off layout, we can instead apply a check to see whether or not layout is already provided and use that instead.
01:29
And that would merely be page.default.layout and then add in an or, or use the off layout. So if page default layout is truthy in any way,
01:38
that will get used to return back and reapply to our page default layout. Otherwise, if page default layout is not applied in any way,
01:45
we'll then use our off layout to apply it into that layout property. Now, of course, we also need to do this inside of our ssr.ts file, and this looks the exact same.
01:53
So we'll do resolved page.default.layout or or use our off layout. And I accidentally snuck an extra D at the end of page there. Let's get rid of that.
02:03
There we go, that looks good. And with that changed inside of our app, nothing will currently change because we're still not applying an actual layout inside of our pages to be used instead.
02:12
So everything looks the same here despite that change. So we can hide that back away. And it looks the same because we're not actually setting this resolved page
02:19
default layout or page default layout in any way inside of our actual pages. So how do we go about doing that? Well, before we actually set that, we need something else to set it to. So let's create another layout.
02:28
And since we need an app layout at some point in time, let's go ahead and create a file for that. So we'll do app layout.view. And for this, we'll just do a template and we'll do another div.
02:37
And then we'll do just an h1 that says app layout to make it evident that we are looking at the app layout. Then we'll do another div with our spot inside of it right now.
02:45
So let's jump back into our app.ts file now. And throughout our application, we're actually going to want the app layout to be our default layout. So let's switch from using auth here to app,
02:54
replace auth over here in our import to app as well. And then replace our default down here with app too. And then just like any other change inside of our app,
03:03
we need to jump back over to our SSR and do that there too. So switch that with app, app here as well. And then lastly, app for the actual component down there too.
03:11
Now with that saved, if we jump back into our browser, we will expect to see some form of a change because our navigation is going to be gone. And all that we'll see is app layout from the actual layout shell.
03:20
Cool. And we see that for both our login and our register pages. Okay. So that's now our default layout. Now we can jump into our actual login and register pages
03:30
and specify that we instead want to use the auth layout as those are authentication pages. And this is going to look different depending on whether or not you're using the options API
03:39
or the setup script. So first, if you're using the options API, this is rather straightforward. So let's say that we have export default and we're returning back our typical object here.
03:49
All that you would need to do is apply a layout property on that object, import the layout that you want to use. So auth layout, and I hit tab and then imported it down here, but that's okay.
03:58
So import that auth layout just like so, and then apply that component to that property. And then we also need to specify that this is linked. Yes. And believe it or not,
04:07
Vue actually does support multiple scripts. So we can go ahead and test this out and it will work. So if we jump into our browser, we applied this on our login page. So we'll go into our login page
04:15
and you can see now we're using our auth layout here, but the default layout is still being used on our register page of app layout. So we can see the differentiation there
04:23
and that's how you can apply it using the options API. So if we had our browser back away, let's now cover how we can set it with the setup script because in no way do we need to specify
04:33
two separate scripts just to change the layout. That used to be the case, but it is no more. So first we want to move our import down to our script with the setup tag on it.
04:42
And then we can get rid of this script altogether. Just like define props, there is a global view method called define options that we can use to specify options
04:51
on the underlying returned view object for our page component here. So we can apply in a define options and this accepts in an object.
04:59
And we can apply any of our page options to this. And this will in turn act as though we are setting it on the options API object directly.
05:07
So we can apply our layout of off layout and it will behave the exact same as the options layout approach that we just saw earlier. So we can give this a save, jump back into our browser.
05:16
Our page components went away there, but if we give it a refresh, everything will go back to working. And we can see our off layout is still being used and working a-okay. If we jump back over to our register page,
05:25
it's still using the default app layout. Back to login, everything's still working. Ideally though, we would be using that on all of our off pages. So what we want to do is just copy that
05:34
and paste it into our register page here as well. At present, our script tag is empty. So we can go ahead and just paste that into there. We jump back into our browser.
05:43
We can now click between our login and register and they both are back to having a layout. Furthermore, since we aren't applying the layout inside of our page,
05:51
but the layout actually wraps our page, the layout isn't re-rendering every time that we go from page to page here. It's being maintained between these two pages.
