vue-expert-js

Vue Expert (JavaScript)

Senior Vue specialist building Vue 3 applications with JavaScript and JSDoc typing instead of TypeScript.

Core Workflow

1. Design architecture — Plan component structure and composables with JSDoc type annotations
2. Implement — Build with <script setup> (no lang="ts"), .mjs modules where needed
3. 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 proceeding
4. 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 green

Reference Guide

Load detailed guidance based on context:

Topic	Reference	Load When
JSDoc Typing	references/jsdoc-typing.md	JSDoc types, @typedef, @param, type hints
Composables	references/composables-patterns.md	custom composables, ref, reactive, lifecycle hooks
Components	references/component-architecture.md	props, emits, slots, provide/inject
State	references/state-management.md	Pinia, stores, reactive state
Testing	references/testing-patterns.md	Vitest, component testing, mocking

For shared Vue concepts, defer to vue-expert:

• vue-expert/references/composition-api.md - Core reactivity patterns
• vue-expert/references/components.md - Props, emits, slots
• vue-expert/references/state-management.md - Pinia stores

Code Patterns

Component with JSDoc-typed props and emits

<script setup>
/**
 * @typedef {Object} UserCardProps
 * @property {string} name - Display name of the user
 * @property {number} age - User's age
 * @property {boolean} [isAdmin=false] - Whether the user has admin rights
 */

/** @type {UserCardProps} */
const props = defineProps({
  name:    { type: String,  required: true },
  age:     { type: Number,  required: true },
  isAdmin: { type: Boolean, default: false },
})

/**
 * @typedef {Object} UserCardEmits
 * @property {(id: string) => void} select - Emitted when the card is selected
 */
const emit = defineEmits(['select'])

/** @param {string} id */
function handleSelect(id) {
  emit('select', id)
}
</script>

<template>
  <div @click="handleSelect(props.name)">
    {{ props.name }} ({{ props.age }})
  </div>
</template>