Use Icon from @nuxt/icon in my own Nuxt module
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 ?5 Replies
Hi @Kérunix. 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
- Use
<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 #components alias. For example, in a .vue or .tsx file inside your module, you should do:
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 jsxGithub 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 Icon from #components to 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:
----------------------<@189762782642569217> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
@kapa.ai I already tried this and was met with
[unimport] failed to find "Icon" imported from "#components"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
- The recommended approach is to import
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 jsxGithub 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
Icon from #components in 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.
I'm sorry, but the knowledge sources do not contain enough information to provide a confident solution to this specific error. You may need to consult the Nuxt team or community for further guidance on this advanced use case.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@189762782642569217> Kapa.ai is still learning and improving, please let me know how I did by reacting below.