vue3-components

What problem does it solve?

This Skill prevents brittle component interfaces by giving you consistent rules for how Vue 3 components expose inputs, outputs, slot content, and shared subtree context in a Vue SSR project.

Core Features & Use Cases

• Props + validation (object syntax): Define strict, developer-friendly component inputs with clear defaults and one-way data flow.
• Emits + event validation: Declare every event your component can send to avoid unintended fallthrough listeners and improve reliability.
• v-model contract via defineModel: Implement component two-way bindings cleanly without desynchronizing parent state.
• Slots (including scoped/conditional slots): Compose reusable UI by letting parents inject markup and access child-owned data safely.
• provide/inject for subtree context: Share reactive context downward without prop drilling, while keeping app-wide state in Pinia.
• SSR-safe component patterns: Ensure props/events/slots/provides are safe during renderToString by avoiding browser-only access at setup time.
• Dynamic/async components: Switch components at runtime and lazy-load heavy components with SSR-aware behavior.

Quick Start

Use this skill when you are designing a new reusable component contract and want to define its props, emits, slots, and v-model binding so it works predictably in Vue SSR.