Form: breaking autoImport: true

[MystBug]

Describe the bug

When updating my dependencies I encountered this issue. The components.d.ts which is generated when running nuxi dev is located in the root of the folder. Since this folder is being used as a development environment I deem it unwise to have this file being rendered here.

I expect the file to be generated in the .nuxt folder or merged with the nuxt components.d.ts.

When going through the project I encountered this line being commented out: nuxt.options.build.transpile.push('nuxt'); although I am not 100% sure if this is actually the reason why it is begin generated in the root.

Along the commented line I found out that when you set up your nuxt.config.ts like this:

const config: NuxtConfig = {
  /* ... */
  primevue: {
    autoImport: false,
    components: {
      prefix: 'Prime',
      include: '*'
    }
  },
  /* ... */
}

(and using the new Form component which is automaticall included in v4.2.0), it results in a 500 error on the local development:

[vite-node] [ERR_LOAD_URL] @primevue/forms/form?nuxt_component=async&nuxt_component_name=PrimeForm&nuxt_component_export=default
at @primevue/forms/form?nuxt_component=async&nuxt_component_name=PrimeForm&nuxt_component_export=default

The issue

I expect that this is because Form is automatically included whilst it is not installed by me and, unlike Editor and Chart (which have to be installed by the developer manually), is not exlcluded. (see this line)

You would have to manually exclude Form and FormField to bypass this error like:

const config: NuxtConfig = {
  /* ... */
  primevue: {
    autoImport: false,
    components: {
      prefix: 'Prime',
      include: '*',
      exclude: ['Form', 'FormField']
    }
  },
  /* ... */
}

Now I get that this setup is not the most ideal setup, yet I came across this because when you want the components.d.ts being generated and merged in the .nuxt/components.d.ts, you need this setup. This way all PrimeVue components will be included in the .nuxt/components.d.ts and is not the way to go when you set up a small project and want to only use components that you actually use. Yet, it is a bug nonetheless.

Temporary solution

For the time being I extended my .gitignore containing the components.d.ts-line since it is automatically generated anyways and to keep my project clean. But I expect the components.d.ts, with this setup (as mentioned in "Expected outcome"), is merged in the .nuxt/components.d.ts

Reproducer

https://stackblitz.com/edit/nuxt-starter-x4svaa?file=nuxt.config.ts

PrimeVue version

4.2.0

Vue version

3.x

Language

TypeScript

Build / Runtime

Nuxt

Browser(s)

No response

Steps to reproduce the behavior

Prerequisites:

"@primevue/nuxt-module": "^4.2.0",
"nuxt": "^3.14.1592",
"primevue": "^4.2.0",
"vue": "^3.5.13",
"vue-router": "^4.5.0"

Rep. 1. For a solution where components.d.ts is merged with .nuxt/components.d.ts

1. Setup your nuxt.config.ts like so:

export default defineNuxtConfig({
  compatibilityDate: '2024-04-03',
  devtools: { enabled: false },
  modules: ['@primevue/nuxt-module'],
  primevue: {
    autoImport: false,
    components: {
      prefix: 'Prime',
      include: '*',
    },
  },
});

2. Run the server

You will see an error like:

[nitro 9:38:03 AM]  ERROR  Error: Could not load /home/projects/nuxt-starter-x4svaa/node_modules/primevue/form/style/index.mjs (imported by virtual:#primevue-style): ENOENT: no such file or directory, open '/home/projects/nuxt-starter-x4svaa/node_modules/primevue/form/style/index.mjs'

3. Resolving this error you would explicitly have to define Form and FormField in the excluded components:

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  compatibilityDate: '2024-04-03',
  devtools: { enabled: false },
  modules: ['@primevue/nuxt-module'],
  primevue: {
    autoImport: false,
    components: {
      prefix: 'Prime',
      include: '*',
      exclude: ['Form', 'FormField']
    },
  },
});

Rep. 2. For a solution where components.d.ts generated in the root

1. Setup your nuxt.config.ts like so:

export default defineNuxtConfig({
  compatibilityDate: '2024-04-03',
  devtools: { enabled: false },
  modules: ['@primevue/nuxt-module'],
  primevue: {
    components: {
      prefix: 'Prime',
    },
  },
});

2. add components.d.ts to your .gitignore
3. Run the server

---

Reproduction 1 has the undesired setup of nuxt.config.ts and undesired outcome of all components being included in the project, but does merge the .nuxt/components.d.ts with all PrimeVue components.

Reproduction 2 has the undesired outcome of components.d.ts being generated in the root of you project but has the desired setup of nuxt.config.ts.

Expected behavior

nuxt.config.ts:

const config: NuxtConfig = {
  /* ... */
  primevue: {
    components: {
      prefix: 'Prime',
    }
  },
  /* ... */
}

And the contents of the root components.d.ts is merged with .nuxt/components.d.ts.

[Tarabass]

I haven't test it, but for Chart and Editor additional packages are required. The same goes for the newly added PrimeVue Forms library, which should be installed separately. Chart and Editor are excluded in module.ts and therefor not registered as global components on the Vue instance, but Form and FormField aren't.

I think the PrimeVue Forms library should register the Form and FormField components as global components on the Vue instance, and should be excluded when PrimeVue is register components as global.

primevue/packages/nuxt-module/src/module.ts

Line 48 in 1aa7a02

moduleOptions.components.exclude = moduleOptions.components.exclude || ['Editor', 'Chart'];

[Tarabass]

Adding the components Form and FormField to the excluded array as mentioned above will fix it. But feels hacky and unmaintainable.

Apparently components from extensions are always added to the list of components. This should be done only when the extension is installed! So there should be a check if an extension is installed (resolve package.json and look it up in dependencies and devDependencies??). If not, don't add those components to the extensions list (MetaType array).

https://github.com/primefaces/primevue/blob/18367429f624285ff32d0ef775c1825a43a02fb1/packages/metadata/src/components/index.ts#L99C1-L102C4

Later on all components are registered, including the extensions components that was merged into this array of MetaTypes:

primevue/packages/nuxt-module/src/register.ts

Line 35 in 1836742

const items: MetaType[] = registerItems(components, options, { components });

[MystBug]

And as a byproduct (which is already mentioned in this issue, yet should not be ignored), using autoImport: false merges components.d.ts with Nuxt components.d.ts. But when you use default autoImport: true it is generated in the root of the project...

Either way it should be merged with Nuxt (in this case).