Generic components in Vue - Mini Project: Build & Apply

Building a Generic List Component in Vue

📖 Scenario: You are creating a reusable list component in Vue that can display any type of items. This helps you avoid rewriting similar code for different lists in your app.

🎯 Goal: Build a generic Vue component called GenericList that accepts a list of items and a slot to render each item. Use this component to display a list of fruits.

📋 What You'll Learn

Create a Vue component named GenericList that accepts a prop items which is an array.

Add a configuration variable listTitle to hold the title of the list.

Use the v-for directive with item as the iterator variable to loop over items inside the component.

Use a default slot inside GenericList to render each item.

In the main app component, use GenericList to display a list of fruits with the title Fruits List.

💡 Why This Matters

🌍 Real World

Generic components help you write less code and reuse UI parts in many places, like lists, tables, or cards.

💼 Career

Understanding generic components is key for frontend developers to build scalable and maintainable Vue applications.

1

Create the GenericList component with items prop

Create a Vue component named GenericList with a prop called items that expects an array.

Vue

// Define the items prop as an array
// Your code here



  
    
  

Hint

Use defineProps to declare the items prop as an array.

2

Add a listTitle variable for the list heading

Add a variable called listTitle and set it to the string 'Fruits List' inside the GenericList component.

Vue

import { defineProps, ref } from 'vue'

const props = defineProps({
  items: Array
})

// Add listTitle variable here
// Your code here



  
    
  

Hint

Use ref to create a reactive variable listTitle with the value 'Fruits List'.

3

Use v-for to loop over items and render slot content

Inside the GenericList component template, use v-for with item as the iterator variable to loop over items. Render the default slot passing item as a slot prop.

Vue

import { defineProps, ref } from 'vue'

const props = defineProps({
  items: Array
})

const listTitle = ref('Fruits List')



  
    
    
  

Hint

Use v-for="item in items" on the <li> and pass item to the slot with :item="item".

4

Use GenericList in main app to show fruits with title

In the main app component, create a fruits array with 'Apple', 'Banana', and 'Cherry'. Use the GenericList component passing fruits as the items prop. Add a heading that displays the listTitle from GenericList using a template slot.

Vue

import GenericList from './GenericList.vue'

// Create fruits array here
// Your code here



  
  

Hint

Import GenericList, create a fruits array, and use <GenericList :items="fruits"> with a default slot to display each fruit.