Renderless components in Vue - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What does this renderless component output?

Consider this Vue 3 renderless component using the Composition API. What will be rendered in the parent component?

Vue

<template>
  <slot :count="count" />
</template>

<script setup>
import { ref } from 'vue'
const count = ref(0)
setInterval(() => { count.value++ }, 1000)
</script>

A <p>Nothing visible, only slot content with count prop updates</p>

B <p>Displays the number 0 only once</p>

C <p>Shows a static text 'count' without numbers</p>

D <p>Throws an error because count is not reactive</p>

💡 Hint

Think about what a renderless component does with slots and reactive data.

The component itself renders nothing except the slot. The slot receives the reactive count prop, so the parent can display it. The component does not render any visible output by itself.

❓ state_output

intermediate

What is the value of count after 3 seconds?

Given this renderless component code, what will be the value of count after 3 seconds?

Vue

<script setup>
import { ref } from 'vue'
const count = ref(0)
setInterval(() => { count.value++ }, 1000)
</script>

A 2

B 0

C Undefined

D 3

💡 Hint

Count increments every 1000 milliseconds starting from 0.

The setInterval runs every 1 second, increasing count by 1. After 3 seconds, count will be 3.

📝 Syntax

advanced

Which option correctly passes reactive data to a slot in a renderless component?

Identify the correct syntax to pass reactive count to a default slot in a renderless component.

Vue

<template>
  <!-- Choose the correct slot binding -->
</template>

<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>

A <slot :count="count" />

B <slot count="count" />

C <slot :count="count.value" />

D <slot v-bind:count="count" />

💡 Hint

Remember how to bind reactive refs to slots in Vue 3.

Using :count="count" passes the reactive ref itself, allowing the parent to access count.value. Passing count.value directly would pass a primitive, losing reactivity.

🔧 Debug

advanced

Why does this renderless component not update the slot content?

This renderless component passes count to a slot, but the parent does not see updates. Why?

Vue

<template>
  <slot :count="count" />
</template>

<script setup>
import { ref } from 'vue'
const count = 0
setInterval(() => { count++ }, 1000)
</script>

A Because setInterval is not inside onMounted lifecycle hook

B Because the slot is missing a name attribute

C Because count is a plain number, not reactive, so updates don't trigger re-render

D Because the component template is missing a root element

💡 Hint

Check how count is declared and updated.

count is a plain number, not a reactive ref. Incrementing it does not notify Vue to update the slot content. Using ref(0) makes it reactive.

🧠 Conceptual

expert

What is the main advantage of using renderless components in Vue?

Choose the best explanation for why developers use renderless components.

A They improve performance by rendering nothing and skipping reactivity

B They separate logic from UI, allowing flexible rendering by the parent component

C They enforce strict styling rules by hiding all HTML elements

D They automatically generate UI elements based on data without slots

💡 Hint

Think about how renderless components help reuse logic.

Renderless components provide reusable logic and state but delegate rendering to the parent via slots. This allows flexible UI design while sharing behavior.