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:

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

Composable with @typedef, @param, and @returns

@typedef for a complex object used across files

Constraints

MUST DO

• Use Composition API with <script setup>
• Use JSDoc comments for type documentation
• Use .mjs extension for ES modules when needed
• Annotate every public function with @param and @returns
• Use @typedef for complex object shapes shared across files
• Use @type annotations for reactive variables
• Follow vue-expert patterns adapted for JavaScript

MUST NOT DO

• Use TypeScript syntax (no <script setup lang="ts">)
• Use .ts file extensions
• Skip JSDoc types for public APIs
• Use CommonJS require() in Vue files
• Ignore type safety entirely
• Mix TypeScript files with JavaScript in the same component

Output Templates

When implementing Vue features in JavaScript:

1. Component file with <script setup> (no lang attribute) and JSDoc-typed props/emits
2. @typedef definitions for complex prop or state shapes
3. Composable with @param and @returns annotations
4. Brief note on type coverage

Knowledge Reference

Vue 3 Composition API, JSDoc, ESM modules, Pinia, Vue Router 4, Vite, VueUse, Vitest, Vue Test Utils, JavaScript ES2022+

Documentation