Name: Create Layouts with Named Vue Slots
Uploaded: 2017-12-13T17:52:20-06:00
Description: Vue slots enable you to create Layout components to define where each piece of your app or component should go. The slots also support default content which will render if a named slot remains unfulfilled.

Simplify Vue Components with vue-class-component

Define Props on a Vue Class with vue-property-decorator

Place Content in Components with Vue Slots

Create Layouts with Named Vue Slots

Pass Props Between Components with Vue Slot Scope

Pass Props to Vue Functional Templates

Control Template Contents with Vue's Render Function

Avoid Semantic HTML Names for Vue Components

Write Vue Functional Components Inline

Pass Vue Render Functions as Props for Powerful Patterns

Switch Between Vue Components with Dynamic Components

Load Vue Async Components

Handle Errors and Loading with Vue Async Components

Advanced Fine-Grained Control of Vue.js Components

Vue slots enable you to create Layout components to define where each piece of your app or component should go. The slots also support default content which will render if a named slot remains unfulfilled.

https://app.egghead.io/api/v1/lessons/vue-js-create-layouts-with-named-vue-slots/subtitles

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.

Create Layouts with Named Vue Slots

Share this video with your friends

Course

Advanced Fine-Grained Control of Vue.js Components