vue-component-navigator

VS Code navigation helpers for Vue 2 Options API projects and Vue 3 <script setup> static relationships.

中文文档: README.zh-CN.md

This extension focuses on static relationships that are easy to miss in Vue codebases. It complements the official Vue tooling instead of replacing it, so local component tag definitions are intentionally left to the Vue language extension to avoid duplicate results.

Current documented feature set: 2.1.0.

2.0 Runtime Split

Version 2.0.0 rebuilds the indexer around isolated Vue major-version runtimes. A Vue 2 workspace and a Vue 3 workspace can be supported by the same extension codebase, but only the matching runtime is used for a given project.

• Vue 2 keeps the Options API feature set, including mixins, Event Bus, global components, and third-party $refs helpers.
• Vue 2 SFC blocks are split by a lightweight lexical block scanner, so valid Vue 2 template syntax such as v-bind.sync cannot break indexing.
• Vue 3 uses @vue/language-core for SFC structure and macro-aware script ranges instead of the old Vue 3 script parser path.
• Vue 3 relationship indexing is focused on static component contracts: defineProps, defineEmits, defineModel, defineSlots, defineExpose, typed template refs, composable return members, and static provide/inject keys.
• Vue 2 and Vue 3 relationship graphs and reverse-index rebuilds are isolated by detected package version. Cross-version component imports are ignored, and runtime cache invalidation is scoped to the owning package root.
• The VSIX reuses VS Code's built-in TypeScript runtime for Vue 3 indexing instead of bundling a full TypeScript copy into extension.js.

Demos

$refs Navigation

Shows jumping from this.$refs.child.open() to the child component method, with method completion and hover.

Props And Events

Shows template prop definition lookup, component $emit lookup, hover summaries, and reverse references.

Event Bus

Shows $emit, $on, $once, and $off navigation, event-name completion, method completion, and hover labels.

provide / inject

Shows jumping from static inject keys to the nearest static provider, and from providers back to consumers.

Feature Matrix

Vue 3 Static Prop Relationships

Vue 3 prop navigation links parent template prop usage to child defineProps declarations when the relationship can be proven statically.

Supported template forms include:

• Direct props such as <Child :title="title" /> and kebab/camel case variants.
• v-model / v-model:name, indexed as both model prop usage and update:* event usage.
• Wrapper fallthrough through <Child v-bind="$attrs" />.
• useAttrs() aliases passed with v-bind, including simple computed(() => ({ ...attrs })) wrappers.
• mergeProps($attrs, props) when each argument can be resolved statically.
• Static object v-bind, including object literals and objects wrapped in ref, shallowRef, reactive, shallowReactive, readonly, markRaw, or simple computed arrow returns.
• Top-level aliases to defineProps() / withDefaults(defineProps(), ...).
• Top-level rest bindings such as const { title, ...forwardedProps } = props, including type annotations on the destructuring pattern.
• Multiple declarators in one statement, such as const ignored = {}, childProps = { title: 'ok' }.

The scanner only follows top-level bindings in the component script blocks. It does not evaluate runtime branches, imported object values, dynamic property names, or complex TypeScript type expansion.

Event Bus Entry

Event Bus names are detected from Vue prototype registrations in entry files.

Default entry files:

• src/main.js
• src/index.js
• src/main.ts
• src/index.ts

If your project uses different bootstrap files, set vueComponentNavigator.entry to a workspace-relative path, an alias path, or an array of paths. Configured entries support aliases from compilerOptions.baseUrl / compilerOptions.paths in jsconfig.json or tsconfig.json.

The scanner only checks the entry file and one layer of literal import, import(), or require() targets. It does not recursively crawl the whole project.

Event Bus usage is ignored until the bus name is found from these entry files. There is no built-in fallback for $bus.

Commands

Command Components

Imperative component wrappers are linked to their final business call sites when the relationship can be proven statically. Detection is content-based; command files do not need to use a specific filename.

A command module must:

• Default-import a workspace .vue component.
• Render that component through Vue 2 JSX or Vue 3 JSX, h(), or createVNode().
• Default-export a command object, either inline or through a local variable.

Supported exported methods include object methods, async object methods, local handler references, function expressions, and arrow functions:

const Dialog = {
  open() {},
  async confirm() {},
  alert: alertHandler,
  close: () => {},
}

export default Dialog

Business calls such as Dialog.open() and Dialog.confirm() appear in the real component's usage CodeLens. The command script also shows a clickable Used by N usages CodeLens. Hovering an exported method shows only that method's usage count and call locations.

Only default imports followed by direct member calls are indexed. Calls to methods that are not present in the exported command object are ignored. Destructured calls, computed property calls, CommonJS imports, runtime-generated method names, and cross-Vue-version relationships are intentionally out of scope.

Configuration

Boundaries

• Vue 2 and Vue 3 workspaces are indexed by detected Vue major version; their feature sets are intentionally separated.
• Component relationships never cross Vue major versions. A Vue 2 package importing a Vue 3 component, or the reverse, produces no component, prop, event, slot, ref, or provide/inject relationship.
• Files outside the workspace are ignored.
• Dynamic component names, computed provide / inject keys, runtime-only event names, and dynamic Event Bus names are out of scope.
• Route lazy component imports and <router-view> slot components are route configuration relationships, not template parent-child component usages.
• Runtime-only <component :is="..."> variables are ignored unless a static map can prove the candidate components.
• Complex TypeScript expansion such as conditional, mapped, or intersection type evaluation is intentionally limited.
• Static object v-bind support is intentionally conservative. When the value comes from runtime control flow, an imported object, or a function return that cannot be resolved locally, it is ignored.
• Command-component analysis only follows statically visible default imports, exported object methods, and direct member calls such as Dialog.open().

The parser is deliberately conservative. When a relationship cannot be proven statically, the extension avoids returning a misleading result.