Nuxt import component: Prefix doesn't work

[FabienVINCENT]

Describe the bug

When you configure the prefix with the nuxt module, the components are not imported

Reproducer

https://stackblitz.com/edit/github-tvge24?file=nuxt.config.ts

PrimeVue version

4.0.0

Vue version

3.x

Language

TypeScript

Build / Runtime

Nuxt

Browser(s)

Arc

Steps to reproduce the behavior

Remove the prefix configuration and the button with label "No prefix" work

Expected behavior

No response

[Tarabass]

Try Prime instead of prime:

https://stackblitz.com/edit/github-tvge24-4nqjsd?file=nuxt.config.ts

[FabienVINCENT]

Why i'm need to manually import with <component is tag's ?

when I uncomment both are working, but when commented only the primary is working

<template>
    <component is="PrimeButton" label="Component" />
    <PrimeButton label="Primary" />
</template>

<script setup>
//import Button from 'primevue/button';
</script>

[Tarabass]

There are two ways to use dynamic components. I prefer the second one. In short, you have to resolve the component first because the component is not resolving it for you.

<script setup lang="ts">
import { SomeComponent } from '#components'

const MyButton = resolveComponent('MyButton')
</script>

<template>
  <component :is="clickable ? MyButton : 'div'" />
  <component :is="SomeComponent" />
</template>

But did my first answer helped you? Before we go through all functionality of Vue or Nuxt, while we are here for PrimeVue.

[sparrow-chik-chrk]

Indeed, auto-import stopped working properly when upgrading from version v4.0.0-rc3 to v4.0.0. Not only did the prefixes break, but also the styles.

[FabienVINCENT]

@Tarabass Yes it works when I do an explicit import but the auto import should work. In any case in 4.0.0-rc.3 it worked without explicit import

[FabienVINCENT]

Indeed, auto-import stopped working properly when upgrading from version v4.0.0-rc3 to v4.0.0. Not only did the prefixes break, but also the styles.

Yes indeed in 4.0.0-rc.3 it worked without problem

[Mychen3]

4.0.1 I still have this problem

[mertsincan]

Why i'm need to manually import with <component is tag's ?
when I uncomment both are working, but when commented only the primary is working

@FabienVINCENT, in your case(prefix: 'Prime');

• It is normal for the tag not to work. Because you have now set the components globally with the Prime prefix.
• The autoImport feature in @primevue/nuxt-module uses unplugin API and this API has an issue with ; How to make <component :is= work? unplugin/unplugin-vue-components#633
• <PrimeButton ... /> works fine for me with your config.

I think you can set autoImport: false and add Button manually in nuxt.config;

primevue: {
    autoImport: false,
    components: {
      includes: ['Button']
      prefix: 'Prime',
    },
    options: {
      theme: {
        preset: Aura,
      },
    },
  },

[sparrow-chik-chrk]

@mertsincan
It doesn't work not only with <component is=. In general, auto-import doesn't add components until you explicitly import them. On the rc version, it works stably.

[Tarabass]

@mertsincan It doesn't work not only with <component is=. In general, auto-import doesn't add components until you explicitly import them. On the rc version, it works stably.

Why is it working in my stackblitz, primevue 4, or am I missing something?

https://stackblitz.com/edit/github-tvge24-4nqjsd?file=nuxt.config.ts

[mertsincan]

@Tarabass +1 ;) The logic of auto-import is to be able to use components without manually importing them. In RC and other older versions, nuxt-module added all components(80+) directly and users had to set up treeshaking manually. With the autoImport feature, we automatically register components using the unplugin API.

[reitowo]

So what's the expected behavior? The latest version still not work with prefix + autoImport (However disable autoImport and import * works). If they are meant to not working together, perhaps leave some words in doc?

[Erdu-EC]

I have the same problem, autoimport not working with prefix set to "Prime".

When i remove the "Prime" from component it work, but not is the best behaviour for the project.

Note: this is a type checking problem (in nuxt not generated the entries in nuxt/components.d.ts), in runtime the component is render successfull.

The previous image is before to update primevue v4,

[vincenzomartusciello]

I have the same behaviour @Erdu-EC
From v4 the entries in .nuxt/components.d.ts aren't generated, but on production it works.

[sparrow-chik-chrk]

@vincenzomartusciello It's still a problem, even if it works in production. It creates significant inconveniences during development.

[jmroon]

Trying PrimeVue for the first time. Running into the same issue. Bit of a dealbreaker, unfortunately.