Skip to content
| Marketplace
Sign in
Visual Studio Code>Other>Vue Quick ImportNew to Visual Studio Code? Get it now.
Vue Quick Import

Vue Quick Import

Mohamed MENASRIA

|
3 installs
| (0) | Free
Right-click any Vue file to instantly import it into your active editor
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

🧩 Vue Quick Import

Vue Quick Import Icon

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!


Version License VS Code Marketplace GitHub Stars

📦 Install from VS Code Marketplace
🔗 View on GitHub


📚 Table of Contents

  • ✨ Features
  • 🚀 How to Use
  • 📸 Demo
  • 📝 Examples
  • 🎯 Smart Features
  • 📋 Requirements
  • 🛠️ Supported File Types
  • 🔧 Installation
  • ⚙️ Configuration (Planned)
  • 🐞 Known Issues
  • 🤝 Contributing
  • ⭐ Show Your Support
  • 📬 Contact
  • 📄 License

✨ 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

  1. Open a Vue.js, JS, or TS file in your editor
  2. Right-click any file in the Explorer panel
  3. Select "Import to Active File"
  4. ✅ 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

📬 Contact

Mohamed Menasria
📧 Email: menasria1996mohamed@gmail.com
🌐 GitHub: @MenasriaMohamed


📄 License

Licensed under the MIT License.


Made with ❤️ for the Vue.js community

  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft