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.


    Place Content in Components with Vue Slots


    Vue's slots enable you to define where content of a component should land when you define the content inside of a parent component. You can also name slots to arrange the elements however you'd like and allow your component to build it's own content around the content that will be placed.



    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: When we try and pass content into our app, add it just in here inside the JSX, I'll have an h2. I'll just say, "Where did I go?" When I hit save, you'll notice that "Where did I go?" simply does not show up.

    That's because in our template, we need to create a place for that to land. Right now, the root's in h1. I'm going to wrap this with a div. Now, the root is a div. Then I can tell that content to land right here, by saying slot. You can see "Where did I go?" is right there.

    Back in our index, I'm going to add a class here of text, orange, just to make it stand out a bit more. Then I configure my slots. Let's says that this has a name of footer. Then I'll have one above it which is a slot with a name of header.

    Now, "Where did I go?" will disappear again, but now, I can tell it here that I want it to show up in the header, so above, or in the footer, which is now below. If I create an h3, I'll call this footer. I'll call this header. I'll place the header in the header slot, place the footer in the footer slot, with a class of text, green.

    Hit save, and you can see we have a header and a footer where the slot names simply match up with the names here that tell them where to go.