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.

Practice

1. What is the main purpose of a renderless component in Vue?

easy

A. To share logic without rendering any UI elements

B. To render a default UI for all child components

C. To replace the Vue router for navigation

D. To automatically fetch data from APIs

Solution

1. Step 1: Understand the concept of renderless components

   Renderless components are designed to provide reusable logic without producing any visible UI themselves.

2. Step 2: Compare options with the concept

   Options A, B, and D describe unrelated Vue features or behaviors. Only To share logic without rendering any UI elements correctly describes the purpose of renderless components.

3. Final Answer:

   To share logic without rendering any UI elements -> Option A

4. Quick Check:

   Renderless components = share logic only [OK]

Hint: Renderless means no UI, just logic sharing [OK]

Common Mistakes:

• Thinking renderless components render UI
• Confusing with routing or data fetching
• Assuming they provide default templates

2. Which syntax correctly defines a renderless component using slots in Vue 3?

easy

A. <template><slot :data="someData" /></template>

B. <template><div>Hello</div></template>

C. <script>export default { render() { return null } }</script>

D. <template><button>Click</button></template>

Solution

1. Step 1: Identify renderless component pattern

   Renderless components use slots to pass data and methods without rendering UI elements themselves.

2. Step 2: Analyze each option

   <template><slot :data="someData" /></template> uses a slot with a prop to pass data, which is the correct renderless pattern. Options A and D render UI elements, and C returns null but does not use slots.

3. Final Answer:

   <template><slot :data="someData" /></template> -> Option A

4. Quick Check:

   Renderless = slot with data prop [OK]

Hint: Renderless components pass data via slots, no UI tags [OK]

Common Mistakes:

• Including UI elements inside renderless components
• Not using slots to expose data
• Returning null without slots

3. Given this renderless component usage:

<RenderlessCounter v-slot="{ count, increment }">
  <button @click="increment">Count: {{ count }}</button>
</RenderlessCounter>

What will happen when the button is clicked?

medium

A. The button resets the count to zero

B. Nothing happens because the component does not render UI

C. An error occurs because increment is not defined

D. The count value increases and the button text updates

Solution

1. Step 1: Understand slot props usage

   The renderless component exposes count and increment via slot props, which the parent uses to render a button and handle clicks.

2. Step 2: Analyze button click effect

   Clicking the button calls increment, which increases count. The button text updates because it uses {{ count }}.

3. Final Answer:

   The count value increases and the button text updates -> Option D

4. Quick Check:

   Slot props update UI on click [OK]

Hint: Slot props provide data and methods to parent [OK]

Common Mistakes:

• Assuming renderless means no UI updates
• Thinking increment is undefined
• Confusing renderless with no interaction

4. Identify the error in this renderless component definition:

<template>
  <slot>Default</slot>
</template>

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

medium

A. Template must have a root element wrapping slot

B. Slot usage is invalid without a name

C. Increment function incorrectly updates count with count++ instead of count.value++

D. Ref is not imported from Vue

Solution

1. Step 1: Check reactive ref usage

   In Vue 3, refs must be updated via count.value++, not count++.

2. Step 2: Verify other parts

   Slot usage without a name is valid for default slot. Template can have a single root slot. Ref is properly imported from Vue.

3. Final Answer:

   Increment function incorrectly updates count with count++ instead of count.value++ -> Option C

4. Quick Check:

   Update ref with .value [OK]

Hint: Use .value to update refs in Vue 3 [OK]

Common Mistakes:

• Updating ref directly without .value
• Assuming slot needs a name
• Thinking template must wrap slot in div

5. You want to create a renderless component that tracks mouse position and shares it with any parent component. Which approach correctly implements this?

hard

A. <template><div>Mouse at {{ x }}, {{ y }}</div></template>

<script setup>
const x = ref(0)
const y = ref(0)
window.addEventListener('mousemove', e => {
x.value = e.clientX
y.value = e.clientY
})
</script>

B. <template><slot :pos="position" /></template>

<script setup>
import { reactive } from 'vue'
const position = reactive({ x: 0, y: 0 })
window.addEventListener('mousemove', e => {
position.x = e.clientX
position.y = e.clientY
})
</script>

C. <template><slot /></template>

<script setup>
import { reactive } from 'vue'
const position = reactive({ x: 0, y: 0 })
window.addEventListener('mousemove', e => {
position.x = e.clientX
position.y = e.clientY
})
</script>

D. <template><slot :x="x" :y="y" /></template>

<script setup>
let x = 0
let y = 0
window.addEventListener('mousemove', e => {
x = e.clientX
y = e.clientY
})
</script>

Solution

1. Step 1: Identify renderless component pattern

   The component must not render UI but expose reactive data via slot props.

2. Step 2: Analyze each option for correctness

   <template><slot :x="x" :y="y" /></template> <script setup> let x = 0 let y = 0 window.addEventListener('mousemove', e => { x = e.clientX y = e.clientY }) </script> uses non-reactive plain variables, so position won't update reactively. <template><div>Mouse at {{ x }}, {{ y }}</div></template> <script setup> const x = ref(0) const y = ref(0) window.addEventListener('mousemove', e => { x.value = e.clientX y.value = e.clientY }) </script> renders UI, so not renderless. <template><slot /></template> <script setup> import { reactive } from 'vue' const position = reactive({ x: 0, y: 0 }) window.addEventListener('mousemove', e => { position.x = e.clientX position.y = e.clientY }) </script> exposes slot without props, so no data passed. <template><slot :pos="position" /></template> <script setup> import { reactive } from 'vue' const position = reactive({ x: 0, y: 0 }) window.addEventListener('mousemove', e => { position.x = e.clientX position.y = e.clientY }) </script> exposes reactive position object via slot prop, clean and correct.

3. Final Answer:

   Expose reactive position object via slot prop without rendering UI -> Option B

4. Quick Check:

   Renderless = slot with reactive data [OK]

Hint: Expose reactive data via slot props, no UI elements [OK]

Common Mistakes:

• Rendering UI inside renderless component
• Not passing data via slot props
• Passing data but not reactive or incomplete