Advent Of Vue 2022

If you didn't get here from an email, read this section! Skip it otherwise.

Advent Of Vue is a series of 24 Vue coding challenges that are sent out every day from December 1 to December 24 via a dedicated newsletter. If you'd like to receive more of these puzzles in the future, go ahead and sign up!

Problem description

We're going to take a Christmas tree with lights, and add the final piece — the ornaments!

For this challenge you'll be updating the ChristmasTree component in order to add ornaments in two different ways:

1. Add one ornament to each tree segment
2. Add alternating colours of ornaments to each tree segment

You're provided with a couple components that you won't need to touch, but feel free to explore them:

• ChristmasLights
• ChristmasOrnament
• App (see note below)

Note: to go from part 1 to part 2 you'll need to uncomment the #even and #odd named slots in App.vue, but this is the only change you'll need to make in this file.

Hints

Open the hints.md file if you need some help!

Example of a solution in action

This is what it should look like when you're done: Solution demo

Author

Hey, it's Michael Thiessen here!

My full-time job is teaching about Vue, through articles, my weekly newsletter, and through my courses and books.

You can sign up to get weekly tips and tricks on Vue here: https://michaelnthiessen.com/newsletter

I'm on Twitter: https://twitter.com/MichaelThiessen

Here are my courses:

• Mastering Nuxt 3
• Vue Tips Collection
• Reusable Components
• Clean Components

Credits

Based on a Stackblitz project by tony19