Vue 3 Components and Composables in JavaScript
Build and fix Vue 3 apps in plain JavaScript with JSDoc, race-safe composables, Vite, Vue Router, and Pinia.
Before & after
Same prompt, same agent — the only difference is the skill.
Vue 3 is a great choice for building reactive components. You could create a form component and then build a composable to manage the state. Composables are a powerful pattern in Vue 3 that let you extract and reuse stateful logic. You'd want to use reactive or ref depending on your needs, and set up event handlers to update the state when the form changes. JSDoc annotations would help document your code even without TypeScript. Would you like help thinking through the structure, or would you like me to guide you through the setup process?
COMPONENT STRUCTURE • Create src/components/UserForm.mjs with template, script, and style blocks • Import useFormState composable at top • Bind form inputs to reactive refs: email, name, password COMPOSABLE SETUP • Build src/composables/useFormState.mjs • Return object with reactive refs and validation methods • Define submit handler that collects form data and emits to parent • Use @typedef and @param for JSDoc type hints KEY DECISIONS → Use ref() for form fields, not reactive() — easier to destructure in template → Validate on blur, not keystroke — reduces excessive re-renders → Emit success/error events, don't mutate parent state directly FILE LISTING src/components/UserForm.mjs (120 lines) src/composables/useFormState.mjs (80 lines) src/utils/validators.mjs (40 lines JSDoc type defs)
About this skill
Your Vue fix should not arrive with TypeScript syntax, broken prop reactivity, or a composable that displays stale search results. This skill builds and repairs Vue 3 applications in plain JavaScript, with JSDoc contracts and explicit handling of state ownership, asynchronous work, and cleanup.
What it does
- Builds Composition API components with runtime prop declarations, documented events, and predictable parent-child state flow.
- Diagnoses lost reactivity, watcher loops, stale requests, and missing cleanup before proposing a patch.
- Writes reusable composables that accept reactive inputs, preserve ref bindings, and release their resources.
- Configures JavaScript Vite projects, Vue Router navigation, and Pinia stores without introducing TypeScript files.
- Converts Vue 2 Options API behavior into Vue 3 Composition API code while identifying incompatible dependencies and APIs.
- Adds JSDoc types for props, API data, composable inputs, and return values without claiming runtime validation or guaranteed type coverage.
What you get
A focused patch or complete JavaScript implementation sized to your request, with assumptions, integration details, and targeted verification steps. Reviews identify the failure mechanism and provide corrected code rather than a generic Vue checklist.
Best for
Teams maintaining JavaScript-only Vue applications, developers migrating Vue 2 components, and builders who want useful editor hints without adopting a TypeScript build pipeline.
SKILL.md preview
---
name: vue-3-components-and-composables-in-javascript
description: >-
Build and repair Vue 3 components, composables, Vite setup, Vue Router flows, and Pinia stores in plain JavaScript using JSDoc contracts, explicit state ownership, and asynchronous cleanup. Use when the user says "keep this Vue app JavaScript only", "build a reusable Vue component", "my prop stopped updating", "my search keeps showing old results", "convert this Vue 2 component", "add Pinia without TypeScript", or "set up Vue Router with Vite".
---
# Vue 3 Components and Composables in JavaScript
… (sign up to view the full skill)More development skills
View all Development skills →Frontend Component UX and Accessibility Review
Severity-ranked fixes with code for UI components: states, keyboard, focus, ARIA, touch targets, contrast, and responsive breakage.
Three.js Click-to-Learn 3D Game Builder
Build click-to-learn 3D games in Three.js: TSL materials, reliable object picking, and an accessible quiz overlay fed by content data.
Angular Standalone Features and State Architecture
Build Angular standalone features with lazy routes, scoped state, safe RxJS flows, and targeted tests.
shadcn/ui Component Building and Theming
Build, theme, and debug shadcn/ui components the way the library is designed to work, with Tailwind v3 and v4 theming handled correctly.