feat: support add components prefix

[winchesHe]

Description

Add a custom configuration compPrefix

Support adding a prefix to the custom components type name generated by the unplugin

Example：

Components({
  dts: true,
  compPrefix: 'El',
  dirs: ['src/components']
})

-- TestComp: typeof import('src/component/TestComp')['default']

++ ElTestComp: typeof import('src/component/TestComp')['default']

Components({
  dts: true,
  compPrefix: {
    prefix: 'El',
    include: ['test/components'],
  },
  dirs: ['src/components', 'test/components']
})

-- TestComp: typeof import('test/component/TestComp')['default']

++ ElTestComp: typeof import('test/component/TestComp')['default']

OtherTestComp: typeof import('src/component/TestComp')['default']

Linked Issues

https://github.com/antfu/unplugin-vue-components/issues/372 how to add prefix with src/components or dirs ?

https://github.com/antfu/unplugin-vue-components/issues/385 How to add the prefix of all components in the 'src/components' directory ?

Additional context

I test this in my protect and it perform perfectly.

[lbevo]

Another issue about that #438 Would be great to merge that new feature

[TECH7Fox]

+1. Need this feature for testing a Nuxt package where components have a prefix.

Did anyone find a workaround for now?

[calumk]

Would be a really useful feature, for example for PrimeVue, where compontents have no prefix.

[TECH7Fox]

Hey @winchesHe I tried out your fork, but I can't get it to work. Hope you could help me.

I'm trying to get this to work in my Vitest setup, but it always fails to resolve components.

[Vue warn]: Failed to resolve component: mc-attachments-display-item

That component is located at src/runtime/components/Attachments/DisplayItem.vue.

I tried this:

Components({
  dts: true,
  dirs: ["src/runtime/components"],
  deep: true,
  compPrefix: "Mc",
  directoryAsNamespace: true,
  allowOverrides: false,
})

But with no luck. Any idea on what to try or how to debug?

[winchesHe]

Hey @winchesHe I tried out your fork, but I can't get it to work. Hope you could help me.

I'm trying to get this to work in my Vitest setup, but it always fails to resolve components.

[Vue warn]: Failed to resolve component: mc-attachments-display-item

That component is located at src/runtime/components/Attachments/DisplayItem.vue.

I tried this:

Components({
  dts: true,
  dirs: ["src/runtime/components"],
  deep: true,
  compPrefix: "Mc",
  directoryAsNamespace: true,
  allowOverrides: false,
})

But with no luck. Any idea on what to try or how to debug?

maybe try the directoryAsNamespace false

[TECH7Fox]

Hey @winchesHe I tried out your fork, but I can't get it to work. Hope you could help me. I'm trying to get this to work in my Vitest setup, but it always fails to resolve components.

[Vue warn]: Failed to resolve component: mc-attachments-display-item

That component is located at src/runtime/components/Attachments/DisplayItem.vue. I tried this:

Components({
  dts: true,
  dirs: ["src/runtime/components"],
  deep: true,
  compPrefix: "Mc",
  directoryAsNamespace: true,
  allowOverrides: false,
})

But with no luck. Any idea on what to try or how to debug?

maybe try the directoryAsNamespace false

Also tried that. Still nothing. Is there a way to check which components it got and how it named them?

[winchesHe]

Hey @winchesHe I tried out your fork, but I can't get it to work. Hope you could help me. I'm trying to get this to work in my Vitest setup, but it always fails to resolve components.

[Vue warn]: Failed to resolve component: mc-attachments-display-item

That component is located at src/runtime/components/Attachments/DisplayItem.vue. I tried this:

Components({
  dts: true,
  dirs: ["src/runtime/components"],
  deep: true,
  compPrefix: "Mc",
  directoryAsNamespace: true,
  allowOverrides: false,
})

But with no luck. Any idea on what to try or how to debug?

maybe try the directoryAsNamespace false

Also tried that. Still nothing. Is there a way to check which components it got and how it named them?

Another way I know is change the file name, It seems to be generated based on the file name.

If you want to check how it named them you can debug the plugin in you editor.

[simonmaass]

will this get merged?