How do we add prefix for all components?

[pbtkhoa]

I'm trying to add prefixes to all components. And I can't find how to do it?
Could you somehow add it as a feature?
Thanks a lot

[kasperskov-pdk]

Would be nice.
I tried

 resolvers: [
                        (name) => {
                            if (!name.startsWith('prefix')) {
                                console.log(name + ' is missing prefix');
                                return { name: 'prefix' + name };
                            }
                        }
                    ]

Does not work. The resolver is only for resolving the path.

[RuBaWa]

Do you have found a solution?

I also want to prefix all my components. For example:

WButton should resolve src/components/Button.vue

[Veseron]

The returned object also needs a "from" property.
But I can't figure out how to do it right.

[acibilous]

any updates?

[simonmaass]

did anyone get this to work?

[craigrileyuk]

did anyone get this to work?

It requires some coding changes for this to work.

The way component resoution works is that a component map is generated from your dirs and if nothing matches that map, then it uses the custom resolvers.

There's no options, transforms, filters or callbacks that have any ability to affect this component map creation.

Technically speaking, for an MVP, all you would need to do is insert a prefix here:

unplugin-vue-components/src/core/context.ts

Line 228 in 63d5c7e

this._componentNameMap[name] = {

before the name variable.

There's a pull request (#612) that's been languishing for over 2 years, so I doubt anything is ever going to happen in implementing this feature.

There's a pretty easy workaround though... just put all your components inside a subfolder with your prefix as its name and then enable directoryAsNamespace.

[userquin]

You can create a custom resolver adding the prefix option, check this resolver to allow prefixing all Vuetify components using VuetifyXXX instead VXXX (we only allow prefix as a boolean, but you can allow any prefix, the logic in that case should be changed):

https://github.com/userquin/unvuetify-monorepo/blob/main/packages/unplugin-vue-components-resolvers/src/index.ts#L62-L96

[craigrileyuk]

The problem with using a custom resolver is that you lose access to all the filters like directoryAsNamespace et al.

You have to reimplement everything yourself.

It’d be far preferable to be able to specify a prefix for components in the vite plug-in config.

[userquin]

then, why do you need to add a prefix?

[craigrileyuk]

Asking “why” is a strange question for software development.

A plug-in like this has thousands of users with complex, unpredictable and varied needs in infinite different contexts.

“Why not” is always the better question.

Personally, it’s a DX issue where it helps to quickly know where a component is coming from if I’m using them from many different sources in the same project.

But others might have more functionality-based needs.

[userquin]

The problem with using a custom resolver is that you lose access to all the filters like directoryAsNamespace et al.

directoryAsNamespace should only be applied to your local components not to third party dependencies, that's why I'm asking why

[craigrileyuk]

Because you suggested using a custom resolver to add a prefix to local components…

[userquin]

Oh, sorry, this issue is about prefixing local components without using directory as namespace option, I will try to add the prefix feature.