Why component patterns matter in Vue - See It in Action

Why component patterns matter

📖 Scenario: You are building a simple Vue app to display a list of favorite fruits. You want to organize your code well so it is easy to read and reuse.

🎯 Goal: Create a Vue 3 component that shows a list of fruits using a clear pattern for components. This will help you understand why using component patterns matters for clean and maintainable code.

📋 What You'll Learn

Create a list of fruits as an array

Create a config variable to hold the title text

Use a FruitList component to render the fruits

Add a final template wrapper with semantic HTML

💡 Why This Matters

🌍 Real World

Organizing UI into components is how real Vue apps stay manageable as they grow.

💼 Career

Understanding component patterns is essential for frontend developer roles working with Vue or similar frameworks.

1

Create the fruits data array

Create a fruits array with these exact values: 'Apple', 'Banana', 'Cherry' inside the <script setup> block.

Vue

// Create the fruits array here
// Your code here



  

Need a hint?

Use const fruits = ['Apple', 'Banana', 'Cherry'] inside the <script setup> block.

2

Add a title config variable

Add a title variable with the exact string value 'My Favorite Fruits' inside the <script setup> block below the fruits array.

Vue

const fruits = ['Apple', 'Banana', 'Cherry']
// Add the title variable here
// Your code here



  

Need a hint?

Write const title = 'My Favorite Fruits' below the fruits array.

3

Create the FruitList component

Create a new component called FruitList inside the same file using <script setup> syntax. It should accept a fruits prop and render an unordered list <ul> with each fruit as a list item <li>. Use v-for with fruit and index as iterator variables.

Vue

const fruits = ['Apple', 'Banana', 'Cherry']
const title = 'My Favorite Fruits'

// Define FruitList component here
// Your code here



  

Need a hint?

Use defineComponent with a fruits prop and return a <ul> with <li> items using map.

4

Use FruitList component in template

In the <template>, add a <section> with a heading <h1> showing the title variable. Below it, use the <FruitList> component passing the fruits array as a prop.

Vue

Need a hint?

Wrap the content in a <section>. Use <h1>{{ title }} and then <FruitList :fruits="fruits" />.