DeepGraph Vue Integrated

Analyze Vue.js applications with deep insight into component composition, reactive data flow, template-script relationships, and dependency structures through the DeepGraph MCP server.

When to Use This MCP Server

Connect this server when you need to:

• Map component hierarchies, prop chains, and event emission patterns across a Vue.js application to understand data flow before refactoring
• Detect unused components, circular component imports, and orphaned Vuex/Pinia store modules in large Vue.js projects
• Analyze template-script relationships including directive usage, computed property dependencies, and watcher chains for optimization opportunities

Consider alternatives when:

• Your project uses React, Next.js, or another non-Vue framework that has its own dedicated DeepGraph MCP server
• You need runtime performance profiling of Vue.js reactivity, where Vue DevTools browser extension provides real-time reactive dependency tracking

Quick Start

Configuration

Copy
name: deepgraph-vue-integrated
type: mcp
category: deepgraph

Example Connection

Copy
claude mcp:connect deepgraph-vue-integrated

Available Tools

component-tree:      Build complete component hierarchy with parent-child relationships
prop-flow:           Trace prop definitions and their consumer components across the app
event-map:           Map custom event emissions to their handler registrations
store-analysis:      Analyze Vuex or Pinia store modules, actions, mutations, and getters
template-analysis:   Parse Vue SFC templates for directive usage and binding patterns

Core Concepts

Vue DeepGraph Analysis Overview

Aspect	Details
Transport	stdio-based process via npx running mcp-code-graph targeting Vue.js core
SFC Parsing	Extracts and correlates template, script, and style blocks from .vue files
Reactivity Mapping	Traces computed properties, watchers, and reactive references to their data sources
Store Integration	Analyzes Vuex and Pinia store connections including mapState/mapActions helpers
Composition API	Full support for setup(), composables, ref(), reactive(), and provide/inject

Vue Analysis Architecture

Claude Code IDE
    |
    v
[MCP Client] --stdio--> [mcp-code-graph (Vue)]
                              |
                              v
                     [Vue SFC Parser]
                      /       |        \
               <template>  <script>  <style>
                      \       |        /
                    [Component Graph Builder]
                              |
                    +---------+---------+
                    |         |         |
                    v         v         v
               Props/     Store      Directive
               Events    Modules     Analysis

Configuration

Parameter	Type	Default	Description
project_path	string	cwd	Root directory of the Vue.js project to analyze
vue_version	integer	3	Vue.js major version (2 or 3) for parser compatibility
include_composables	boolean	true	Include Composition API composables in dependency analysis
store_type	string	auto-detect	State management library: vuex, pinia, or auto-detect
parse_styles	boolean	false	Include scoped style analysis for CSS class usage tracking

Best Practices

1. Map Component Trees Before Restructuring - Generate a full component-tree before reorganizing your component directory structure. Understanding parent-child relationships and slot usage patterns prevents breaking implicit dependencies during file moves.

2. Trace Prop Flow for Type Safety - Use prop-flow to identify components receiving props without proper type definitions. In Vue 3, this analysis helps migrate from runtime props validation to TypeScript-based defineProps for compile-time type checking.

3. Audit Event Emission Coverage - Run event-map to find emitted events that lack handler registrations, or handlers listening for events that are never emitted. These disconnected event chains indicate dead code or missing integrations.

4. Analyze Store Module Boundaries - Use store-analysis to verify that Vuex or Pinia store modules have clear boundaries and minimal cross-module dependencies. Tightly coupled store modules complicate testing and make state management harder to reason about.

5. Set Vue Version Explicitly - Always configure vue_version to match your project. Vue 2 and Vue 3 have different SFC compilation, reactivity systems, and API surfaces. Mismatched version settings produce inaccurate analysis results.

Common Issues

1. SFC Parse Error on Non-Standard Blocks - Custom SFC blocks like <i18n> or <docs> may cause parse errors. The analyzer focuses on template, script, and style blocks; custom blocks are safely skipped but may trigger warnings.

2. Composition API Not Detected in Vue 2 - If you are using the @vue/composition-api plugin in a Vue 2 project, set vue_version to 2 and enable include_composables. The analyzer adapts its parsing strategy based on the version setting.

3. Store Analysis Returns Empty for Pinia - Ensure store_type is set to pinia if auto-detection fails. Pinia stores using the setup syntax (function-based) require explicit configuration to be properly parsed and included in the analysis.