Generic components in Vue - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the rendered output of this generic Vue component?

Consider this Vue 3 generic component using the Composition API:

<script setup lang="ts">
import { defineProps } from 'vue'

type Item = { id: number; name: string }

const props = defineProps<{ items: Item[] }>()
</script>

<template>
  <ul>
    <li v-for="item in props.items" :key="item.id">{{ item.name }}</li>
  </ul>
</template>

If you pass items=[{id:1, name:'Apple'}, {id:2, name:'Banana'}], what will be the output?

Vue

<script setup lang="ts">
import { defineProps } from 'vue'

type Item = { id: number; name: string }

const props = defineProps<{ items: Item[] }>()
</script>

<template>
  <ul>
    <li v-for="item in props.items" :key="item.id">{{ item.name }}</li>
  </ul>
</template>

A <ul><li>props.items</li></ul>

B <ul><li>1</li><li>2</li></ul>

C <ul><li>Apple</li><li>Banana</li></ul>

D <ul><li>{id:1, name:'Apple'}</li><li>{id:2, name:'Banana'}</li></ul>

💡 Hint

Look at what is displayed inside the <li> tags.

The component loops over props.items and displays the name property of each item. So it renders a list with 'Apple' and 'Banana'.

📝 Syntax

intermediate

Which option correctly defines a generic Vue component prop type?

In Vue 3 with TypeScript, you want to define a generic component that accepts a prop data of type T[]. Which syntax is correct?

A const props = defineProps<{ data: T[] }>()

B const props = defineProps<{ data: Array<T> }>()

C const props = defineProps<T>()

D const props = defineProps<{ data: T }>()

💡 Hint

Remember that Array<T> and T[] are equivalent in TypeScript.

Option B correctly defines a prop named data as an array of generic type T. Option B is invalid because T is not declared in that scope. Option B tries to define props as T directly, which is incorrect. Option B defines data as a single T, not an array.

🔧 Debug

advanced

Why does this generic Vue component fail to compile?

Given this Vue 3 component code snippet:

<script setup lang="ts">
import { defineProps } from 'vue'

type Item<T> = { id: number; value: T }

const props = defineProps<{ items: Item[] }>()
</script>

Why does it fail?

Vue

<script setup lang="ts">
import { defineProps } from 'vue'

type Item<T> = { id: number; value: T }

const props = defineProps<{ items: Item[] }>()
</script>

A Because Item is a generic type but used without specifying T

B Because defineProps cannot accept generic types

C Because id must be a string, not number

D Because value property is missing in props

💡 Hint

Check how generic types are used in TypeScript.

The type Item is generic and requires a type parameter T. Using Item[] without specifying T causes a TypeScript error. You must specify Item<SomeType>[].

❓ state_output

advanced

What is the value of count after clicking the button twice in this generic Vue component?

Consider this Vue 3 generic component:

<script setup lang="ts">
import { ref } from 'vue'

const count = ref(0)

function increment() {
  count.value++
}
</script>

<template>
  <button @click="increment">Increment</button>
  <p>Count: {{ count.value }}</p>
</template>

What will be displayed after clicking the button twice?

Vue

<script setup lang="ts">
import { ref } from 'vue'

const count = ref(0)

function increment() {
  count.value++
}
</script>

<template>
  <button @click="increment">Increment</button>
  <p>Count: {{ count.value }}</p>
</template>

A Count: 2

B Count: 1

C Count: 0

D Count: undefined

💡 Hint

Each click increases count by 1.

The increment function increases count.value by 1 each time the button is clicked. After two clicks, count is 2.

🧠 Conceptual

expert

Which statement about Vue 3 generic components is true?

Choose the correct statement about using generic components in Vue 3 with TypeScript.

A Vue automatically infers generic types from prop values without any TypeScript annotations

B You must explicitly specify generic type parameters when using generic components in templates

C Generic components can only be defined using the Options API, not Composition API

D Generic types in Vue props help ensure type safety but do not affect runtime behavior

💡 Hint

Think about TypeScript's role in Vue components.

Generic types in Vue with TypeScript provide compile-time type safety but do not change how the component behaves at runtime. Options B, C, and D are false because Composition API supports generics, templates do not specify generic parameters explicitly, and Vue does not infer generic types automatically without annotations.