primevue/nuxt-module: TypeScript support missing for auto-imported components when using components.prefix in PrimeVue Nuxt module

[sparrow-chik-chrk]

Describe the bug

Problem:

When using the @primevue/nuxt-module with the following configuration:

• autoImport: true
• components.prefix set to a custom value (e.g., "Prime")

The components are correctly auto-imported and work fine during build and runtime. However, in the development environment, TypeScript does not recognize these components. They are marked as unknown HTML tags, and there is no autocompletion or attribute hints provided.

If I either:

• Remove the custom components.prefix, or
• Disable autoImport and manually import components,

Then everything works correctly, and TypeScript fully recognizes the components after restarting the dev server.

Expected Behavior:

TypeScript should recognize auto-imported components with a custom prefix and provide autocompletion and hints in the development environment.

Actual Behavior:

TypeScript does not recognize auto-imported components with a custom prefix, and they are marked as unknown HTML tags during development.

Environment:

• PrimeVue Version: 4.0.7
• Nuxt Version: 3.13.2
• Node Version: 20.16.0
• Operating System: Windows

Additional Context:

The problem seems to arise only when both autoImport: true and a custom components.prefix are used together. Manually importing components or removing the prefix resolves the issue, but it's not ideal for larger projects that rely on auto-importing.

Would appreciate any insights or potential fixes for TypeScript support with this setup. Thanks!

Reproducer

https://stackblitz.com/edit/primevue-nuxt-issue-template-si9bk9

PrimeVue version

4.0.7

Vue version

3.x

Language

TypeScript

Build / Runtime

Nuxt

Browser(s)

Chrome 90

Steps to reproduce the behavior

1. Create a Nuxt project using the @primevue/nuxt-module.
2. Configure the module as follows:

primevue: {
  autoImport: true,
  components: {
    include: '*',
    prefix: 'Prime', // Custom prefix
  },
  importTheme: 'saga-blue',
  options: {
    ripple: true,
  },
}

3. Use any PrimeVue component, such as:

<template>
  <PrimeButton label="Click Me" />
</template>

4. Observe that:

   • In the development environment, TypeScript does not recognize the <PrimeButton> component. It is marked as an unknown HTML tag.
     
   • There are no suggestions or hints for attributes in the editor.
   • However, everything compiles and works fine in runtime.

5. Remove the prefix or disable autoImport and restart the dev server to see TypeScript support restored.

Expected behavior

No response

[vincenzomartusciello]

I'm manually editing the module on my project
This fix the issue
#6187

[sparrow-chik-chrk]

I'm manually editing the module on my project This fix the issue #6187

It seems to me that this PR proposes the wrong logic. The point is that when autoImport is enabled, components should not be manually registered, right? autoImport should later, through "tree shaking," add only those components that are actually used, along with styles. Please review the register.ts file carefully.

This PR just allows for manual component registration even when autoImport is enabled...

The issue here needs to be found in generating the types after tree shaking and determining the list of components that are being used, if I understand correctly.

[vincenzomartusciello]

I'm talking about !moduleOptions.autoImport && addComponent(opt);
If you change with moduleOptions.autoImport && addComponent(opt); the auto import seems to work good
It only auto imports the components inside include directive in nuxt.config
The add is basically done if the auto import is true and after the filter is evaluated

[mertsincan]

!moduleOptions.autoImport && addComponent(opt);
I believe this is correct. When autoImport is set to true, components are automatically loaded by the unplugin-vue-component API, so no manual component loading using addComponent is needed in Nuxt.

Ref: #6007 (comment)

[vincenzomartusciello]

You're right, sorry

EDIT:
But adding dts: true does not work for me
I think i'm doing something wrong

[mertsincan]

Could you please try your case after v4.1.0 is released?

[vincenzomartusciello]

sure

[sparrow-chik-chrk]

@mertsincan Sorry, I don’t quite understand, the latest available version on npm is 4.0.7.
How can I test 4.1.0?

[sparrow-chik-chrk]

@mertsincan I also checked after v4.1.0 is released. The hints for component props are still not working.

[vincenzomartusciello]

@mertsincan
unfortunately the problem persists in 4.1.1
setting autoImport: true does not generate anything in components.d.ts

[ekh-anadeainc]

@vincenzomartusciello
The types started working for me, but at the same time a new file components.d.ts is created in the root folder and components are added to it only after visiting the page with this component

[vincenzomartusciello]

that's true
is there a way to customize this behavior?

[xak2000]

@mertsincan Can you explain please what is going on with this components.d.ts that is generated in the project root?

• Is it intended? I never seen this behavior before. Is it something new in 4.1.x?
• If yes, then should this file be git-ignored or checked out to the git repo as part of the project?
• Why components are added to it only after visiting the page containing the component? This makes intellisense not working until you visit every page with every component. It is impractical. Is it really intended?
• Is this behavior (creation of components.d.ts and how to deal with it) documented anywhere?