Summary
Add Vue Single File Component (SFC) support via tree-sitter + Volar LSP, leveraging existing TypeScript infrastructure.
Tooling
What to implement
Phase 1: Script block extraction
Phase 2: Template component references (follow-up)
Language notes
- Vue SFCs have three sections:
<template>, <script>, <style> — only <script> is relevant for the call graph
<script setup> (Vue 3 Composition API) is syntactic sugar where top-level bindings are automatically exposed
- Volar provides full TypeScript-level type checking inside templates, making LSP enrichment very effective
- Component-to-component edges (
<MyChild />) are the primary structural relationship in Vue apps
- Vue 3 composables (
useXxx() functions) are the main call-graph pattern in modern Vue code
Context
Vue is a top-3 web framework. Most Vue projects are TypeScript-based, so the existing TS extractor handles the script logic. The main value-add is recognizing the SFC structure and component references.
Summary
Add Vue Single File Component (SFC) support via tree-sitter + Volar LSP, leveraging existing TypeScript infrastructure.
Tooling
tree-sitter-vuevue-language-server(Volar)What to implement
Phase 1: Script block extraction
tree-sitter-vueas an npm dependencysrc/indexer/extractors/vue.ts:<script>and<script setup>blocks<script>content to the existing TypeScript/JavaScript extractor for symbol and call-ref extractionnamefromdefineComponent({ name: '...' })or<script setup>filename conventiondefineProps(),defineEmits(),defineExpose()as interface-like symbolsimportstatements from<script>as file importsvueinSourceIndexStageEXTRACTORS map andParserPoolLANG_PACKAGESvue-language-servertosrc/indexer/lsp/registry.ts:{ command: 'vue-language-server', args: ['--stdio'] }.vueto walkertests/fixtures/vue/Phase 2: Template component references (follow-up)
<ComponentName />usage in<template>as call refs (component invocation edges)v-slot,v-bind,v-ondirective targets as refsLanguage notes
<template>,<script>,<style>— only<script>is relevant for the call graph<script setup>(Vue 3 Composition API) is syntactic sugar where top-level bindings are automatically exposed<MyChild />) are the primary structural relationship in Vue appsuseXxx()functions) are the main call-graph pattern in modern Vue codeContext
Vue is a top-3 web framework. Most Vue projects are TypeScript-based, so the existing TS extractor handles the script logic. The main value-add is recognizing the SFC structure and component references.