Layouts Exercise

[00:00:00]
>> For this exercise, what I want you to do is to go ahead and just create some custom layouts and then practice applying it to the various pages. All right, so for this layout exercise, what I asked you to do was to create another custom layout and just apply it to another page.

[00:00:19]
So in this particular case, let's go ahead and let's create a specific layout for to do items. So what I'll do is inside of my layouts I create a new file called to do dot view. And then so inside of my file now for the index dot view.

[00:00:32]
The nice thing about this now, is that for the, let's see to do ID, so actually here you have to do is that view. This is the page I wanna wrap, because we're actually using a sub page or the next page. This means that everything gets inherited you don't even need to wrap your ID with it.

[00:00:48]
Because this is something that being wrapped by a nested view. So what we can do, is you can wrap this inside of a NuxtLayout component. And this NuxtLayout component will get a, basically what is the name to do. And then before I save it, though, let me make sure I update this it actually has something to render.

[00:01:05]
And so, what I'm gonna do actually, is I'm gonna go ahead and just grab a BULMA component just to add something a little bit more fun. So, we'll do this card right here. And then I'll just drop it inside of here. And then what we're gonna wanna do, is I'm gonna drop the slot content inside of this content directory right here, okay?

[00:01:27]
So once we save that, and we save our to do, we'll go ahead and we'll take a look. Let's go inside here, fresh. Let's go to the to dos, and then you'll notice, whoa, this card is blowing up, okay? We need to fix this layout a little bit.

[00:01:42]
This card is too big, so, what we can do, is we can say, all right, not the card. This is too much. So the card itself is gonna be wrapped in a container div. And then I'm gonna wrap it in one more section just to hopefully clean it up.

[00:01:58]
Just a smidge and once we say that, that looks better. We could shrink it in more but I think you'll get the point here, right? Is that now you can see our to do items, it's now actually sitting inside of the card, which is actually pretty nice. And so, you can imagine all the fun things you can start to do with this.

[00:02:16]
We're, yeah, so, if it's a custom item, I'm gonna do a profile pic, whatever. There's a lot of fun stuff you can start to do with layouts as a result. And so, it's a nice way of kinda having shared components, styles and stuff. And I look forward to seeing what you all do as far as playing around with.