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.

Practice

1. What is the main benefit of using generic components in Vue?

easy

A. They allow reusing one component for different data types.

B. They automatically style components without CSS.

C. They replace the need for Vue Router.

D. They make components load faster by default.

Solution

1. Step 1: Understand generic components purpose

   Generic components are designed to be reusable with different data types, so you don't rewrite similar components for each type.

2. Step 2: Compare options to this purpose

   Options B, C, and D describe unrelated features. Only They allow reusing one component for different data types. matches the core benefit of generic components.

3. Final Answer:

   They allow reusing one component for different data types. -> Option A

4. Quick Check:

   Generic components = reuse for many data types [OK]

Hint: Generic means reusable for many types, not styling or routing [OK]

Common Mistakes:

• Confusing generic components with styling features
• Thinking generic components handle routing
• Assuming generic components improve load speed automatically

2. Which syntax correctly defines props with a generic type in a Vue 3 component using TypeScript?

easy

A. const props = defineProps(['item']);

B. const props = defineProps<{ item: T }>();

C. const props = defineProps<T>();

D. const props = defineProps({ item: String });

Solution

1. Step 1: Recall TypeScript generic prop syntax in Vue

   Using defineProps with a generic type requires specifying the prop shape with a type parameter, like { item: T }.

2. Step 2: Analyze each option

   const props = defineProps<{ item: T }>(); correctly uses defineProps<{ item: T }>(). const props = defineProps<T>(); misses the prop shape object. const props = defineProps(['item']); uses string array syntax, not generic. const props = defineProps({ item: String }); uses a fixed type, not generic.

3. Final Answer:

   const props = defineProps<{ item: T }>(); -> Option B

4. Quick Check:

   Generic props need object shape with type parameter [OK]

Hint: Generic props need object shape with type parameter in defineProps [OK]

Common Mistakes:

• Using array syntax instead of type object for generic props
• Omitting the prop shape object in defineProps
• Using fixed types instead of generics

3. Given this generic Vue component snippet, what will be the rendered output if item is a string "Hello"?

const props = defineProps<{ item: T }>();
const item = props.item;
return <div>{typeof item}: {item}</div>;

medium

A. Runtime error due to missing type

B. <div>object: Hello</div>

C. <div>number: Hello</div>

D. <div>string: Hello</div>

Solution

1. Step 1: Understand the typeof operator on the prop

   The typeof operator returns the type of the value at runtime. Since item is "Hello", a string, typeof item is "string".

2. Step 2: Determine the rendered output

   The returned JSX renders a div with text: "string: Hello".

3. Final Answer:

   <div>string: Hello</div> -> Option D

4. Quick Check:

   typeof 'Hello' = string, so output matches [OK]

Hint: typeof a string value returns 'string' in output [OK]

Common Mistakes:

• Confusing typeof result with the value itself
• Expecting object or number type for string value
• Assuming runtime error without type issues

4. Identify the error in this generic Vue component code:

const props = defineProps<{ item: T }>();
const item = props.item;
console.log(item.value);

medium

A. Accessing value assumes item is a ref, but it may not be.

B. Missing import of defineProps causes syntax error.

C. Generic type T must be declared before use.

D. Props must be defined as an array, not an object.

Solution

1. Step 1: Analyze usage of item.value

   Accessing value is valid only if item is a Vue ref. The generic type T could be any type, so item might not have value.

2. Step 2: Check other options

   Missing import of defineProps causes syntax error. is incorrect because defineProps is globally available in Vue SFCs. Generic type T must be declared before use. is incorrect because T is assumed declared in the generic context. Props must be defined as an array, not an object. is wrong because props can be defined as an object type.

3. Final Answer:

   Accessing value assumes item is a ref, but it may not be. -> Option A

4. Quick Check:

   Accessing .value requires ref type, generic may not be ref [OK]

Hint: Only refs have .value; generics may be plain values [OK]

Common Mistakes:

• Assuming generic type is always a ref
• Thinking defineProps needs import in SFC
• Believing props must be array, not object

5. You want to create a generic Vue component that accepts a list of items of any type and renders each item with a slot. Which approach correctly applies generics and slots together?

hard

A. Use defineProps(['items']) and render items directly without slots.

B. Use defineProps<{ items: any[] }>() and hardcode item rendering inside component.

C. Use defineProps<{ items: T[] }>() and a default slot with v-for passing each item as slot prop.

D. Use defineProps<{ items: T }>() and render items without looping.

Solution

1. Step 1: Define generic props for list of items

   Using defineProps<{ items: T[] }>() correctly types the prop as an array of generic type T.

2. Step 2: Use slots with v-for to render each item

   Passing each item as a slot prop allows flexible rendering by the parent component, which is the correct pattern for generic components with slots.

3. Step 3: Evaluate other options

   Use defineProps(['items']) and render items directly without slots. lacks generics and slots. Use defineProps<{ items: any[] }>() and hardcode item rendering inside component. uses any losing type safety and hardcodes rendering. Use defineProps<{ items: T }>() and render items without looping. uses T instead of T[] and misses looping.

4. Final Answer:

   Use defineProps<{ items: T[] }>() and a default slot with v-for passing each item as slot prop. -> Option C

5. Quick Check:

   Generic list + slot with v-for = Use defineProps<{ items: T[] }>() and a default slot with v-for passing each item as slot prop. [OK]

Hint: Generic list props need array type and slot with v-for [OK]

Common Mistakes:

• Using single item type instead of array for list props
• Not using slots for flexible item rendering
• Hardcoding rendering inside generic component