Renderless components in Vue - Mini Project: Build & Apply

Building a Renderless Component in Vue 3

📖 Scenario: You are creating a reusable logic component in Vue 3 that does not render any HTML itself but provides data and behavior to other components.This pattern is called a renderless component and helps separate logic from UI.

🎯 Goal: Build a renderless component called useCounter that manages a counter state and exposes increment and decrement functions.Then use this component inside a parent component to display and control the counter.

📋 What You'll Learn

Create a renderless component using the Composition API with setup().

Use ref to create a reactive counter variable starting at 0.

Provide increment and decrement functions to change the counter.

Use the renderless component inside a parent component and display the counter value.

Add buttons in the parent component to call increment and decrement.

💡 Why This Matters

🌍 Real World

Renderless components help you reuse logic across multiple UI components without forcing a specific look or markup. This is useful in design systems and component libraries.

💼 Career

Understanding renderless components is important for Vue developers building scalable, maintainable apps and libraries that separate logic from presentation.

1

Create the renderless component with a reactive counter

Create a Vue 3 renderless component named useCounter using the Composition API. Inside setup(), create a reactive variable called count initialized to 0 using ref. Return an object containing count.

Vue

import { ref } from 'vue'

export function useCounter() {
  // Your code here
}

Hint

Use ref(0) to create a reactive counter variable inside setup().

2

Add increment and decrement functions to the renderless component

Inside the useCounter component, add two functions named increment and decrement. increment should add 1 to count.value. decrement should subtract 1 from count.value. Return both functions along with count.

Vue

import { ref } from 'vue'

export function useCounter() {
  const count = ref(0)

  // Your code here
}

Hint

Define increment and decrement functions that update count.value.

3

Use the renderless component inside a parent component

Create a Vue 3 parent component named CounterDisplay. Inside its setup(), call useCounter() and destructure count, increment, and decrement. Return these. In the template, display the count value inside a <span>. Add two buttons labeled + and - that call increment and decrement on click.

Vue

  
    
  



import { useCounter } from './useCounter.js'

// Your code here

Hint

Use useCounter() inside setup() and bind the functions to buttons.

4

Complete the parent component with accessibility and styling

In the CounterDisplay component template, add aria-label attributes to the increment and decrement buttons with values "Increase count" and "Decrease count" respectively. Add a role="region" and aria-live="polite" to the <span> showing the count for screen readers.

Vue

  
    
  



import { useCounter } from './useCounter.js'

const { count, increment, decrement } = useCounter()

Hint

Add accessibility attributes to buttons and the count display for screen reader support.