Renderless components in Vue - Step-by-Step Execution

Concept Flow - Renderless components

Parent Component

↓

Renderless Component

↓

Provide Logic & State

↓

Expose via Slot Props

↓

Parent Uses Slot Props to Render UI

The parent uses a renderless component that provides logic and state but no UI, exposing data via slot props for the parent to render.

Execution Sample

Vue

<script setup>
import { ref } from 'vue'
const count = ref(0)
function increment() { count.value++ }
</script>
<template>
  <slot :count="count" :increment="increment" />
</template>

A renderless component that tracks count and increment function, exposing them via slot props for the parent to render.

Execution Table

Step	Action	State Before	State After	Output Rendered
1	Initialize count to 0	count: undefined	count: 0	No UI from renderless component
2	Parent renders renderless component with slot	count: 0	count: 0	Parent receives count=0 and increment function
3	User clicks increment button in parent UI	count: 0	count: 1	Parent UI updates to show count=1
4	User clicks increment button again	count: 1	count: 2	Parent UI updates to show count=2
5	No more user interaction	count: 2	count: 2	UI remains showing count=2

💡 Execution stops as no further user interaction occurs.

Variable Tracker

Variable	Start	After 1	After 2	After 3	Final
count.value	undefined	0	1	2	2

Key Moments - 3 Insights

Why does the renderless component not render any visible UI itself?

Because it only provides logic and state via slot props; the parent component decides how to render the UI using those props, as shown in execution_table step 2.

How does the parent component update the UI when count changes?

The parent uses the increment function from slot props to update count in the renderless component, triggering reactive updates that re-render the parent's UI, as seen in steps 3 and 4.

What happens if the parent does not use the slot props?

No UI updates occur because the renderless component does not render UI itself; the parent must use the slot props to display or react to state changes.

Visual Quiz - 3 Questions

Look at the execution table, what is the value of count after step 3?

A 0

B 1

C 2

D undefined

💡 Hint

Check the 'State After' column in row for step 3.

At which step does the parent component first receive the increment function?

A Step 1

B Step 3

C Step 2

D Step 4

💡 Hint

Look at the 'Output Rendered' column to see when slot props are passed.

If the parent never calls increment, what will the final count value be?

A 0

B 1

C 2

D undefined

💡 Hint

Refer to variable_tracker and consider no user interaction.

Concept Snapshot

Renderless components provide logic and state without UI.
They expose data via slot props.
Parent components use slot props to render UI.
This separates logic from presentation.
Useful for reusable behavior without fixed markup.

Full Transcript

Renderless components in Vue are special components that do not render any visible UI themselves. Instead, they provide logic and state, such as reactive variables and functions, and expose these through slot props. The parent component uses these slot props to decide how to render the UI. For example, a renderless component might track a count and provide an increment function. The parent receives these via slot props and renders a button and display using them. When the user clicks the button, the increment function updates the count inside the renderless component, which triggers reactive updates that cause the parent UI to update. This pattern separates logic from presentation, making code more reusable and flexible. The execution table shows the steps from initialization, rendering, user interaction, and UI updates. The variable tracker shows how the count changes over time. Key moments clarify why the renderless component itself has no UI and how the parent controls rendering. The visual quiz tests understanding of state changes and slot prop usage.