Standardize Vue 3 component APIs with props, emits, defineModel, slots, and provide/inject for SSR.
npx skills add https://github.com/e-xode/vue-ssr --skill vue3-components
Please help me install this Agent Skill. Skill: vue3-components Source: https://github.com/e-xode/vue-ssr/tree/main/.claude/skills/vue3-components Command: npx skills add https://github.com/e-xode/vue-ssr --skill vue3-components
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.
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.
High-intent search queries and answers about installing and using this skill.
Vue 3 component props and emits for SSR require object-syntax prop validation and explicitly declared emits to maintain a strict one-way data flow and prevent unintended fallthrough listeners during server-side rendering.
The best way to implement v-model in a Vue 3 custom component is using defineModel to establish a clean two-way binding contract without desynchronizing parent state. This standardizes data flow predictably.
Provide/inject in Vue 3 shares reactive subtree context downward without prop drilling, allowing deep child components to access shared state while keeping app-wide state management separate in Pinia.
Yes, you can use dynamic and async components safely during Vue SSR by applying SSR-aware patterns that lazy-load heavy components at runtime while maintaining safe template and logic boundaries during server rendering.
Vue 3 components break during renderToString when browser-only APIs are accessed at setup time. Ensuring SSR-safe template and logic boundaries prevents this by avoiding browser-only access during the initial server render.
To compose reusable Vue 3 component UI with scoped slots, let parent components inject markup into child components while safely exposing child-owned data, enabling flexible content composition patterns across your application.
yuhle-qugDiagnose Vue 3 Composition API, reactivity, and Nuxt.js integration issues.
nathanielcrowell12-specImplement Next.js 15 server components, client components, server actions, and API routes.
PatternsDevShare parent data to descendant components using provide() and inject().
ElderEvilConsolidate Vue 3 testing best practices for Vitest and Vue Test Utils.
