N
Nuxt•5mo ago
Signum

PrimeVue components no longer auto-imported with Nuxt 4

Newbie here. First project. 1 week old. Just upgrading to Nuxt 4. In app/components/nav/leftmenu.vue I have a simple template using the <Menu> component from PrimeVue. It used to work with Nuxt 3: 
<template>
  <div class="flex-col items-center p-4">
    <img src="/logo.svg" alt="Logo" class="h-8" />
    
    <div class="pt-4">
      <Menu :model="items" />
    </div>
  </div>
</template>
<template>
  <div class="flex-col items-center p-4">
    <img src="/logo.svg" alt="Logo" class="h-8" />
    
    <div class="pt-4">
      <Menu :model="items" />
    </div>
  </div>
</template>
(from https://github.com/Signum/imc/blob/nuxt4/app/components/nav/LeftMenu.vue#L6) However with Nuxt 4 my console reads: 
ssr:warn [Vue warn]: Failed to resolve component: Menu
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
ssr:warn [Vue warn]: Failed to resolve component: Menu
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
Arent't PrimeVue components no longer automatically made available? Thanks in advance.
GitHub
imc/app/components/nav/LeftMenu.vue at nuxt4 · Signum/imc
ISPmail Console. Contribute to Signum/imc development by creating an account on GitHub.
3 Replies
kapa.ai
kapa.ai•5mo ago
Hi @Signum. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the knowledge sources provided, there is no explicit information about changes to PrimeVue component auto-importing in Nuxt 4. However, the documentation and examples indicate that Nuxt's auto-import system primarily applies to components in your own project's components directory, not to components from third-party libraries like PrimeVue, unless a Nuxt module for that library specifically sets up auto-imports for you Auto-imported Components. In Nuxt 3, if you used the official @primevue/nuxt-module, it may have handled component registration for you. If you are now using Nuxt 4 and PrimeVue components like <Menu /> are not being recognized, it suggests that either: - The Nuxt module for PrimeVue is not installed or not compatible with Nuxt 4. - The module no longer auto-registers components, or you need to manually import and register them. The knowledge sources do not provide details about Nuxt 4 or changes to the PrimeVue module for Nuxt 4. They do show that for other third-party packages, you can set up auto-imports in your nuxt.config.ts using the imports property, but this is typically for composables, not Vue components Auto-import from Third-Party Packages. What you can do: - Check if the @primevue/nuxt-module is installed and compatible with Nuxt 4. - If not, you may need to manually import and register PrimeVue components in your components or pages. I'm sorry, but the knowledge sources do not contain enough information to confirm the current auto-import behavior for PrimeVue components in Nuxt 4 or provide a definitive migration path. For the most accurate answer, please refer to the official PrimeVue and Nuxt 4 documentation or the module's repository for updates. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•5mo ago
<@562705396402356234> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
Signum
SignumOP•5mo ago
Maybe the solution is simpler than I thought. The module gets disabled due to its version dependencies. https://github.com/primefaces/primevue/issues/7918
GitHub
Due to the upgrade to Nuxt v4, it now shows that @primevue/nuxt-mod...
Describe the bug After upgrading Nuxt to v4, PrimeVue becomes unusable — warnings are displayed, and none of the PrimeVue components work. WARN Module @primevue/nuxt-module is disabled due to incom...

Did you find this page helpful?