Components not recognised in VSCode IDE

[basvdijk]

When I checkout https://github.com/primefaces/primevue-quickstart the VScode IDE does not recognise the components with VueDX

Is there missing a config or reference?

[ananni13]

Volar also gives some strange errors, worked fine with 3.1.2:

I tried both global and local imports, same issue with every component.

Another example with Dropdown and some props:

[cagataycivici]

@tugcekucukoglu @mertsincan Can you review this please?

[mertsincan]

Hi @basvdijk,

Could you please try it after creating vueconfig.json file? I checked VueDX extensions. It waits for vueconfig.json file to global components such as HelloWorld.vue and PrimeVue components.

Hi @ananni13,

Could you please try the following Dropdown definitions for this? Are they OK for you? I'll add them to the next version? node_modules/primevue/dropdown/Dropdown.d.ts

import { VNode } from 'vue';

interface DropdownProps {
    modelValue?: any;
    options?: any[];
    optionLabel?: string;
    optionValue?: any;
    optionDisabled?: boolean;
    scrollHeight?: string;
    filter?: boolean;
    filterPlaceholder?: string;
    filterLocale?: string;
    editable?: boolean;
    placeholder?: string;
    disabled?: boolean;
    dataKey?: string;
    showClear?: boolean;
    tabindex?: string;
    inputId?: string;
    ariaLabelledBy?: string;
    appendTo?: string;
    emptyFilterMessage?: string;
}

declare class Dropdown {
    $props: DropdownProps;
    $emit(eventName: 'input', value: string): this;
    $emit(eventName: 'change', e: { originalEvent: Event, value: string }): this;
    $emit(eventName: 'before-show'): this;
    $emit(eventName: 'before-leave'): this;
    $emit(eventName: 'show'): this;
    $emit(eventName: 'hide'): this;
    $emit(eventName: 'filter', e: { originalEvent: Event, value: string }): this;
    $slot: {
        option: VNode[];
    }
}

export default Dropdown;

[basvdijk]

@mertsincan what do you want me to put inside the vueconfig.json? With an empty one nothing changes.

[mertsincan]

Hi @basvdijk Yes, it can be empty. OR Please see; https://marketplace.visualstudio.com/items?itemName=znck.vue-language-features ("Accepts configuration for global component resolution." section)

[basvdijk]

@mertsincan an empty one doesn't make a change unfortunately. I can't imagine I have to add an entry for every single PrimeVUE component I use right?

{
    "globalComponents": [
        "./node_modules/primevue/inputtext/InputText.vue", {
            "InputText": {
                "moduleName": "./node_modules/primevue/inputtext/InputText.vue"
            }
        }
    ]
}

[ananni13]

@mertsincan Hi, I tried swapping the definition with the one you posted and that seems to work, no ts errors in VSCode with Volar anymore and autocomplete shows the correct options.

Old:

New:

So I guess that will have to be changed for every component? :sweat_smile:

[mertsincan]

@ananni13, yes :D I'll update all components.

@basvdijk, did you test it with empty config file? //vueconfig.json

{
}

This works fine for me.

[basvdijk]

@mertsincan see https://github.com/primefaces/primevue/issues/934#issuecomment-775759471

Tried again {} does not work

[mertsincan]

Thanks a lot for the update, @basvdijk Interesting! @tugcekucukoglu Could you please check it?

The other TS issues have been fixed in https://github.com/primefaces/primevue/issues/957.

[tugcekucukoglu]

Hi, As @mertsincan said #934 (comment) "Accepts configuration for global component resolution." section gives the answer. An example of vueconfig.json

{
    "globalComponents": [
        "src/components/HelloWorld.vue",
        {
            "InputText": {
                "moduleName": "./node_modules/primevue/inputtext/InputText.vue"
            },
            "Button": {
                "moduleName": "./node_modules/primevue/button/Button.vue"
            },
            "Dropdown": {
                "moduleName": "./node_modules/primevue/dropdown/Dropdown.vue"
            }
        }
    ]
}

[basvdijk]

@tugcekucukoglu I had tried the same, no luck

{
    "globalComponents": [
        "src/components/HelloWorld.vue",
        "src/views/ShopOverview.vue",
        {
            "Button": {
                "moduleName": "./node_modules/primevue/button/Button.vue"
            },
            "Card": {
                "moduleName": "./node_modules/primevue/card/Card.vue"
            },
            "Column": {
                "moduleName": "./node_modules/primevue/column/Column.vue"
            },
            "DataTable": {
                "moduleName": "./node_modules/primevue/datatable/DataTable.vue"
            },
            "InputText": {
                "moduleName": "./node_modules/primevue/inputtext/InputText.vue"
            }
        }
    ]
}

[tugcekucukoglu]

Please try adding vueconfig.json with PrimeVue 3.2.4

[cagataycivici]

Any luck with 3.2.4?

[basvdijk]

@tugcekucukoglu @cagataycivici just checked with PrimeVue 3.2.4 and {} in my vueconfig.json. Looks like it works fine now, well done and thanks!

[istvank]

Hi, I just tried the same, does not work. Cloning primevue-quickstart, then changing PrimeVue dependency to 3.2.4, npm install and creating a vueconfig.json with {}. The VueDX error 59001 disappears, but the Cannot find name 'Toast'. stays. Am I missing something!?

[basvdijk]

@istvank @tugcekucukoglu @cagataycivici After adding more components to my project it turned out vscode is still not recognizing the components. Looks like vscode keeps a cache or something.

[cagataycivici]

Are you using typescript? It could be that we need to drop in an index.js for components just for VSCode.

[basvdijk]

@cagataycivici Yes, I am using typescript. The stack is:

• Vue3
• Typescript
• Vite
• PrimeVue 3.2.4

[istvank]

Yes, I am also using typescript, same stack as @basvdijk. What I do after changing "vueconfig.json" is "Restart TS server", then for a few seconds it seems okay, but then again, VueDX/TS (1304) error. In my own project, in the primevue-quickstart and also in the primevue-typescript-quickstart projects.

[VisaElectronic]

@ananni13, yes :D I'll update all components.

@basvdijk, did you test it with empty config file? //vueconfig.json

{
}

This works fine for me.

I have this same problem with my nuxt js. This solution work for me thank.

[cagataycivici]

We've added some definition files for web storm and also working on vscode. My colleagues told me they can't see any issue with VSCode but this has a high priority. Being worked on to provide a decent code completion support across different tools. Will keep you updated.

[mertsincan]

Hi,

Many changes have been made for IDEs and browser extensions in v3.5.0. It seems to work fine on IDEs after these changes. Therefore, we can close this ticket for now.

If the problem persists after v3.5.0 is released, please reopen this ticket. Best Regards,

[rajaie]

For anyone who arrives here after seeing weird error from Primevue components and VS Code, try "Ctrl+Shift+P -> Volar: Restart Vue Server", that fixed things for me.