Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.


    Create Layouts with Named Vue Slots


    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.



    Become a Member to view code

    You must be a Pro 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
    orLog In




    Instructor: 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.

    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.

    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.

    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.

    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.