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

    Place Content in Components with Vue Slots

    John LindquistJohn Lindquist

    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.

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

    00:14 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.

    00:30 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.

    00:49 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.

    01:17 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.

    Discuss

    Discuss