Skip to content

feat: add Vue SFC language support (tree-sitter + Volar LSP) #170

@jafreck

Description

@jafreck

Summary

Add Vue Single File Component (SFC) support via tree-sitter + Volar LSP, leveraging existing TypeScript infrastructure.

Tooling

Component Tool Notes
Tree-sitter grammar tree-sitter-vue Stable, widely used
LSP server vue-language-server (Volar) Official Vue team, very active, TypeScript-grade intelligence
SCIP indexer None N/A

What to implement

Phase 1: Script block extraction

  • Add tree-sitter-vue as an npm dependency
  • Create src/indexer/extractors/vue.ts:
    • Parse the SFC structure to locate <script> and <script setup> blocks
    • Delegate <script> content to the existing TypeScript/JavaScript extractor for symbol and call-ref extraction
    • Extract component name from defineComponent({ name: '...' }) or <script setup> filename convention
    • Extract defineProps(), defineEmits(), defineExpose() as interface-like symbols
    • Extract import statements from <script> as file imports
  • Register vue in SourceIndexStage EXTRACTORS map and ParserPool LANG_PACKAGES
  • Add vue-language-server to src/indexer/lsp/registry.ts: { command: 'vue-language-server', args: ['--stdio'] }
  • Add file extension .vue to walker
  • Add test fixtures in tests/fixtures/vue/
  • Add extractor tests

Phase 2: Template component references (follow-up)

  • Extract <ComponentName /> usage in <template> as call refs (component invocation edges)
  • Resolve component names to their import sources
  • Extract v-slot, v-bind, v-on directive targets as refs

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions