Vue Component Usage Counter

Instantly see how many times your Vue components are imported across the entire workspace.

A lightweight VS Code extension that counts import references for .vue components and displays the results via CodeLens and the status bar — helping you identify unused components, understand dependencies, and navigate large Vue codebases with confidence.

Table of Contents

• Features
• How It Works
• Supported Import Patterns
• Configuration
• Commands
• License

Features

📦 CodeLens — Inline Usage Count

When you open any .vue file, a CodeLens annotation appears at the very first line showing how many files import this component:

$(references) 3 usages — Click to see references

• Click the CodeLens to open a peek references view listing every import location.
• Shows $(info) No usages found when the component has zero imports.
• Automatically refreshes when files are saved, created, or deleted.

📊 Status Bar — Quick Glance

The status bar (bottom-left) displays the usage count for the currently active Vue component:

$(references) Vue: 3 usages

• Only visible when a .vue file is the active editor.
• Shows a spinning icon ($(sync~spin) Vue: scanning...) during scanning.
• Click to jump directly to the peek references view.

⚡ High-Performance Scanning

The extension uses a two-phase scanning strategy to stay fast even in large monorepos:

1. Phase 1 — System grep: Runs grep -rnE at the OS level to find candidate files in milliseconds, avoiding the overhead of VS Code's document API.
2. Phase 2 — Path Verification: Each candidate's import path is resolved to an absolute file path and compared against the current component to eliminate false positives.

🗂️ Smart Caching

• Scan results are cached per component with a 30-second TTL.
• Cache is automatically invalidated when:
  • Any file is saved (onDidSaveTextDocument)
  • Any matching file is created or deleted (via FileSystemWatcher)
• Manual cache refresh is available via the Command Palette.

🔗 Barrel File / Re-export Support

The scanner understands barrel files (index.ts/index.js) that re-export components:

// components/index.ts
export { default as GModal } from './GModal.vue';
export { MarkImage } from './MarkImage';

When another file imports from the barrel (import { GModal } from '@/components'), the extension correctly traces this import back to GModal.vue.

🏷️ Path Alias Resolution

Automatically reads tsconfig.json to resolve path aliases like @/:

{
  "compilerOptions": {
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

Falls back to @ → src/ if no tsconfig.json is found.

How It Works

┌──────────────────────────────────────────────────────────┐
│  Active .vue file opened                                 │
│  → vueParser extracts component name from file path      │
│  → CodeLens & StatusBar request usages from CacheManager │
└──────────────────────┬───────────────────────────────────┘
                       │
                       ▼
┌──────────────────────────────────────────────────────────┐
│  CacheManager                                            │
│  → Returns cached result if fresh (< 30s)                │
│  → Otherwise delegates to ComponentScanner               │
└──────────────────────┬───────────────────────────────────┘
                       │
                       ▼
┌──────────────────────────────────────────────────────────┐
│  ComponentScanner (Two-Phase)                            │
│                                                          │
│  Phase 1: grep -rnE for import/export statements         │
│           matching the component name                    │
│                                                          │
│  Phase 2: For each candidate:                            │
│    1. Extract import path from the statement             │
│    2. Resolve to absolute path (aliases, extensions)     │
│    3. Check direct match OR barrel re-export             │
│    4. Keep only verified usages                          │
└──────────────────────────────────────────────────────────┘

Supported Import Patterns

The scanner matches both PascalCase and kebab-case variants of the component name.

Configuration

All settings live under the vueUsageCounter namespace in VS Code settings.

Example settings.json

{
  // Exclude test files and storybook stories
  "vueUsageCounter.excludePatterns": [
    "**/node_modules/**",
    "**/dist/**",
    "**/*.spec.ts",
    "**/*.stories.ts"
  ],
  // Only scan Vue and TypeScript files
  "vueUsageCounter.includeFileTypes": [
    "**/*.vue",
    "**/*.ts"
  ],
  // Disable status bar, keep CodeLens
  "vueUsageCounter.showStatusBar": false
}

Commands

Available via the Command Palette (Ctrl+Shift+P / Cmd+Shift+P):

Requirements

• VS Code ≥ 1.85.0
• OS: Linux, macOS, and Windows (uses VS Code's bundled ripgrep — no extra setup needed)
• Works with Vue 2 and Vue 3 projects

License

MIT