CPNT-262 Achievement 7 - Reusable Vue Components

• Due: Sunday, March 27
• Weight: 5% of the final mark

Learning Outcomes

This achievement will me marked out of 5 points where you will:

• 2 points: Card Component rendered on the index.vue page
• 1 point: props and slots properly set up
• 1 point: conditional rendering properly set up
• 1 point: Document this activity in a Code Journal section of the project README (see last step in the Instructions).

---

Instructions

Create a new repo for this assignment, in it set up a nuxt or vue project as was done in achievement 6

1. Create a reusable card component
   • title
   • text
   • cta button
   • image
   • tags
2. Set up props to pass information to the card component from the parent component/page
3. use v-if to render a tag list if it exists
4. On your parent page (index.vue or app.vue), add an array of objects that contains information for a card
   • 3 cards
   • 1 of them must not have a tag array
5. Create a code journal and discuss anything challenging that you encountered

---

Submission

1. Create a GitHub repo of your project;
2. Download a ZIP of the project;
3. In Brightspace, submit your ZIP and include the following as a comment in your submission:
   • a link to your GitHub repo;