feat: support @nuxt/components auto-import #63
Conversation
| // Auto import for components | ||
| const resolver = IconResolver(options.resolver) | ||
| this.nuxt.hook('components:extend', async(components: Component[]) => { | ||
| const files = await fg(['**/*.vue'], { |
There was a problem hiding this comment.
Components module is supposed to to glob on added directories. Why are you doing it manually? 🙈
There was a problem hiding this comment.
In https://github.com/antfu/unplugin-vue-components we are scanning for components usages on each request, meaning that if you use a component like this:
// pages/index.vue
<template>
<mdi-alarm />
</template>In that case, we will know that the Alarm icon from MDI is used, and inject the import statement to it. While with @nuxt/components, we need to search for the components usage beforehand as we register them globally on dev. This is indeed an workaround, but do you see any better solution for that?
There was a problem hiding this comment.
Hook is components:dirs
components:extend was mainly added to fine-tune scanned components (IE if generated names need a change) and also exposing multiple components from same export (which i guess you have 1 file per component)
There was a problem hiding this comment.
For what I need is kinda another way around, I need to scan the usage of the components used instead of the components to be imported. components:dirs might not work for me as the icons aren't actually exist in the filesystem.
There was a problem hiding this comment.
In that case, we will know that the Alarm icon from MDI is used, and inject the import statement to it. While with @nuxt/components, we need to search for the components usage beforehand as we register them globally on dev. This is indeed a workaround, but do you see any better solution for that?
It is the same for nuxt build. Loader that scans usage is intentionally disabled on development as the cost of this scanning step was proven to be more and not scalable as the number of .vue files and components increases. One can force this behavior in dev by setting loader: true in the components option.
Can't we simply register all unplugin-vue components beforehand to Components module and let it lazy-load them in dev with isAsync: true ?
There was a problem hiding this comment.
Another point: There is runtime usage where the scanner cannot basically detect them by usage. Markdown (docus/content) is one example that is rendered after build step :)
There was a problem hiding this comment.
Can't we simply register all unplugin-vue components beforehand to Components module and let it lazy-load them in dev with isAsync: true ?
While in this case, Iconify has 10,000+ icons from over 100 icon sets. We certainly don't want to register them all 😅 and that's why we go with this on-demand approach.
Loader
Yes, this is indeed we are doing the same thing with the loader and I understand the tradeoff in dev here. If you don't mind to have an additional hook in the loader, we could have the on-demand resolution for loader, and fallback to this solution when the loader is not enabled.
There was a problem hiding this comment.
Enabling loader if one of dirs requires it, would be nice idea indeed :) Would you please make an Issue+PR?
|
Is this PR abandoned? |
|
Any progress? I wanted to use unplugin icons in my project (nuxt 2 bridge), but after errors in resolving icon components, I realized that it was not worth it. The documentation doesn't say anything about the lack of icon component auto-import in nuxt, which is confusing. |
|
Hey @antfu, just out of curiosity, why was this PR closed? Is there any other fix or workaround available by now? 💡 |
Awaits nuxt/components#234