Why components are essential in Vue - See It in Action

Why components are essential

📖 Scenario: You are building a simple webpage that shows a list of favorite fruits. Instead of writing all the HTML in one place, you want to use components to keep your code clean and easy to manage.

🎯 Goal: Create a Vue app that uses components to display a list of fruits. Each fruit should be shown using a separate component. This will help you see why components are essential for organizing your code.

📋 What You'll Learn

Create a main Vue app with a list of fruits

Create a child component called FruitItem that shows one fruit name

Use the FruitItem component inside the main app to display each fruit

Pass the fruit name as a prop to the FruitItem component

💡 Why This Matters

🌍 Real World

Websites and apps often have repeated parts like buttons, cards, or lists. Components let developers build these parts once and reuse them everywhere.

💼 Career

Understanding components is essential for frontend developer jobs using Vue or similar frameworks. It shows you can write clean, maintainable, and scalable code.

1

Set up the fruit list data

Create a Vue app with a fruits array containing these exact strings: 'Apple', 'Banana', 'Cherry'.

Vue

const app = Vue.createApp({
  // Your code here
})

Need a hint?

Use the data() function to return an object with the fruits array.

2

Create the FruitItem component

Add a Vue component called FruitItem that accepts a prop named name and displays it inside a <li> element.

Vue

const app = Vue.createApp({
  data() {
    return {
      fruits: ['Apple', 'Banana', 'Cherry']
    }
  }
})

// Your code here

Need a hint?

Use app.component to define FruitItem with a props array and a simple template.

3

Use FruitItem component in the main app template

In the main app template, use a <ul> element and inside it, use <FruitItem> with v-for to show each fruit from fruits. Pass the fruit as the name prop.

Vue

const app = Vue.createApp({
  data() {
    return {
      fruits: ['Apple', 'Banana', 'Cherry']
    }
  },
  template: `
    
  `
})

app.component('FruitItem', {
  props: ['name'],
  template: '{{ name }}'
})

Need a hint?

Use v-for="fruit in fruits" and bind name with :name="fruit".

4

Mount the Vue app

Mount the Vue app to an HTML element with the id app using app.mount('#app').

Vue

const app = Vue.createApp({
  data() {
    return {
      fruits: ['Apple', 'Banana', 'Cherry']
    }
  },
  template: `
    
      
    
  `
})

app.component('FruitItem', {
  props: ['name'],
  template: '{{ name }}'
})

// Your code here

Need a hint?

Call app.mount('#app') to start the Vue app.