Renaming components with template syntax support

BuuBux commented 1 year ago

Describe the feature you would like to see added

Hi! If we use the standard way as to register component as a ('Button', Button) template works fine without any problems, but when we want to rename / add prefix to it ('PrimeButton', Button) it looks like that syntax doesn't know we change it there and cannot resolve it but app works well.

My PrimeVue plugin:

export default defineNuxtPlugin((nuxt) => {
  nuxt.vueApp.use(PrimeVue, { ripple: true })
  nuxt.vueApp.component('PrimeButton', Button)
  nuxt.vueApp.component('PrimeInputText', InputText)
})

My template error:

Unknown html tag PrimeButton

Code:

https://stackblitz.com/edit/github-pplhnz?file=app.vue

Is your feature request related to a problem?

Couldn't found any issue to that

Describe the solution you'd like

Custom names of components should be supported in template and autocomplete should be working

Describe alternatives you have considered

No response

Additional context

No response

tugcekucukoglu commented 1 year ago

Please add a codesandbox link with the issue.

github-actions[bot] commented 1 year ago

We're unable to replicate your issue, if you are able to create a reproducer or add details please edit this issue. This issue will be closed if no activities in 20 days.

BuuBux commented 1 year ago

Hey @tugcekucukoglu 👋🏻

CodeSandbox

You are not able to check it on code sandbox as it not supporting typescript & autocompletion i guess. I would suggest to download repo and run it locally with Volar enable

this is how my primevue config file looks like

I would like to add a Prime prefix to each component but my WS as well as VSC don't know this tag and it's understandable as there is no such tag in pure html but in Vue we can name our components so I would expect the renamed component would be now auto suggested by WS or VSC in template

Old name is suggested by IDE but it is not correct as it require Prime prefix

and you can check types when you hover

I don't know if you understand me correctly but i tried my best

Darkavid commented 3 months ago

Same issue here, even today. I cannot make prefixed PrimeVue components to be recognized by VSCode work. I followed the official documentation of adding a prefix for auto-imported PrimeVue components but VSCode does not offer me any kind of IntelliSense or autocompletion for the new component names HOWEVER it still does it for the original names (e.g.: Button instead of the PButton as I have configured).

I have even recreated the project three times now with different package managers and different VSCode plugins and kept it as pure as possible (without any additional package or config) but it just doesn't work.

To me it looks like that the problem might be that relevant .d.ts files that VSCode uses to know the components and their props is not automatically regenerated by the PrimeVue module (I am using Nuxt 3 btw) when the value for the configuration attribute primevue.components.prefix changes, although this would be the expected and desired behavior.

It is very frustrating because (for some very-hard-to-guess reason) PrimeVue does not have a default prefix for its components and even uses native HTML element names (?!) for its components overriding them instantly.

IMO there are two real-world use-cases here for the updating PrimeVue's component name prefix configuration:

you want a prefix
you want a different prefix

I don't think that the first one is valid at all. I mean, OF COURSE I want a prefix (why would I not seperate an external library's components from the native ones?), the edge case is when I don't, making the second use-case the only reasonable default setting. If that would be the case, we wouldn't be even having this discussion as I wouldn't have needed to even touch the default PrimeVue configuration 😄

primefaces / primevue