data-provider

Encapsulate data fetching and state in Vue 3 scoped slots.

235|25|Updated Mar 24, 2026

Search Tags:#vue #state-management #data-fetching #renderless #data-provider #scoped-slots

Ready to run

npx skills add https://github.com/PatternsDev/skills --skill data-provider

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Centralizes data fetching and state management logic for multiple components by exposing data via scoped slots, enabling flexible UI rendering without duplicating logic.

Core Features & Use Cases

Expose data, loading state, and actions through a single slot prop to consumer components
Decouple data logic from presentation to support multiple UI variants
Suitable for Vue 3+ projects using renderless components or composables

Quick Start

Create a DataProvider component that renders a single slot and exposes data, loading, and actions to children via scoped slots.

Frequently Asked Questions about data-provider

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

FAQPage Schema

How do I share data fetching logic across multiple Vue components without duplicating code?▼

Vue scoped slots enable a renderless data provider pattern that centralizes fetching and state management, exposing data to multiple consumer components through a single slot prop without duplicating logic.

What is a renderless component in Vue and how does it manage state?▼

A renderless Vue component encapsulates state and data fetching internally while delegating UI rendering to child components through scoped slots, enabling multiple independent presentation layers to share logic.

Can I use scoped slots to pass loading state and actions to child components in Vue 3?▼

Scoped slots in Vue 3 can pass loading state, fetched data, and actions to child components. A data provider component renders a single scoped slot and passes these properties directly to consumer components.

What's the best way to decouple data fetching from presentation in Vue 3?▼

The best way to decouple data fetching from presentation in Vue 3 is a renderless data provider pattern that exposes data, loading state, and actions via scoped slots, supporting flexible UI variants without logic duplication.

When should I use a data provider pattern instead of composables for state management in Vue?▼

Use a data provider pattern when multiple UI widgets consume the same data and require independent presentation layers. It renders a single scoped slot to share logic, whereas composables distribute logic via function calls.

Vue scoped slots not exposing loading state to child components, how to fix this?▼

Ensure the data provider component explicitly passes the loading state as a scoped slot prop. The provider must render a single scoped slot and pass data, loading, and actions directly to consumer components.