How to Add Auto Imports to ANY Vue App
If you are a Vue.js developer, you probably know that managing import statements for your components and libraries can be a tedious task. However, there is a solution to make this process much easier by using auto imports in your Vue app.
What are Auto Imports?
Auto imports is a feature in Vue 3 that allows you to automatically import components and libraries without the need to manually import them in each file where they are used.
How to Add Auto Imports to Your Vue App
Adding auto imports to your Vue app is a simple process. Here are the steps to do so:
- Install the Volar Extension
- Enable Auto Imports
- Use Auto Imports
First, you will need to install the Volar extension in your code editor. This extension provides Vue 3 and TypeScript support, and it includes auto imports functionality.
Once the Volar extension is installed, you can enable auto imports in your Vue app by adding the “vetur.experimental.templateInterpolationService” setting to your workspace settings file. Set the value to true to enable auto imports.
After enabling auto imports, you can start using this feature in your Vue app. Simply start typing the component or library name and the auto import feature will suggest the import statement for you. This will save you time and make your code cleaner and more maintainable.
Conclusion
Auto imports can greatly improve the developer experience when working with Vue.js. By automating the import process, you can focus on writing code rather than managing import statements. If you haven’t tried using auto imports in your Vue app, give it a try and see how it can streamline your development workflow.
My thanks. I will try this.
Not a single positive comment. Huge L from vue devs. This is feature is great.
how to set '@' before the file path for auto import ts/js file? do you have any idea? pls share
I love it
Thanks to you for another best video
Hey, I think your content is great, however just as a piece of constructive feedback, from my POV your pace is really fast, a bit like Fireships. I get that might work from some YouTube videos, but will your paid course have the same pace/style? For me personally, I find it hard even as someone that knows a little Vue to parse everything you're saying before you switch contexts.
been using this plugin since last year and it's a big help
I think is bad practice
Quizás si trabajas solo en un proyecto te puede ayudar a optimizar tiempos, pero en un ambiente laboral en donde existe muchas personas que pueden trabajar un mismo proyecto es algo peligroso, ya que se tendría que estar revisando de donde proviene. Personalmente remuevo el autoimport cuando trabajo con Nuxt 🤓
Nice
antfu is the man
Another high quality video!
Opinion on the actual library: I am not really a fan of magic and auto imports – Nuxt does this out of the box with Vue and VueUse. It makes onboarding and understanding much harder. Considering VS Code and Volar can usually auto import when you start typing, I don't see a compelling use case for this kind of feature.
What is the benefit of such a system? My IDE imports the component once i write its name in the template code. This is not ironic im seriously asking.
Just a suggestion but the out of tune repetitive background music loop is really distracting and I can't understand what your saying.
I've been using these libraries for several weeks now, and they're very useful, but don't try and setup autoimports for all your files lol.
If you're working on a vue app, only setup auto imports for components, composables, and the vue preset. NOT UTILITIES. For react, only use it for the same: components, hooks, and the react preset.
Those will save you the most time, but keep you away from pitfalls like mocking in unit tests and or accidental inclusion if you're working on an app with multiple JS contexts/runtimes (Chrome Extensions, or Electron apps, or even a vite configs).
Vue 3 composition api and so made for the simplicity and convenience of writing code. Adding another package globally is pointless
Right from the gate I got into some limitations
– with Storyblok, you still need to import components that you are using in `makeRaw` for some of the highier-order components
– be careful with importing folder full of utility methods, as some of them might clash with `window`
– auto-import does not work for utility methods used only in the template of a component (it might require additional trick that I don't know about)
OMG ! The most valuable video ever. Thank you so much ❤️
i prefer to disable auto imports in nuxt 3 😂
YES