vue-harvest

Point it at a Vue project. It finds every component, figures out which ones are reusable, and extracts them. It also pulls out your design tokens (colors, spacing, typography) and gives you a visual report.

The hard cases that need judgment (store-coupled components, ambiguous dependencies) get handled by an MCP server that feeds structured analysis to an LLM.

What it does

Component extraction. Parses every .vue file in a project using @vue/compiler-sfc. For each component it extracts the full interface (props, emits, slots), maps out the dependency graph, detects coupling issues, and scores a confidence level for safe extraction. Components above the threshold get auto-extracted into standalone bundles with rewritten imports and a manifest of peer dependencies.

Design token extraction. Scans all CSS (scoped styles, standalone stylesheets) and pulls out colors, font families, font sizes, font weights, spacing values, border radii, and shadows. Outputs a CSS custom properties file, a JSON dump, and a visual HTML explorer showing swatches and scales.

MCP server. Twelve tools that give an LLM the structured data it needs to reason about the harder cases: components in the 30-70% confidence range that could be extracted with some refactoring. The LLM can deep-analyze coupling, generate decoupling suggestions with before/after code, create composable wrappers for store-bound components, and do full rewrite-and-extract in one shot.

Install

npm install -g vue-harvest

# or run directly
npx vue-harvest analyze ./my-app

For the MCP server:

npm install -g vue-harvest-mcp

CLI

vue-harvest analyze [path]

Full analysis pipeline. Discovers .vue files, parses interfaces, builds the dependency graph, classifies every component, auto-extracts the safe ones, and generates a registry + catalog.

vue-harvest analyze
vue-harvest analyze ./path/to/project
vue-harvest analyze --threshold 60
vue-harvest analyze --output ./harvested
vue-harvest analyze --json | jq '.summary'

Output goes to .vue-harvest/ by default:

.vue-harvest/
  registry.json       Component registry (shadcn-compatible format)
  catalog.html        Browsable catalog with tier filters
  analysis.json       Full analysis dump for the MCP server
  SUMMARY.md          Human-readable report
  components/         Extracted component bundles
    Button/
      Button.vue
      manifest.json
    Card/
      Card.vue
      manifest.json

vue-harvest list [path]

Lists all components sorted by extraction confidence.

vue-harvest list
vue-harvest list --tier primitive
vue-harvest list --json

vue-harvest inspect <name>

Full breakdown of a single component: props, events, slots, dependencies, coupling issues, style analysis.

vue-harvest inspect Button
vue-harvest inspect UserProfileCard --json

vue-harvest extract <name>

Extracts a specific component and all its local dependencies into a standalone bundle.

vue-harvest extract Button
vue-harvest extract UserProfileCard --force
vue-harvest extract Card --output ./my-components

vue-harvest tokens [path]

Extracts design system tokens from the project.

vue-harvest tokens
vue-harvest tokens --json
vue-harvest tokens --output ./design-system

Outputs:

• tokens.css with CSS custom properties
• tokens.json with the full token dataset
• design-system.html with a visual explorer (color swatches, font scales, spacing visualization)

vue-harvest init

Creates a harvest.config.json with detected project settings.

Configuration

Optional. Place a harvest.config.json in the project root:

{
  "include": ["**/*.vue"],
  "exclude": [
    "node_modules/**",
    "dist/**",
    "**/*.test.*",
    "**/*.story.*"
  ],
  "extractionThreshold": 70,
  "outDir": ".vue-harvest",
  "registry": "json"
}

Path aliases are auto-detected from tsconfig.json. If y

... View full README on GitHub