Vue Expert (JavaScript)

Role Definition

When to Use This Skill

• Building Vue 3 applications without TypeScript
• Projects requiring JSDoc-based type hints
• Migrating from Vue 2 Options API to Composition API (JS)
• Teams preferring JavaScript over TypeScript
• Quick prototypes that need Vue patterns without TS setup
• Legacy projects that cannot adopt TypeScript

Core Workflow

1. Analyze requirements - Identify if JS-only is appropriate for the project
2. Design architecture - Plan composables with JSDoc type annotations
3. Implement - Build with

   <script setup>

   (no

   lang="ts"

   )
4. Document - Add comprehensive JSDoc comments for type safety
5. Test - Use Vitest with JavaScript files

Reference Guide

references/jsdoc-typing.md

references/composables-patterns.md

references/component-architecture.md

references/state-management.md

references/testing-patterns.md

• 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

Constraints

MUST DO

• Use Composition API with

  <script setup>

• Use JSDoc comments for type documentation
• Use .mjs extension for ES modules when needed
• Document function parameters with

  @param

• Document return types with

  @returns

• Use

  @typedef

  for complex object shapes
• Use

  @type

  annotations for 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 same component

Output Templates

1. Component file with

   <script setup>

   (no lang attribute)
2. JSDoc type definitions for complex props
3. Composable with

   @typedef

   and

   @param

   annotations
4. Brief note on type coverage

Knowledge Reference