Create Layouts with Named Vue Slots

Instructor: [00:00] Our initial render method is a bit unwieldy now, so we'll just delete all of this. Then, create a new file called layout.view and start working on the layout of our project. In our layout, we'll have a root div with three slots. This slot can be our header, our content, and our footer.

[00:25] If we go into our app, delete all of this, import our layout from layout, then drop that in our config. Tell our component that one of the components were using us called layout. Then, we'll go ahead and use our layout here. Right away, you can see an each one with the slot name of content is content goes here.

[00:56] You can see this is getting dropped into our layout, right here. Let' go ahead and add some default content to our slots. Here, we'll say please add a header with some red text and here we'll say, please add some content. You'll see nothing shows up, because we already have some content.

[01:23] Here, we'll do an h2 of please add a footer. Then in our root div, we'll go ahead and add couple classes, flux, and flux column direction, as well as the class that represents the full viewport-height. In our app, I'll just add a class, where this flux grows to fill up the remaining space.

[01:49] You can see we have header, content, footer, or if I just delete this, I could add the flux grow here, and have a complete layout set up where someone uses these component they know exactly where we think we'll go.