feat: add Vue support (#66)

Co-authored-by: Colby McHenry <me@colbymchenry.com>
Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

src/extraction/grammars.ts

@@ -10,7 +10,7 @@ import * as path from 'path';
 import { Parser, Language as WasmLanguage } from 'web-tree-sitter';
 import { Language } from '../types';
 
-export type GrammarLanguage = Exclude<Language, 'svelte' | 'liquid' | 'unknown'>;
+export type GrammarLanguage = Exclude<Language, 'svelte' | 'vue' | 'liquid' | 'unknown'>;
 
 /**
  * WASM filename map — maps each language to its .wasm grammar file
@@ -68,6 +68,7 @@ export const EXTENSION_MAP: Record<string, Language> = {
   '.dart': 'dart',
   '.liquid': 'liquid',
   '.svelte': 'svelte',
+  '.vue': 'vue',
   '.pas': 'pascal',
   '.dpr': 'pascal',
   '.dpk': 'pascal',
@@ -201,6 +202,7 @@ function looksLikeCpp(source: string): boolean {
  */
 export function isLanguageSupported(language: Language): boolean {
   if (language === 'svelte') return true; // custom extractor (script block delegation)
+  if (language === 'vue') return true; // custom extractor (script block delegation)
   if (language === 'liquid') return true; // custom regex extractor
   if (language === 'unknown') return false;
   return language in WASM_GRAMMAR_FILES;
@@ -210,7 +212,7 @@ export function isLanguageSupported(language: Language): boolean {
  * Check if a grammar has been loaded and is ready for parsing.
  */
 export function isGrammarLoaded(language: Language): boolean {
-  if (language === 'svelte' || language === 'liquid') return true;
+  if (language === 'svelte' || language === 'vue' || language === 'liquid') return true;
   return languageCache.has(language);
 }
 
@@ -218,7 +220,7 @@ export function isGrammarLoaded(language: Language): boolean {
  * Get all supported languages (those with grammar definitions).
  */
 export function getSupportedLanguages(): Language[] {
-  return [...(Object.keys(WASM_GRAMMAR_FILES) as GrammarLanguage[]), 'svelte', 'liquid'];
+  return [...(Object.keys(WASM_GRAMMAR_FILES) as GrammarLanguage[]), 'svelte', 'vue', 'liquid'];
 }
 
 /**
@@ -282,6 +284,7 @@ export function getLanguageDisplayName(language: Language): string {
     kotlin: 'Kotlin',
     dart: 'Dart',
     svelte: 'Svelte',
+    vue: 'Vue',
     liquid: 'Liquid',
     pascal: 'Pascal / Delphi',
     unknown: 'Unknown',

src/extraction/tree-sitter.ts

@@ -22,6 +22,7 @@ import { EXTRACTORS } from './languages';
 import { LiquidExtractor } from './liquid-extractor';
 import { SvelteExtractor } from './svelte-extractor';
 import { DfmExtractor } from './dfm-extractor';
+import { VueExtractor } from './vue-extractor';
 
 // Re-export for backward compatibility
 export { generateNodeId } from './tree-sitter-helpers';
@@ -2489,6 +2490,12 @@ export function extractFromSource(
     return extractor.extract();
   }
 
+  // Use custom extractor for Vue
+  if (detectedLanguage === 'vue') {
+    const extractor = new VueExtractor(filePath, source);
+    return extractor.extract();
+  }
+
   // Use custom extractor for Liquid
   if (detectedLanguage === 'liquid') {
     const extractor = new LiquidExtractor(filePath, source);

src/extraction/vue-extractor.ts

@@ -0,0 +1,198 @@
+import { Node, Edge, ExtractionResult, ExtractionError, UnresolvedReference, Language } from '../types';
+import { generateNodeId } from './tree-sitter-helpers';
+import { TreeSitterExtractor } from './tree-sitter';
+import { isLanguageSupported } from './grammars';
+
+/**
+ * VueExtractor - Extracts code relationships from Vue Single-File Component files
+ *
+ * Vue SFCs are multi-language (script + template + style). Rather than
+ * parsing the full Vue grammar, we extract the <script> block content
+ * and delegate it to the TypeScript/JavaScript TreeSitterExtractor.
+ *
+ * Every .vue file produces a component node (Vue components are always importable).
+ */
+export class VueExtractor {
+  private filePath: string;
+  private source: string;
+  private nodes: Node[] = [];
+  private edges: Edge[] = [];
+  private unresolvedReferences: UnresolvedReference[] = [];
+  private errors: ExtractionError[] = [];
+
+  constructor(filePath: string, source: string) {
+    this.filePath = filePath;
+    this.source = source;
+  }
+
+  /**
+   * Extract from Vue source
+   */
+  extract(): ExtractionResult {
+    const startTime = Date.now();
+
+    try {
+      // Create component node for the .vue file itself
+      const componentNode = this.createComponentNode();
+
+      // Extract and process script blocks
+      const scriptBlocks = this.extractScriptBlocks();
+
+      for (const block of scriptBlocks) {
+        this.processScriptBlock(block, componentNode.id);
+      }
+    } catch (error) {
+      this.errors.push({
+        message: `Vue extraction error: ${error instanceof Error ? error.message : String(error)}`,
+        severity: 'error',
+      });
+    }
+
+    return {
+      nodes: this.nodes,
+      edges: this.edges,
+      unresolvedReferences: this.unresolvedReferences,
+      errors: this.errors,
+      durationMs: Date.now() - startTime,
+    };
+  }
+
+  /**
+   * Create a component node for the .vue file
+   */
+  private createComponentNode(): Node {
+    const lines = this.source.split('\n');
+    const fileName = this.filePath.split(/[/\\]/).pop() || this.filePath;
+    const componentName = fileName.replace(/\.vue$/, '');
+    const id = generateNodeId(this.filePath, 'component', componentName, 1);
+
+    const node: Node = {
+      id,
+      kind: 'component',
+      name: componentName,
+      qualifiedName: `${this.filePath}::${componentName}`,
+      filePath: this.filePath,
+      language: 'vue',
+      startLine: 1,
+      endLine: lines.length,
+      startColumn: 0,
+      endColumn: lines[lines.length - 1]?.length || 0,
+      isExported: true, // Vue components are always importable
+      updatedAt: Date.now(),
+    };
+
+    this.nodes.push(node);
+    return node;
+  }
+
+  /**
+   * Extract <script> and <script setup> blocks from the Vue source
+   */
+  private extractScriptBlocks(): Array<{
+    content: string;
+    startLine: number;
+    isSetup: boolean;
+    isTypeScript: boolean;
+  }> {
+    const blocks: Array<{
+      content: string;
+      startLine: number;
+      isSetup: boolean;
+      isTypeScript: boolean;
+    }> = [];
+
+    const scriptRegex = /<script(\s[^>]*)?>(?<content>[\s\S]*?)<\/script>/g;
+    let match;
+
+    while ((match = scriptRegex.exec(this.source)) !== null) {
+      const attrs = match[1] || '';
+      const content = match.groups?.content || match[2] || '';
+
+      // Detect TypeScript from lang attribute
+      const isTypeScript = /lang\s*=\s*["'](ts|typescript)["']/.test(attrs);
+
+      // Detect <script setup>
+      const isSetup = /\bsetup\b/.test(attrs);
+
+      // Calculate start line of the script content (line after <script>)
+      const beforeScript = this.source.substring(0, match.index);
+      const scriptTagLine = (beforeScript.match(/\n/g) || []).length;
+      // The content starts on the line after the opening <script> tag
+      const openingTag = match[0].substring(0, match[0].indexOf('>') + 1);
+      const openingTagLines = (openingTag.match(/\n/g) || []).length;
+      const contentStartLine = scriptTagLine + openingTagLines + 1; // 0-indexed line
+
+      blocks.push({
+        content,
+        startLine: contentStartLine,
+        isSetup,
+        isTypeScript,
+      });
+    }
+
+    return blocks;
+  }
+
+  /**
+   * Process a script block by delegating to TreeSitterExtractor
+   */
+  private processScriptBlock(
+    block: { content: string; startLine: number; isSetup: boolean; isTypeScript: boolean },
+    componentNodeId: string
+  ): void {
+    const scriptLanguage: Language = block.isTypeScript ? 'typescript' : 'javascript';
+
+    // Check if the script language parser is available
+    if (!isLanguageSupported(scriptLanguage)) {
+      this.errors.push({
+        message: `Parser for ${scriptLanguage} not available, cannot parse Vue script block`,
+        severity: 'warning',
+      });
+      return;
+    }
+
+    // Delegate to TreeSitterExtractor
+    const extractor = new TreeSitterExtractor(this.filePath, block.content, scriptLanguage);
+    const result = extractor.extract();
+
+    // Offset line numbers from script block back to .vue file positions
+    for (const node of result.nodes) {
+      node.startLine += block.startLine;
+      node.endLine += block.startLine;
+      node.language = 'vue'; // Mark as vue, not TS/JS
+
+      this.nodes.push(node);
+
+      // Add containment edge from component to this node
+      this.edges.push({
+        source: componentNodeId,
+        target: node.id,
+        kind: 'contains',
+      });
+    }
+
+    // Offset edges (they reference line numbers)
+    for (const edge of result.edges) {
+      if (edge.line) {
+        edge.line += block.startLine;
+      }
+      this.edges.push(edge);
+    }
+
+    // Offset unresolved references
+    for (const ref of result.unresolvedReferences) {
+      ref.line += block.startLine;
+      ref.filePath = this.filePath;
+      ref.language = 'vue';
+      this.unresolvedReferences.push(ref);
+    }
+
+    // Carry over errors
+    for (const error of result.errors) {
+      if (error.line) {
+        error.line += block.startLine;
+      }
+      this.errors.push(error);
+    }
+  }
+}

src/resolution/frameworks/index.ts

@@ -9,6 +9,7 @@ import { laravelResolver } from './laravel';
 import { expressResolver } from './express';
 import { reactResolver } from './react';
 import { svelteResolver } from './svelte';
+import { vueResolver } from './vue';
 import { djangoResolver, flaskResolver, fastapiResolver } from './python';
 import { railsResolver } from './ruby';
 import { springResolver } from './java';
@@ -27,6 +28,7 @@ const FRAMEWORK_RESOLVERS: FrameworkResolver[] = [
   expressResolver,
   reactResolver,
   svelteResolver,
+  vueResolver,
   // Python
   djangoResolver,
   flaskResolver,
@@ -91,6 +93,7 @@ export { laravelResolver, FACADE_MAPPINGS } from './laravel';
 export { expressResolver } from './express';
 export { reactResolver } from './react';
 export { svelteResolver } from './svelte';
+export { vueResolver } from './vue';
 export { djangoResolver, flaskResolver, fastapiResolver } from './python';
 export { railsResolver } from './ruby';
 export { springResolver } from './java';

src/resolution/frameworks/vue.ts

@@ -0,0 +1,338 @@
+/**
+ * Vue / Nuxt Framework Resolver
+ *
+ * Handles Vue component references, compiler macros (defineProps, etc.),
+ * Nuxt auto-imports, and Nuxt file-based routing patterns.
+ */
+
+import { Node } from '../../types';
+import { FrameworkResolver, UnresolvedRef, ResolvedRef, ResolutionContext } from '../types';
+
+/**
+ * Vue 3 compiler macros — compiler-provided, not user code
+ */
+const VUE_COMPILER_MACROS = new Set([
+  'defineProps',
+  'defineEmits',
+  'defineExpose',
+  'defineOptions',
+  'defineSlots',
+  'defineModel',
+  'withDefaults',
+]);
+
+/**
+ * Nuxt auto-imported composables and utilities
+ */
+const NUXT_AUTO_IMPORTS = new Set([
+  // Routing
+  'useRoute',
+  'useRouter',
+  'navigateTo',
+  'abortNavigation',
+  // Data fetching
+  'useFetch',
+  'useAsyncData',
+  'useLazyFetch',
+  'useLazyAsyncData',
+  'refreshNuxtData',
+  // State
+  'useState',
+  'clearNuxtState',
+  // Head
+  'useHead',
+  'useSeoMeta',
+  'useServerSeoMeta',
+  // Runtime
+  'useRuntimeConfig',
+  'useAppConfig',
+  'useNuxtApp',
+  // Cookies
+  'useCookie',
+  // Error
+  'useError',
+  'createError',
+  'showError',
+  'clearError',
+  // Page/layout
+  'definePageMeta',
+  'defineNuxtConfig',
+  'defineNuxtPlugin',
+  'defineNuxtRouteMiddleware',
+  // Request
+  'useRequestHeaders',
+  'useRequestEvent',
+  'useRequestFetch',
+  'useRequestURL',
+]);
+
+/**
+ * Nuxt virtual module prefixes (auto-import namespaces)
+ */
+const NUXT_VIRTUAL_MODULES = [
+  '#imports',
+  '#components',
+  '#app',
+  '#build',
+  '#head',
+];
+
+export const vueResolver: FrameworkResolver = {
+  name: 'vue',
+
+  detect(context: ResolutionContext): boolean {
+    // Check for vue or nuxt in package.json
+    const packageJson = context.readFile('package.json');
+    if (packageJson) {
+      try {
+        const pkg = JSON.parse(packageJson);
+        const deps = { ...pkg.dependencies, ...pkg.devDependencies };
+        if (deps.vue || deps.nuxt || deps['@nuxt/kit']) {
+          return true;
+        }
+      } catch {
+        // Invalid JSON
+      }
+    }
+
+    // Check for .vue files in project
+    const allFiles = context.getAllFiles();
+    return allFiles.some((f) => f.endsWith('.vue'));
+  },
+
+  resolve(ref: UnresolvedRef, context: ResolutionContext): ResolvedRef | null {
+    // Pattern 1: Vue compiler macros (defineProps, defineEmits, etc.)
+    if (VUE_COMPILER_MACROS.has(ref.referenceName)) {
+      return {
+        original: ref,
+        targetNodeId: ref.fromNodeId,
+        confidence: 1.0,
+        resolvedBy: 'framework',
+      };
+    }
+
+    // Pattern 2: Nuxt auto-imported composables
+    if (NUXT_AUTO_IMPORTS.has(ref.referenceName)) {
+      return {
+        original: ref,
+        targetNodeId: ref.fromNodeId,
+        confidence: 1.0,
+        resolvedBy: 'framework',
+      };
+    }
+
+    // Pattern 3: Nuxt virtual module imports (#imports, #components, etc.)
+    if (ref.referenceKind === 'imports' && ref.referenceName.startsWith('#')) {
+      if (NUXT_VIRTUAL_MODULES.some((prefix) => ref.referenceName.startsWith(prefix))) {
+        return {
+          original: ref,
+          targetNodeId: ref.fromNodeId,
+          confidence: 1.0,
+          resolvedBy: 'framework',
+        };
+      }
+    }
+
+    // Pattern 4: @ alias imports (@/components/Foo -> src/components/Foo)
+    if (ref.referenceKind === 'imports' && ref.referenceName.startsWith('@/')) {
+      const aliasPath = ref.referenceName.replace('@/', 'src/');
+      for (const ext of ['', '.ts', '.js', '.vue', '/index.ts', '/index.js', '/index.vue']) {
+        const fullPath = aliasPath + ext;
+        if (context.fileExists(fullPath)) {
+          const nodes = context.getNodesInFile(fullPath);
+          if (nodes.length > 0) {
+            return {
+              original: ref,
+              targetNodeId: nodes[0]!.id,
+              confidence: 0.9,
+              resolvedBy: 'framework',
+            };
+          }
+        }
+      }
+    }
+
+    // Pattern 5: ~ alias imports (~/components/Foo -> src/components/Foo, Nuxt convention)
+    if (ref.referenceKind === 'imports' && ref.referenceName.startsWith('~/')) {
+      const aliasPath = ref.referenceName.replace('~/', 'src/');
+      for (const ext of ['', '.ts', '.js', '.vue', '/index.ts', '/index.js', '/index.vue']) {
+        const fullPath = aliasPath + ext;
+        if (context.fileExists(fullPath)) {
+          const nodes = context.getNodesInFile(fullPath);
+          if (nodes.length > 0) {
+            return {
+              original: ref,
+              targetNodeId: nodes[0]!.id,
+              confidence: 0.9,
+              resolvedBy: 'framework',
+            };
+          }
+        }
+      }
+    }
+
+    // Pattern 6: Component references (PascalCase) — resolve to .vue files
+    if (isPascalCase(ref.referenceName) && ref.referenceKind === 'calls') {
+      const result = resolveComponent(ref.referenceName, ref.filePath, context);
+      if (result) {
+        return {
+          original: ref,
+          targetNodeId: result,
+          confidence: 0.8,
+          resolvedBy: 'framework',
+        };
+      }
+    }
+
+    return null;
+  },
+
+  extractNodes(filePath: string, _content: string): Node[] {
+    const nodes: Node[] = [];
+    const now = Date.now();
+
+    // Normalize to forward slashes
+    const normalized = filePath.replace(/\\/g, '/');
+
+    // Detect Nuxt page routes (pages/ directory)
+    const pagesIndex = normalized.indexOf('/pages/');
+    if (pagesIndex !== -1 && normalized.endsWith('.vue')) {
+      const routePath = filePathToNuxtRoute(normalized, pagesIndex + '/pages/'.length);
+      if (routePath !== null) {
+        nodes.push({
+          id: `route:${filePath}:${routePath}:1`,
+          kind: 'route',
+          name: routePath,
+          qualifiedName: `${filePath}::route:${routePath}`,
+          filePath,
+          startLine: 1,
+          endLine: 1,
+          startColumn: 0,
+          endColumn: 0,
+          language: 'vue',
+          updatedAt: now,
+        });
+      }
+    }
+
+    // Detect Nuxt API routes (server/api/ directory)
+    const apiIndex = normalized.indexOf('/server/api/');
+    if (apiIndex !== -1) {
+      const afterApi = normalized.substring(apiIndex + '/server/api/'.length);
+      const routeName = afterApi
+        .replace(/\.[^/.]+$/, '') // Remove extension
+        .replace(/\/index$/, ''); // index -> parent path
+      const apiRoute = '/api/' + routeName;
+
+      nodes.push({
+        id: `route:${filePath}:${apiRoute}:1`,
+        kind: 'route',
+        name: apiRoute,
+        qualifiedName: `${filePath}::route:${apiRoute}`,
+        filePath,
+        startLine: 1,
+        endLine: 1,
+        startColumn: 0,
+        endColumn: 0,
+        language: normalized.endsWith('.vue') ? 'vue' : 'typescript',
+        updatedAt: now,
+      });
+    }
+
+    // Detect Nuxt middleware (middleware/ directory)
+    const middlewareIndex = normalized.indexOf('/middleware/');
+    if (middlewareIndex !== -1) {
+      const afterMiddleware = normalized.substring(middlewareIndex + '/middleware/'.length);
+      const middlewareName = afterMiddleware.replace(/\.[^/.]+$/, '');
+
+      nodes.push({
+        id: `middleware:${filePath}:${middlewareName}:1`,
+        kind: 'function',
+        name: middlewareName,
+        qualifiedName: `${filePath}::middleware:${middlewareName}`,
+        filePath,
+        startLine: 1,
+        endLine: 1,
+        startColumn: 0,
+        endColumn: 0,
+        language: normalized.endsWith('.vue') ? 'vue' : 'typescript',
+        updatedAt: now,
+      });
+    }
+
+    return nodes;
+  },
+};
+
+/**
+ * Check if string is PascalCase
+ */
+function isPascalCase(str: string): boolean {
+  return /^[A-Z][a-zA-Z0-9]*$/.test(str);
+}
+
+/**
+ * Resolve a Vue component reference to its .vue file
+ */
+function resolveComponent(
+  name: string,
+  fromFile: string,
+  context: ResolutionContext
+): string | null {
+  const allFiles = context.getAllFiles();
+  const vueFiles = allFiles.filter((f) => f.endsWith('.vue'));
+
+  // Check for exact name match (Button -> Button.vue)
+  for (const file of vueFiles) {
+    const fileName = file.split(/[/\\]/).pop() || '';
+    const componentName = fileName.replace(/\.vue$/, '');
+    if (componentName === name) {
+      const nodes = context.getNodesInFile(file);
+      const component = nodes.find((n) => n.kind === 'component' && n.name === name);
+      if (component) {
+        return component.id;
+      }
+    }
+  }
+
+  // Check same directory first for better specificity
+  const fromDir = fromFile.substring(0, fromFile.lastIndexOf('/'));
+  for (const file of vueFiles) {
+    if (file.startsWith(fromDir)) {
+      const fileName = file.split(/[/\\]/).pop() || '';
+      const componentName = fileName.replace(/\.vue$/, '');
+      if (componentName === name) {
+        const nodes = context.getNodesInFile(file);
+        const component = nodes.find((n) => n.kind === 'component');
+        if (component) {
+          return component.id;
+        }
+      }
+    }
+  }
+
+  return null;
+}
+
+/**
+ * Convert a file path to a Nuxt route path
+ */
+function filePathToNuxtRoute(normalized: string, afterPagesStart: number): string | null {
+  const afterPages = normalized.substring(afterPagesStart);
+
+  // Remove the .vue extension
+  const withoutExt = afterPages.replace(/\.vue$/, '');
+
+  // Remove /index suffix (index.vue -> parent route)
+  const withoutIndex = withoutExt.replace(/\/index$/, '');
+
+  // Convert Nuxt param syntax [param] to :param
+  let route = '/' + withoutIndex
+    .replace(/\[\.\.\.([^\]]+)\]/g, '*$1')  // [...slug] -> *slug (catch-all)
+    .replace(/\[{2}([^\]]+)\]{2}/g, ':$1?') // [[optional]] -> :optional?
+    .replace(/\[([^\]]+)\]/g, ':$1');        // [param] -> :param
+
+  if (route === '/') return '/';
+  // Remove trailing slash
+  return route.replace(/\/$/, '');
+}

src/types.ts

@@ -81,6 +81,7 @@ export const LANGUAGES = [
   'kotlin',
   'dart',
   'svelte',
+  'vue',
   'liquid',
   'pascal',
   'unknown',
@@ -529,6 +530,8 @@ export const DEFAULT_CONFIG: CodeGraphConfig = {
     '**/*.dart',
     // Svelte
     '**/*.svelte',
+    // Vue
+    '**/*.vue',
     // Liquid (Shopify themes)
     '**/*.liquid',
     // Pascal / Delphi