renderless-components

Encapsulate Vue component logic without rendering markup using scoped slots.

235|25|Updated Mar 24, 2026

Search Tags:#vue #reuse #renderless #component-pattern #scoped-slots #logic-encapsulation

Ready to run

npx skills add https://github.com/PatternsDev/skills --skill renderless-components

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: renderless-components
Source: https://github.com/PatternsDev/skills/tree/main/vue/renderless-components
Command: npx skills add https://github.com/PatternsDev/skills --skill renderless-components

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Separates component logic from presentation in Vue, enabling reusable behavior without forcing UI structure.

Core Features & Use Cases

Encapsulate and share logic across components via a single renderless component.
Provide data and methods to consumers through a single scoped slot, enabling flexible UI rendering.
Use as a library pattern when offering a component-based API without enforcing markup.

Quick Start

Create a renderless component that exposes data through a scoped slot and render your own UI in the parent.

Frequently Asked Questions about renderless-components

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I separate Vue component logic from presentation to reuse behavior across different UI implementations?▼

You can separate Vue component logic from presentation by using renderless components that encapsulate behavior without rendering markup. This approach exposes data and methods to consumers through scoped slots, allowing flexible UI rendering in parent components.

What is a renderless component in Vue and how does it work with scoped slots?▼

A renderless component in Vue encapsulates logic without rendering markup, using scoped slots to expose data and methods to the parent component. This allows the consumer to decide the UI structure while receiving reusable behavior.

How do I share Vue component logic across multiple component libraries without enforcing markup?▼

To share Vue component logic across multiple component libraries without enforcing markup, create a renderless component that provides data and methods via a single scoped slot. This library pattern offers a component-based API while leaving UI rendering flexible.

Can I use renderless Vue components with script setup syntax?▼

Yes, renderless Vue components support script setup usage. This allows you to encapsulate logic and expose it through scoped slots using modern Vue syntax while avoiding extra DOM elements until rendering is decided by the consumer.

When should I use renderless components instead of standard Vue components?▼

Use renderless components when you need to share behavior across different views or component libraries without forcing a specific UI structure. They are ideal for library patterns where you want to provide reusable logic while letting consumers control the markup.

Why does my Vue component logic break when reused across different UI structures?▼

Vue component logic often breaks across different UI structures because standard components couple behavior with markup. Renderless components solve this by encapsulating logic separately and exposing data through scoped slots, enabling flexible rendering without structural conflicts.