Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Nuxt autoimport component prefix: add typescript dynamic name support #6007

Closed
ReWWeR opened this issue Jul 3, 2024 · 5 comments
Closed
Assignees
Labels
Type: Bug Issue contains a bug related to a specific component. Something about the component is not working
Milestone

Comments

@ReWWeR
Copy link

ReWWeR commented Jul 3, 2024

Describe the bug

When added in nuxt.config prefix for component, then IDE doesn't see the new component name, it takes types from node_modules folder, where the names of the components are written without prefix.

Reproducer

https://stackblitz.com/edit/primevue-4-ts-vite-issue-template-csnodp?file=README.md

PrimeVue version

4.0.0

Vue version

4.x

Language

TypeScript

Build / Runtime

Nuxt

Browser(s)

No response

Steps to reproduce the behavior

  1. add in nuxt.config components: { prefix: 'Pv' }
  2. add button in any .vue file
    <pv-button label="Check 2" icon="pi pi-check" />
  3. It works, but IDE will show an error, that it is unknown custom HTML tag

Expected behavior

IDE should take new type name

@ReWWeR ReWWeR added the Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible label Jul 3, 2024
@mertsincan mertsincan self-assigned this Jul 8, 2024
@mertsincan mertsincan added Status: Pending Review Issue or pull request is being reviewed by Core Team and removed Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible labels Jul 8, 2024
@mertsincan mertsincan added this to the 4.0.1 milestone Jul 8, 2024
@mertsincan
Copy link
Member

@sparrow-chik-chrk
Copy link

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.

@tugcekucukoglu tugcekucukoglu modified the milestones: 4.0.1, 4.0.2, 4.1.0 Jul 22, 2024
@mertsincan mertsincan added Type: Bug Issue contains a bug related to a specific component. Something about the component is not working and removed Status: Pending Review Issue or pull request is being reviewed by Core Team labels Oct 4, 2024
@mertsincan
Copy link
Member

@sparrow-chik-chrk For now I changed dts: true. Could you please try your case after 4.1.0 is released?

@mertsincan
Copy link
Member

Also, please see;
https://github.com/unplugin/unplugin-vue-components/blob/main/src/types.ts#L155

Test:

<PrimeButton label="Submit" />

Config:

primevue: {
        // ...
        autoImport: true,
        components: {
              prefix: 'Prime'
        }
},

Output:
components.d.ts

/* eslint-disable */
// @ts-nocheck
// Generated by unplugin-vue-components
// Read more: https://github.com/vuejs/core/pull/3399
export {}

/* prettier-ignore */
declare module 'vue' {
  export interface GlobalComponents {
    PrimeButton: typeof import('primevue/button')['default']
    RouterLink: typeof import('vue-router')['RouterLink']
    RouterView: typeof import('vue-router')['RouterView']
  }
  export interface ComponentCustomProperties {
    AnimateOnScroll: typeof import('primevue/animateonscroll')['default']
    FocusTrap: typeof import('primevue/focustrap')['default']
    KeyFilter: typeof import('primevue/keyfilter')['default']
    Ripple: typeof import('primevue/ripple')['default']
    StyleClass: typeof import('primevue/styleclass')['default']
    Tooltip: typeof import('primevue/tooltip')['default']
  }
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Type: Bug Issue contains a bug related to a specific component. Something about the component is not working
Projects
None yet
Development

No branches or pull requests

5 participants