I'm developping a module to use as a component library for multiple projects of a client and I need it to feature icons. I used installModule('@nuxt/icon') in my module's module.ts, but when using <Icon> in the components from my module, I face an error. How am I supposed to import components from an other module into my own module's code ?
#Use Icon from @nuxt/icon in my own Nuxt module
storm oak
fluid cargoBOT
Hi @storm oak. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
To use the <Icon> component from @nuxt/icon (or Nuxt UI, which auto-installs it) inside your own Nuxt module's components, you need to ensure that the component is available for import in your module's code. Simply installing the module with installModule('@nuxt/icon') is not enough to make the <Icon> component available for direct import in your module's Vue files.
Key points:
- Nuxt auto-imports components for the main app, but when developing a module (especially one that ships its own components), you cannot use
<Icon>directly in your module's source code unless you explicitly import it. - In a module context, you should import components from the Nuxt auto-imports system using the
#componentsalias. For example, in a.vueor.tsxfile inside your module, you should do:
import { Icon } from '#components'
Then you can use <Icon ... /> in your template or JSX. This is necessary because, in the module's code, the auto-imports are not available by default, and you need to explicitly import them from the Nuxt-generated components directory.
This approach is confirmed by Nuxt team members in related discussions:
you will need to import nuxt components from #components when using them in jsx
Github Issue: Using components in nuxt ui in .tsx
Summary:
- Use
installModule('@nuxt/icon')in your module's setup to ensure the icon module is installed. - In your module's components, import
Iconfrom#componentsto use it.
If you follow this pattern, your module's components will be able to use the <Icon> component provided by @nuxt/icon or Nuxt UI.
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
storm oak
@fluid cargo I already tried this and was met with [unimport] failed to find "Icon" imported from "#components"
fluid cargoBOT
Let me check the knowledge base for you again. One moment! :books:
Thank you for clarifying. Based on the knowledge sources provided, importing components like Icon from #components is the recommended approach when you want to use Nuxt auto-registered components inside your own module's code, especially in .tsx or .vue files within your module. This is confirmed by Nuxt team members in related discussions, who state:
you will need to import nuxt components from #components when using them in jsx
Github Issue: Using components in nuxt ui in .tsx
However, if you are seeing [unimport] failed to find "Icon" imported from "#components", this suggests that the Icon component is not being registered in the Nuxt app's auto-imported components list at the time your module's code is being processed.
The knowledge sources do not provide a direct solution for this specific error. They do confirm that auto-imported components are available from #components in the main app and in userland code, but they do not explicitly guarantee that components from other modules (like @nuxt/icon) will be available in your own module's runtime context in all cases. There may be timing or registration order issues, or limitations in how Nuxt's auto-import system works for module-internal components.
Summary:
- The recommended approach is to import
Iconfrom#componentsin your module's components, as per Nuxt team guidance. - If this results in
[unimport] failed to find "Icon" imported from "#components", the knowledge sources do not provide a documented workaround or solution for this scenario. - There is no explicit documentation on how to ensure third-party module components are available for import in your own module's code at build time.