Check out a free preview of the full Introduction to Vue 3 course

The "Components Exercise" Lesson is part of the full, Introduction to Vue 3 course featured in this preview video. Here's what you'd learn in this lesson:

Students are instructed to refactor code into components, and add slots to each components.

Preview
Close

Transcript from the "Components Exercise" Lesson

[00:00:00]
>> We've hit an exercise, excellent. All right, we covered a lot of material here. What I'm gonna give you is this hard-coded destination. We say Your Upcoming Destinations and we've got basically the HTML the way that we want it formatted. And then in the data here, we have a bunch of locations, this array with a bunch of name, image, descriptions, and things like that.

[00:00:34]
What I want you to do is create a component that displays things like this, and pass this location data in instead. So right now it's formatted in a way that, if you set it up right, you could create a component of this and pass that data in and it will output and it will look like this and kind of be set up for you.

[00:00:58]
But I also want you, at one point or another, to use a slot. Just find a place to use a slot. Try first to just make them into components. So if you get through the exercise and you just make them into components, good job. But if you get through the components part, then try to make something a slot that you're passing in as content instead.

[00:01:17]
So you're gonna make it look like this at the end.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now