CLI tool and API to rename Vue component files from kebab-case to PascalCase and automatically update imports
npm install vue-pascalcase-migrator> CLI tool and API to rename Vue component files from kebab-case to PascalCase and automatically update all imports across your codebase.


- š Automatic Renaming ā Converts my-component.vue ā MyComponent.vue
- š Import Updates ā Finds and updates all static imports, dynamic imports, and re-exports
- šÆ Alias Support ā Handles path aliases like @/components/my-component.vue
- šæ Git-Aware ā Uses git mv to preserve file history
- š HTML Reports ā Generates beautiful reports with Tailwind CSS styling
- š Dry Run Mode ā Preview changes before applying them
- šÆ Git Diff Mode ā Rename only files changed in your branch
- š¦ Programmatic API ā Use as a library in your own tools
``bashGlobal installation (recommended for CLI usage)
npm install -g vue-pascalcase-migrator
š CLI Usage
After global installation, you can use either
vue-pascalcase-migrator or the shorter vpm alias.$3
Rename all kebab-case Vue files in a directory:
`bash
Preview changes (dry run)
vpm rename -d ./src/components --dry-runApply changes
vpm rename -d ./src/componentsGenerate HTML report
vpm rename -d ./src/components --report
`Options:
| Option | Description |
|--------|-------------|
|
-d, --dir | Target directory to scan for Vue files (required) |
| --dry-run | Preview changes without applying them |
| -r, --report | Generate HTML report after renaming |$3
Rename only Vue files that changed in your Git branch:
`bash
Preview changes from current branch vs main
vpm rename:diff --dry-runRename files changed vs specific branch
vpm rename:diff -b developOnly staged files
vpm rename:diff --stagedInclude untracked files
vpm rename:diff --untrackedGenerate report
vpm rename:diff --report
`Options:
| Option | Description |
|--------|-------------|
|
-b, --branch | Compare against branch (default: main) |
| -s, --staged | Include only staged files |
| -u, --untracked | Include untracked files |
| --dry-run | Preview changes without applying them |
| -r, --report | Generate HTML report after renaming |š Programmatic API
You can use this package as a library in your own tools:
`typescript
import { renameVueFiles, findKebabCaseFiles } from 'vue-pascalcase-migrator';// Full rename operation
const result = await renameVueFiles({
targetDir: './src/components',
dryRun: true, // Preview without making changes
onProgress: (message, current, total) => {
console.log(message, current, total);
},
});
console.log(
Found ${result.summary.totalFiles} files to rename);
console.log(Found ${result.summary.totalImports} imports to update);// Just find files without renaming
const mappings = await findKebabCaseFiles({
targetDir: './src/components',
});
for (const mapping of mappings) {
console.log(
${mapping.oldName} ā ${mapping.newName});
}
`$3
####
renameVueFiles(options): PromiseMain function to rename Vue files and update imports.
Options:
| Property | Type | Default | Description |
|----------|------|---------|-------------|
|
targetDir | string | ā | Directory to scan for Vue files (required) |
| cwd | string | process.cwd() | Working directory |
| importScanDir | string | targetDir | Directory to scan for imports |
| extensions | string[] | ['ts', 'vue', 'tsx', 'js', 'jsx'] | File extensions to scan |
| ignore | string[] | ['/node_modules/', ...] | Glob patterns to ignore |
| dryRun | boolean | false | Preview without making changes |
| useGitMv | boolean | true | Use git mv to preserve history |
| aliases | PathAliases | auto-detect | Path aliases for import resolution |
| autoDetectAliases | boolean | true | Auto-detect aliases from vite.config |
| onProgress | function | ā | Progress callback |Returns:
RenameResult`typescript
interface RenameResult {
mappings: RenameMapping[]; // Files renamed
fileStats: FileStats[]; // File statistics
importUpdates: ImportUpdate[]; // Imports updated
summary: {
totalFiles: number;
totalLines: number;
totalSize: number;
totalImports: number;
};
dryRun: boolean;
}
`####
findKebabCaseFiles(options): PromiseFind all Vue files with kebab-case names.
`typescript
const mappings = await findKebabCaseFiles({
targetDir: './src',
ignore: ['/node_modules/'],
});
`####
createMappingsFromFiles(files): RenameMapping[]Create rename mappings from a list of file paths.
`typescript
const files = ['./src/my-component.vue', './src/user-card.vue'];
const mappings = createMappingsFromFiles(files);
`####
loadProject(options): PromiseLoad a ts-morph project for import analysis.
`typescript
const project = await loadProject({
scanDir: './src',
extensions: ['ts', 'vue'],
});
`#### Utility Functions
`typescript
import {
toPascalCase, // 'my-component.vue' ā 'MyComponent.vue'
isKebabCase, // Check if filename is kebab-case
findImportUpdates, // Find imports to update
applyImportUpdates, // Apply import updates to project
generateHtmlReport, // Generate HTML report string
saveReport, // Save report to file
DEFAULT_ALIASES, // Default path aliases: { '@': 'src', '~': 'src' }
loadViteAliases, // Load aliases from vite.config
findViteConfig, // Find vite.config file
getProjectAliases, // Get aliases (auto-detect + defaults)
} from 'vue-pascalcase-migrator';
`$3
The tool automatically detects path aliases from your
vite.config.ts or vite.config.js file. No configuration needed!Supported patterns in vite.config:
`typescript
// vite.config.ts
export default defineConfig({
resolve: {
alias: {
'@': path.resolve(__dirname, 'src'),
'@components': path.resolve(__dirname, 'src/components'),
},
},
});
`If no vite.config is found, it falls back to defaults:
-
@/ ā src/
- ~/ ā src/You can also customize aliases manually in the API:
`typescript
const result = await renameVueFiles({
targetDir: './src/components',
aliases: {
'@': 'src',
'@components': 'src/components',
},
autoDetectAliases: false, // Disable auto-detection
});
`This allows the tool to correctly find and update imports like:
`typescript
// Before
import MyCard from '@/components/my-card.vue';// After
import MyCard from '@/components/MyCard.vue';
`š Example Output
`
š Vue Component Rename Tool
kebab-case ā PascalCase
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā” DRY RUN MODE - No changes will be made
ā Found 5 files to rename
ā Collected stats: 1,234 lines, 45.2 KB
ā Loaded 892 source files
ā Found 23 imports to update
Files to rename:
user-card.vue ā UserCard.vue (156 lines)
nav-menu.vue ā NavMenu.vue (89 lines)
...
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
š 5 files | š 1,234 lines | š 23 imports
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
š” Run without --dry-run to apply changes.
`š§ How It Works
1. Scans the target directory for
.vue files with kebab-case names
2. Analyzes the entire frontend codebase using ts-morph
3. Finds all imports referencing the files to be renamed:
- Static imports (import Component from './my-component.vue')
- Dynamic imports (import('./my-component.vue'))
- Re-exports (export * from './my-component.vue')
4. Updates all import paths to use new PascalCase filenames
5. Renames files using git mv to preserve history
6. Generates an HTML report (optional)š Project Structure
`
src/
āāā index.ts # CLI entry point
āāā api.ts # Programmatic API
āāā commands/
ā āāā rename.ts # rename command
ā āāā rename-diff.ts # rename:diff command
āāā utils/
āāā files.ts # File utilities
āāā imports.ts # Import finding & updating
āāā naming.ts # kebab-case to PascalCase conversion
āāā paths.ts # Path constants
āāā report.ts # HTML report generation
`š Development
`bash
Clone the repository
git clone https://github.com/dimgolsh/vue-pascalcase-migrator.git
cd vue-pascalcase-migratorInstall dependencies
npm installRun in development mode
npm run devRun rename command directly
npm run rename -- -d ./src/components --dry-runBuild for production
npm run build
``MIT Ā© Dmitriy