This Lesson is for Members

Subscribe today and get access to all lessons! Plus direct HD download for offline use, enhances transcripts, member comment forums, and iTunes "podcast" RSS feed. Level up your skills now!

Unlock This Lesson

Already subscribed? Sign In

Autoplay

    Create Layouts with Named Vue Slots

    John LindquistJohn Lindquist

    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.

    vueVue.js
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    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.

    Discuss

    Discuss