🧩 Vue Quick Import
Right-click any Vue file to instantly import it into your active editor.
Skip the typing and let the extension handle the import paths and component naming for you!

📦 Install from VS Code Marketplace
🔗 View on GitHub
📚 Table of Contents
✨ Features
- ✅ Right-click to import — Simple context menu integration
- 🧠 Smart path resolution — Automatically calculates relative paths
- 🧱 Component naming — Converts filenames to proper PascalCase
- 🎯 Intelligent insertion — Adds imports in the right place
- 🔁 Duplicate detection — Prevents duplicate import statements
- 🔗 Multi-format support — Works with
.vue
, .ts
, .js
, .tsx
, .jsx
🚀 How to Use
- Open a Vue.js, JS, or TS file in your editor
- Right-click any file in the Explorer panel
- Select "Import to Active File"
- ✅ Done! The import statement is added automatically
📸 Demo
📝 Examples
📦 Vue Component Import
import UserCard from "./components/UserCard.vue";
📦 TypeScript/JavaScript Module Import
import dateUtils from "./utils/date-utils";
📦 Nested Path Resolution
import Header from "../../components/layout/Header.vue";
🎯 Smart Features
🔠 Automatic Component Naming
Filename |
Component Name |
user-card.vue |
UserCard |
product_list.vue |
ProductList |
nav-bar.vue |
NavBar |
📐 Path Intelligence
- Correct relative paths
- No extra file extensions
- Handles deep folders
📌 Import Positioning
- Inserts after existing imports
- Keeps order clean and organized
📋 Requirements
- VS Code
1.101.0
or higher
- Vue, JS, or TS-based project
🛠️ Supported File Types
File Type |
Supported |
Import Style |
.vue |
✅ |
import Component from './path' |
.ts |
✅ |
import module from './path' |
.js |
✅ |
import module from './path' |
.tsx |
✅ |
import module from './path' |
.jsx |
✅ |
import module from './path' |
🔧 Installation
📦 Via VS Code:
- Open VS Code
- Go to Extensions (
Ctrl+Shift+X
)
- Search Vue Quick Import
- Click Install
💻 Via Command Line:
code --install-extension vue-quick-import
⚙️ Configuration (Planned)
Coming soon!
Future versions may support:
- Custom import formatting styles
- Ignored folders or file types
- Auto-import on file save or creation
🐞 Known Issues
- No support yet for
.scss
/.css
/.json
files
- Import order may not follow custom grouping
🤝 Contributing
Found a bug or have a feature idea?
- 🐛 Submit an Issue
- 📥 Fork the repo and make a pull request
- 💡 Request features through GitHub Issues
⭐ Show Your Support
If you find this extension helpful:
- 🌟 Star it on GitHub
- 💬 Leave a review on the Marketplace
- 📣 Share it with your Vue dev friends
Mohamed Menasria
📧 Email: menasria1996mohamed@gmail.com
🌐 GitHub: @MenasriaMohamed
📄 License
Licensed under the MIT License.
Made with ❤️ for the Vue.js community