IDE Autocomplete / AutoImport doesn't work

[danhumphrey]

Describe the bug

I'm brand new to PrimeVue, having used various similar frameworks before. I have a sample project up and running, but can't get autocomplete/auto import working in my IDE - I have to manually import every component I wish to use. I've never had to do this with any framework before.

Having searched the issues on GitHub I can see others have had this problem with various versions previously, but I can't find any resolution. I've also searched Discord and found recent posts from people stating that PrimeVue V4 has broken intellisense (I don't know if this statement is accurate).

I'm using primevue 4.0.4 and intelliJ IDEA 2024.1.2 however, I saw a post from a VS Code user stating that it doesn't work in VS Code either.

As you don't have a 'Setting up your IDE' section in the docs, I'm assuming that you aren't expecting any specific configuration to get this working, but out of the box, it isn't.... what do you suggest?

Thanks

Reproducer

https://stackblitz.com/edit/primevue-4-vite-issue-template

PrimeVue version

4.0.4

Vue version

3.x

Language

TypeScript

Build / Runtime

Vite

Browser(s)

No response

Steps to reproduce the behavior

Start. new primevue project and open it in your editor.

Expected behavior

autocomplete and import work for PrimeVue components

[cjb-g]

Did you try https://primevue.org/autoimport? Fixed it for me in vs code, now I get autocomplete in the editor and it gets rid of all the import xxx from 'primevue/xxx' clutter in my components.

Note that I had to reinstall the Vue Official plugin after setting up the resolver in my project.

[danhumphrey]

Thanks for your reply.... I tried using autoimport, but it wouldn't work with Astro. I also tried Astro's own auto-import with the PV resolver, but that wouldn't work either. I just don't understand what it is about PV that makes it unable to work with modern IDEs...

[danhumphrey]

I have a resolution. I have no idea why PrimeVue isn't recognised in the IDE, but configuring autoimport does indeed help (avoid the manual import statements).

For anyone else using Astro, here's my working astro.config.mjs file:

import { defineConfig } from 'astro/config';
import vue from '@astrojs/vue';
import tailwind from '@astrojs/tailwind';

import Components from 'unplugin-vue-components/vite';
import { PrimeVueResolver } from '@primevue/auto-import-resolver';

export default defineConfig({
  integrations: [tailwind(), vue({ appEntrypoint: '/src/main' })],
  vite: {
    plugins: [
      Components({
        resolvers: [PrimeVueResolver()],
      }),
    ],
  },
});

[blamze]

I'm also having problems that PhpStorm not connecting to autoImported components in Nuxt v3 project with PrimeVue 4.

#6188

This PR should improve things I believe