No intellisense for props, slots etc. with v4

[Sector6759]

Describe the bug

In v4, it seems like some types are not defined correctly as I'm getting no Intellisense for props, slots etc.

I see that you used to extend ClassComponent before v4

declare class Button extends ClassComponent<ButtonProps, ButtonSlots, ButtonEmits> {}

Now in v4 you use DefineComponent

declare const Button: DefineComponent<ButtonProps, ButtonSlots, ButtonEmits>;

It seems like something is still missing somewhere in the type parameter chain.

Intellisense in v3 Intellisense in v4

Reproducer

StackBlitz

Edit: this reproducer now shows the desired behavior because I updated it according to my comment.

PrimeVue version

4

Vue version

3.x

Language

TypeScript

Build / Runtime

Vue CLI App

Browser(s)

No response

Steps to reproduce the behavior

No response

Expected behavior

No response

[nawazishali]

Facing the same issue with Nuxt 3.

[mertsincan]

Thanks a lot for your report! @Sector6759, is there a small sample project with your config to replicate it?

[Sector6759]

@mertsincan I added a reproducer link in my original post. Don't forget to accept the prompt on StackBlitz when it asks to install the Vue - Official extension.

[matt-sr]

Hi, I also have no Intellisense for props - only the documentation comments, with Typescript and without. Vite project, installed following Vite instructions, in styled mode. Should be pretty easy to repro, as I made the project yesterday - version 4.0.0-rc.2

[tomascf]

Also encountering the same issue with Nuxt 3

[Fischer96]

Yep same issue in all editors I use

[Sector6759]

@mertsincan What exactly is the 4.x milestone? There are a lot of issues which have been opened a "long" time ago. Also, there isn't a single closed issue related to this milestone. Is this merely for collecting issues that will eventually be moved to more specific milestones?

[Proxx07]

Also some components doesn't have any intellisense for their props

[2234839]

My project also has this problem, vscode has no relevant type hints at all

[2234839]

I just have created a new test project at https://github.com/2234839/primevue-test Also unable to get the correct type tips, I use Vue.volar plugin vscode information is as follows: Version: 1.91.1 (user setup) Commit: f1e16e1e6214d7c44d078b1f0607b2388f29d729 Date: 2024-07-09T22:06:49.809Z Electron: 29.4.0 ElectronBuildId: 9728852 Chromium: 122.0.6261.156 Node.js: 20.9.0 V8: 12.2.281.27-electron.0 OS: Windows_NT x64 10.0.22631

[2234839]

I've found that the Tree component gets good type hints, and I hope it helps to improve other components

[2234839]

One problem I found was that when I referenced a component in a vue file using the form 'import Tree from' primevue/tree ', I Ctrl-clicked the component and it jumped to 'declare const Tree'. This type of situation is not good

When I don't have in vue file references, I use CTRL click components will jump to Tree: GlobalComponentConstructor < TreeProps TreeSlots, TreeEmits >, type hinting at this time is perfect

[2234839]

replace declare const Tree: DefineComponent<TreeProps, TreeSlots, TreeEmits>; To declare a const Tree: GlobalComponentConstructor < TreeProps TreeSlots, TreeEmits >; can get type hints when you use import. What's the difference between the two methods @mertsincan

[Sector6759]

@nawazishali @matt-sr @tomascf @Fischer96 @Proxx07 @2234839

I recently noticed that I wasn't importing PrimeVue components like intended. I always imported the PrimeVue components in my own components, like I did in the example picture, but the docs never say that we should do so. Instead they instruct us to register components, by using app.component(). To make PrimeVue v4 work, we also need to install the PrimeVue plugin with app.use(). After removing the import statement in my own component, intellisense now works as expected. By the way, this was already the intended way in v3 (register, plugin), but indeed some things behave differently in v4 compared to v3, because in v3, importing a component like I did in my example did not break intellisense.

@mertsincan I'm not sure if this issue can be closed. I assume something's still off, because I don't expect intellisense to break only because of importing PrimeVue components inside my own components.

[rogrile]

Same issue here, would love to get back to primevue, but without intellisense the dev time will definitely increase

[Sector6759]

@rogrile Did you even read my last comment?

[rogrile]

I'm using Nuxt (with a nuxt module for primevue). I have autoimports on, thus I do not import the components myself, nor do I use app.component() or app.use() for plugins. This does not work out of the box, and it does work with primevue 3

[Sector6759]

I see. I'd like to get an update on this from the PrimeVue team myself. My only guess is that they are busy fixing all kinds of things.

[pwang2]

I can resolve my case with workaround from @Sector6759 mentioned above. Thanks for the information.

TLDR: If we've already imported primevue using the app.use in main.ts, when we import the component again as local Components in SFC, the code IntelliSense will be messed up.

Even it might be handy, I am strongly not in favor of using a global registration. Not to mention code actions usually import the component to local imports as we type automatically. Hope we can hear back from PrimeVue team soon.

[Sector6759]

@pwang2 Alternatively you can use auto imports.

[pwang2]

@pwang2 Alternatively you can use auto imports.

Thanks. Yes. I keep thinking about from a modular even with SFC. So, I am feeling sort of mixed when using something not imported. I could be wrong/stubborn here. as defineProps/defineEmits macro stuff also make the code we author different than what we wrote.

[Eirmas]

Here is a temporary fix that I did using the PrimeVue auto-import plugin

1. Enable auto import as described here: https://primevue.org/autoimport/
2. Use dts: false in the options to disable overrides.
3. Create a components.d.ts file. Put it in your src directory or make sure it's part of the TypeScript compilation

// components.d.ts
import { DefineComponent, GlobalComponentConstructor } from '@primevue/core';

type FixPrimeVue<T> =
  T extends DefineComponent<infer Props, infer Slots, infer Emits, infer Methods>
    ? GlobalComponentConstructor<Props, Slots, Emits, Methods>
    : T;

declare module 'vue' {
  export interface GlobalComponents {
    Button: FixPrimeVue<typeof import('primevue/button')['default']>
    // Add the components you are using here
  }
}

Hopefully https://github.com/primefaces/primevue/pull/6088 is merged soon which should fix this.

[Skstud5]

I encountered the same problem. Absolutely clean project, PrimeVue version 4.1.1, however, this IntelliSense does not work in WebStorm

but works in VScode

[Sector6759]

@Skstud5 Are you sure you have set up WebStorm correctly? I just tried it in WebStorm and it does work. Check if you have set a Node.js interpreter under File | Settings | Languages & Frameworks | Node.js

[Skstud5]

Yes, everything is set up. I will try on Saturday or Sunday, I will try to repeat this again. What will happen in the end - I will write here

[Sector6759]

@Skstud5 Just follow this up-to-date Getting started tutorial which the PrimeVue team uploaded recently. If intellisense is not working in WebStorm for you, then there has to be something wrong with your setup.