Open FabienVINCENT opened 4 months ago
Try Prime
instead of prime
:
https://stackblitz.com/edit/github-tvge24-4nqjsd?file=nuxt.config.ts
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>
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.
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.
@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
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
4.0.1 I still have this problem
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,
},
},
},
@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.
@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
@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.
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?
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,
I have the same behaviour @Erdu-EC From v4 the entries in .nuxt/components.d.ts aren't generated, but on production it works.
@vincenzomartusciello It's still a problem, even if it works in production. It creates significant inconveniences during development.
Trying PrimeVue for the first time. Running into the same issue. Bit of a dealbreaker, unfortunately.
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