Vue Component Usages
Find and navigate Vue component usages across your workspace — fast, index-based, and zero-config.
Vue templates are exactly where VS Code's built-in Find All References falls short: kebab-case tags, globally registered components and components.d.ts auto-imports break the semantic link between a component and the places using it. This extension closes that gap with a workspace-wide usage index.
Features
- Grouped results list — usages are grouped by file, one entry per line of code, with an icon and a label for each usage kind. Type to filter by code or kind.
- Live editor preview — while you move through the list with
↑/↓, the editor previews each usage in place (WebStorm-style): the file opens as a reused preview tab, centered on the highlighted line. Enter opens it for real, Esc takes you back exactly where you were.
- Usage CodeLens — every
.vue file shows a lens at the top with the live usage count. Click it to open the list.
- References view — one click sends all results to VS Code's native References peek, handy when there are dozens of usages.
- Naming-convention aware — PascalCase and kebab-case are matched interchangeably (
<UserCard /> ≡ <user-card>).
components.d.ts support — resolves aliases generated by unplugin-vue-components for globally auto-registered components.- Cursor-aware — place the cursor on any component tag and run Show Usages to search that component instead of the current file.
- Persistent index — cached per workspace and refreshed incrementally as you edit, so lookups are instant even on large projects.
Usage
- Open a
.vue file (or place the cursor on a component tag).
- Run Show Usages — via the CodeLens, the editor title button, the context menu, the Command Palette, or
Ctrl+G Ctrl+U (Cmd+G Cmd+U on macOS).
- Navigate the list with
↑/↓ to preview each usage, press Enter to jump to it.
What counts as a usage
| Kind |
Example |
| Template tag |
<UserCard />, <user-card> |
| Static import |
import UserCard from './UserCard.vue', import { UserCard } from './ui' |
| Dynamic import |
() => import('./UserCard.vue'), defineAsyncComponent(...) |
| Dynamic component |
<component :is="'UserCard'">, is="user-card" |
| Global registration |
app.component('UserCard', …), resolveComponent('UserCard') |
Design notes
A few deliberate choices about what is (and isn't) reported:
- Closing tags don't count.
<UserCard>…</UserCard> is one usage, not two — a closing tag always has a matching opening tag, so counting both would only inflate numbers.
- Comments don't count (by default). Commented-out code —
<!-- <UserCard /> -->, // import UserCard…, /* … */ — is ignored, so counts reflect live code only. Set vueComponentUsages.searchInComments: true to restore the old behavior.
- Strings do count, on purpose. Many legitimate usages live inside string literals:
app.component('UserCard', …), resolveComponent('UserCard'), import('./UserCard.vue'), is="user-card", and inline template: strings. Skipping strings would break all of them, so string contents are scanned. The flip side is that a decorative string like const s = '<UserCard />' in a test fixture counts as a usage — if that ever bothers you, exclude the file (exclude/excludeFolders) or the component (ignoredTags).
- Text scanning, not a language server. Matching is regex-based: it stays instant on thousands of files and keeps working on syntactically broken code while you type — the trade-off is no module resolution, so two components with the same name in different folders are matched together. For semantic, rename-safe references in
<script> code, Volar's Find All References remains the right tool; this extension covers the template-side cases it can't see.
Commands
| Command |
Description |
Vue Component Usages: Show Usages |
List and open usages of the current component |
Vue Component Usages: Rebuild Index |
Force a full re-index of the workspace |
Vue Component Usages: Index Status |
Show index size and statistics |
Settings
Indexing:
| Setting |
Default |
Description |
vueComponentUsages.include |
**/*.{vue,js,jsx,ts,tsx} |
Glob used when searching component usages |
vueComponentUsages.excludeFolders |
node_modules, dist, build, .git |
Folder names excluded from indexing |
vueComponentUsages.exclude |
(empty) |
Advanced: exclude glob; when set it overrides excludeFolders |
vueComponentUsages.ignoredTags |
(empty) |
Component names to ignore entirely (e.g. UI-library components like ElButton) |
vueComponentUsages.searchInComments |
false |
Also report usages found inside comments |
vueComponentUsages.indexOnStartup |
true |
Build/refresh the index when VS Code starts |
vueComponentUsages.maxFiles |
12000 |
Maximum number of files in the index |
vueComponentUsages.maxFileSizeKB |
1024 |
Files larger than this are skipped |
vueComponentUsages.maxResults |
800 |
Maximum number of usages shown |
vueComponentUsages.watchDebounceMs |
300 |
Delay before re-indexing changed files |
vueComponentUsages.scanComponentsDts |
true |
Resolve global aliases from components.d.ts |
vueComponentUsages.componentsDtsMaxFiles |
50 |
Maximum components.d.ts files scanned |
Changing an indexing setting rebuilds the index automatically.
Appearance:
| Setting |
Default |
Description |
vueComponentUsages.codeLens |
true |
Usage-count CodeLens at the top of .vue files |
vueComponentUsages.statusBar |
true |
Index status (Vue usages: N files) in the status bar |
vueComponentUsages.editorTitleButton |
true |
Show Usages button in the editor title bar |
vueComponentUsages.contextMenus |
true |
Show Usages in the editor/explorer context menus |
vueComponentUsages.livePreview |
true |
Preview usages in the editor while navigating the list |
vueComponentUsages.previewMaxLength |
64 |
Maximum length of the code preview per entry |
The command itself always stays available from the Command Palette and the keybinding, even with every visual entry point disabled.
Security & privacy
- The extension only reads workspace files; nothing is executed or sent anywhere.
- In untrusted workspaces indexing is disabled until you trust the workspace.
- Oversized files are skipped (
maxFileSizeKB) to keep the editor responsive.
License
MIT
| |
