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