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
})

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

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 }}'
})

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

Hint

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

Practice

1. Why are components essential in Vue applications?

easy

A. They break a large app into smaller, manageable parts.

B. They make the app run faster by default.

C. They replace the need for HTML and CSS.

D. They automatically fix bugs in the code.

Solution

1. Step 1: Understand the role of components

   Components divide a big app into smaller pieces that are easier to build and maintain.

2. Step 2: Evaluate other options

   Options B, C, and D describe incorrect or exaggerated benefits not true for components.

3. Final Answer:

   They break a large app into smaller, manageable parts. -> Option A

4. Quick Check:

   Components simplify app structure = A [OK]

Hint: Components split big apps into small parts for easier work [OK]

Common Mistakes:

• Thinking components speed up app automatically
• Believing components replace HTML/CSS
• Assuming components fix bugs by themselves

2. Which of the following is the correct way to define a simple Vue component?

easy

A. new Vue.component('my-comp', 'Hello')

B. component Vue('my-comp') { template: 'Hello' }

C. Vue.component('my-comp', { template: 'Hello' })

D. Vue.createComponent('my-comp', { template: 'Hello' })

Solution

1. Step 1: Recall Vue component syntax

   The correct syntax uses Vue.component('name', { template: '...' }) to define a global component.

2. Step 2: Check each option

   Only Vue.component('my-comp', { template: '
   Hello' })
   matches the correct Vue syntax; others have invalid keywords or methods.

3. Final Answer:

   Vue.component('my-comp', { template: '<div>Hello</div>' }) -> Option C

4. Quick Check:

   Vue.component() defines components = C [OK]

Hint: Vue.component('name', { template }) is correct syntax [OK]

Common Mistakes:

• Using wrong keywords like 'component Vue' or 'new Vue.component'
• Confusing method names like createComponent
• Omitting the object braces around template

3. Given this Vue component code, what will be displayed?

const app = Vue.createApp({
  components: {
    'greet-msg': {
      template: '
Hello, Vue!
'
    }
  }
})
app.mount('#app')

And HTML: <div id="app"><greet-msg></greet-msg></div>

medium

A. Hello, World!

B. Nothing will display

C. Error: Unknown component

D. Hello, Vue!

Solution

1. Step 1: Understand component registration and usage

   The component 'greet-msg' is registered locally inside the app and used in the HTML with the same tag.

2. Step 2: Predict rendered output

   The template of 'greet-msg' is '

   Hello, Vue!

   ', so this will appear inside the div with id 'app'.

3. Final Answer:

   <p>Hello, Vue!</p> -> Option D

4. Quick Check:

   Registered component renders its template = A [OK]

Hint: Registered component tag shows its template content [OK]

Common Mistakes:

• Thinking component must be global to render
• Expecting default text instead of template
• Confusing component name casing

4. What is wrong with this Vue component code?

const app = Vue.createApp({
  components: {
    'my-button': {
      template: 'Click me'
    }
  }
})
app.mount('#app')

// HTML: <my-button></my-button>

medium

A. Nothing is wrong; the component will render correctly.

B. Component name must be in camelCase, not kebab-case.

C. The component is missing a data function.

D. The component is not registered globally, so it won't render.

Solution

1. Step 1: Check component registration and usage

   The component 'my-button' is registered locally in the app and used with the same kebab-case tag in HTML, which is correct.

2. Step 2: Verify component requirements

   A data function is not required if the component has no reactive data. The name kebab-case is valid in templates.

3. Final Answer:

   Nothing is wrong; the component will render correctly. -> Option A

4. Quick Check:

   Local component with matching tag renders fine = B [OK]

Hint: Kebab-case names work in templates; data function optional if unused [OK]

Common Mistakes:

• Thinking kebab-case is invalid for component names
• Assuming data() is always required
• Confusing local and global registration effects

5. You want to reuse a button with different labels in multiple places. Which approach best uses Vue components to achieve this?

hard

A. Create a component that hardcodes the label inside the template.

B. Create one button component with a label prop to set the text dynamically.

C. Use plain HTML buttons everywhere without components.

D. Write separate components for each button label you need.

Solution

1. Step 1: Understand reusability with props

   Using a prop allows one component to display different labels dynamically, making it reusable.

2. Step 2: Evaluate other options

   Creating separate components or hardcoding labels reduces reuse and increases code duplication. Using plain HTML loses component benefits.

3. Final Answer:

   Create one button component with a label prop to set the text dynamically. -> Option B

4. Quick Check:

   Props enable reusable components with dynamic content = D [OK]

Hint: Use props to pass different labels to one reusable component [OK]

Common Mistakes:

• Making many components for each label instead of one reusable
• Hardcoding text inside component template
• Avoiding components and using plain HTML only