primefaces / primevue

Next Generation Vue UI Component Library
https://primevue.org
MIT License
10.51k stars 1.23k forks source link

Nuxt import component: Prefix doesn't work #6051

Open FabienVINCENT opened 4 months ago

FabienVINCENT commented 4 months ago

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 commented 4 months ago

Try Prime instead of prime:

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

FabienVINCENT commented 4 months ago

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 commented 3 months ago

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 commented 3 months ago

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 commented 3 months ago

@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 commented 3 months ago

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 commented 3 months ago

4.0.1 I still have this problem

mertsincan commented 3 months ago

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');

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 commented 3 months ago

@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 commented 3 months ago

@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 commented 3 months ago

@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 commented 3 months ago

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 commented 3 months ago

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

image

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

image

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.

image

The previous image is before to update primevue v4,

vincenzomartusciello commented 2 months ago

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 commented 2 months ago

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

jmroon commented 2 months ago

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