Join egghead, unlock knowledge.

Want more egghead? It's 45% off for a limited time only!

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

Unlock All Content for 45% Off

Already subscribed? Sign In

Save 45% for a limited time.

Get access to all courses and lessons on egghead today.

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