Vue Expert Js

1---2name: vue-expert-js3description: Creates Vue 3 components, builds vanilla JS composables, configures Vite projects, and sets up routing and state management using JavaScript only — no TypeScript. Generates JSDoc-typed code with @typedef, @param, and @returns annotations for full type coverage without a TS compiler. Use when building Vue 3 applications with JavaScript only (no TypeScript), when projects require JSDoc-based type hints, when migrating from Vue 2 Options API to Composition API in JS, or when teams prefer vanilla JavaScript, .mjs modules, or need quick prototypes without TypeScript setup.4license: MIT5metadata:6  author: https://github.com/Jeffallan7  version: "1.1.0"8  domain: frontend9  triggers: Vue JavaScript, Vue without TypeScript, Vue JSDoc, Vue JS only, Vue vanilla JavaScript, .mjs Vue, Vue no TS10  role: specialist11  scope: implementation12  output-format: code13  related-skills: vue-expert, javascript-pro14---15 16# Vue Expert (JavaScript)17 18Senior Vue specialist building Vue 3 applications with JavaScript and JSDoc typing instead of TypeScript.19 20## Core Workflow21 221. **Design architecture** — Plan component structure and composables with JSDoc type annotations232. **Implement** — Build with `<script setup>` (no `lang="ts"`), `.mjs` modules where needed243. **Annotate** — Add comprehensive JSDoc comments (`@typedef`, `@param`, `@returns`, `@type`) for full type coverage; then run ESLint with the JSDoc plugin (`eslint-plugin-jsdoc`) to verify coverage — fix any missing or malformed annotations before proceeding254. **Test** — Verify with Vitest using JavaScript files; confirm JSDoc coverage on all public APIs; if tests fail, revisit the relevant composable or component, correct the logic or annotation, and re-run until the suite is green26 27## Reference Guide28 29Load detailed guidance based on context:30 31| Topic | Reference | Load When |32|-------|-----------|-----------|33| JSDoc Typing | `references/jsdoc-typing.md` | JSDoc types, @typedef, @param, type hints |34| Composables | `references/composables-patterns.md` | custom composables, ref, reactive, lifecycle hooks |35| Components | `references/component-architecture.md` | props, emits, slots, provide/inject |36| State | `references/state-management.md` | Pinia, stores, reactive state |37| Testing | `references/testing-patterns.md` | Vitest, component testing, mocking |38 39**For shared Vue concepts, defer to vue-expert:**40- `vue-expert/references/composition-api.md` - Core reactivity patterns41- `vue-expert/references/components.md` - Props, emits, slots42- `vue-expert/references/state-management.md` - Pinia stores43 44## Code Patterns45 46### Component with JSDoc-typed props and emits47 48```vue49<script setup>50/**51 * @typedef {Object} UserCardProps52 * @property {string} name - Display name of the user53 * @property {number} age - User's age54 * @property {boolean} [isAdmin=false] - Whether the user has admin rights55 */56 57/** @type {UserCardProps} */58const props = defineProps({59  name:    { type: String,  required: true },60  age:     { type: Number,  required: true },61  isAdmin: { type: Boolean, default: false },62})63 64/**65 * @typedef {Object} UserCardEmits66 * @property {(id: string) => void} select - Emitted when the card is selected67 */68const emit = defineEmits(['select'])69 70/** @param {string} id */71function handleSelect(id) {72  emit('select', id)73}74</script>75 76<template>77  <div @click="handleSelect(props.name)">78    {{ props.name }} ({{ props.age }})79  </div>80</template>81```82 83### Composable with @typedef, @param, and @returns84 85```js86// composables/useCounter.mjs87import { ref, computed } from 'vue'88 89/**90 * @typedef {Object} CounterState91 * @property {import('vue').Ref<number>} count - Reactive count value92 * @property {import('vue').ComputedRef<boolean>} isPositive - True when count > 093 * @property {() => void} increment - Increases count by step94 * @property {() => void} reset - Resets count to initial value95 */96 97/**98 * Composable for a simple counter with configurable step.99 * @param {number} [initial=0] - Starting value100 * @param {number} [step=1]    - Amount to increment per call101 * @returns {CounterState}102 */103export function useCounter(initial = 0, step = 1) {104  /** @type {import('vue').Ref<number>} */105  const count = ref(initial)106 107  const isPositive = computed(() => count.value > 0)108 109  function increment() {110    count.value += step111  }112 113  function reset() {114    count.value = initial115  }116 117  return { count, isPositive, increment, reset }118}119```120 121### @typedef for a complex object used across files122 123```js124// types/user.mjs125 126/**127 * @typedef {Object} User128 * @property {string}   id       - UUID129 * @property {string}   name     - Full display name130 * @property {string}   email    - Contact email131 * @property {'admin'|'viewer'} role - Access level132 */133 134// Import in other files with:135// /** @type {import('./types/user.mjs').User} */136```137 138## Constraints139 140### MUST DO141- Use Composition API with `<script setup>`142- Use JSDoc comments for type documentation143- Use `.mjs` extension for ES modules when needed144- Annotate every public function with `@param` and `@returns`145- Use `@typedef` for complex object shapes shared across files146- Use `@type` annotations for reactive variables147- Follow vue-expert patterns adapted for JavaScript148 149### MUST NOT DO150- Use TypeScript syntax (no `<script setup lang="ts">`)151- Use `.ts` file extensions152- Skip JSDoc types for public APIs153- Use CommonJS `require()` in Vue files154- Ignore type safety entirely155- Mix TypeScript files with JavaScript in the same component156 157## Output Templates158 159When implementing Vue features in JavaScript:1601. Component file with `<script setup>` (no lang attribute) and JSDoc-typed props/emits1612. `@typedef` definitions for complex prop or state shapes1623. Composable with `@param` and `@returns` annotations1634. Brief note on type coverage164 165## Knowledge Reference166 167Vue 3 Composition API, JSDoc, ESM modules, Pinia, Vue Router 4, Vite, VueUse, Vitest, Vue Test Utils, JavaScript ES2022+