Auto-Import components from /components folder

[nathanchase]

In Vue and Svelte, there are packages that do auto-importing of components from the projects's /components folder.

Vue has:

• https://github.com/antfu/unplugin-vue-components
• https://github.com/antfu/unplugin-auto-import
  (both of which are used by Nuxt 3)

Svelte has:
https://github.com/yuanchuan/sveltekit-autoimport

It would be a great developer experience upgrade. As long as you have no name collisions, all of your components (.astro, .vue, .svelte, etc.) from /components would just be available to any Astro component. Other frameworks have an error check display in the console when such a component naming collision occurs.

Ideally, this would look something like:

You have two or more components named 'User':
  '/components/User.astro'
  '/components/User.vue'
Please ensure your component names are unique.

[TechAkayy]

Unplugin-auto-import is framework agnostic, wouldn't that already work for .astro ato imports?

[nathanchase]

It may, but I didn't see any obvious/direct way to integrate it with Astro.

[delucis]

This might be of interest: https://www.npmjs.com/package/astro-auto-import

[nathanchase]

Yeah, I did see that package, but it seems to only be one component at a time, rather than just using import.meta.glob() or something to auto-register everything... something like:

const componentFiles = import.meta.glob(
  './components/**',
  { eager: true }
);

[nathanchase]

This article talks about how to do it with Vue+Vite: https://zerotomastery.io/blog/how-to-auto-register-components-for-vue-with-vite/