Nuxt 3 Auto Imports - Unleash Their Full Potential

🚀 Ready to improve your Nuxt projects even more? Then this deep dive into Nuxt 3's Auto Imports might help you further! 🌟

In this video, we'll explore the power of Nuxt 3 Auto Imports and how you can configure them to make your DX even better!

Key topics we'll cover:
🔧 Understanding the magic behind Nuxt 3 Auto Imports
🚀 Adding more auto-import folders for components
🌐 Auto-importing JavaScript and TypeScript files from custom folders
🛠️ Configuring Auto Imports for NPM Packages
🧰 How to apply the same to "the server side" (Nitro)

Links:

Don't forget to hit that "Subscribe" button, ring the notification bell,

🌐 Connect further:

Chapters:

00:00 Intro and scenarios
01:10 1) Auto import Vue components from a custom folder
03:44 2) Auto import TS/JS files from a new directory
06:09 3) Auto import NPM package exports
09:29 4) How to apply it for Nitro
09:45 Summary

#Nuxt3 #vuejs #nuxtjs #webdevelopment #frontend #frontenddeveloper #unjs #nitro #opensource

[rahman]

thank God there is a YouTuber vue and nuxt ecosystem I need it please don't stop

[PlayerRPG]

The auto import of utils is a great tip! I'll definitely use it.

Good luck with the channel!

Ps. I'd remove the red border when showing code, editor full screen would be 👌

[joshdeltener]

Great video, I'll certainly be using these techniques in my project!

[MarkJohnAguirre]

Thanks Alex. You're content are very helpful to us new in Nuxt.

[danielkellyio]

Great tip Alex! I think I've done similar to this to auto-import my pinia stores from a Pinia directory. Was super helpful.

[domzo]

Amazing content sir, keep up the good work, its really nice to see some more progressive stuff on such amazing framework like Nuxt 3💚.

[jacobandrewsky]

Great content once again! You are killing it Buddy!

[don-cody]

Nice content man, much thanks . Will keep my notifications on for more

[ra_jeeves]

Just now I was trying to auto import some types from a new folder (types). The client import worked fine using the imports setting, but I couldn't get it to work for the server (missed looking at the nitro configs in the docs). Your last tip helped me achieve it.

Thanks 🙂

[nikolavukovic]

Eyeopener.. migrating my manual lodash from utils to presets!

[censujiang]

Can you contribute a document to the nuxt website that is as detailed as your video? Thank you, I believe this will be useful to many beginners😊

[dawntraoz]

Love the video production, the way you're explaining it and the random meme 🤩 I will follow your videos weekly for sure, keep it up
PS: Let's meet someday around our city, this also goes for Niky 💜

[creazy]

Awesome video :) One question I asked myself a lot recently is: How to work with folder based auto imports? I mean, if I have a component in /components/Table/Item.vue I can import it with <TableItem /> but what if I also want to have a "Table.vue"? Is there something like /components/Table/index.vue which will work to import it with <Table /> or any other way I can use?

[jaymefrantz]

This seems like a pretty great upgrade for DX, but are there any negative effects for bundle size and tree shakability?

[cristianllansola]

Amazing tip!!! Thanks. Is it possible to do the same in Vue application?

[yohannb]

Hi Alexander, do you know how to share auto imports in between server and app folder ? i have validation schemas and types that i wish to used in both context with auto import. i did not find how to do it. Auto importing files in Nitro outside of the server folder is not working for me.

[yohannb]

for js/ts files subfolders are not imported, do you know how to import subfolder for js/ts files (works for components if you follow style guide) ?

[vladk]

Hey, can i autoimport .vue components from an internal lib in node_modules/lib ?

[Reagan_Dev]

Is it also possible to auto import a sub folder inside the server folder? e.g. I am using mongoDB, and I stored the schema files inside the folder I tried this `imports: { dirs: [ './server/schema/*' ] } ` but it's not working for me. I am open for suggestions if any. Thanks!

[undertale-O]

Auto Imports - это худшее что случалось в моей жизни. Такой код мне понять невозмножно.