Thanks to visit codestin.com
Credit goes to github.com

Skip to content

How do we add prefix for all components? #438

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

Open
pbtkhoa opened this issue Jun 29, 2022 · 13 comments
Open

How do we add prefix for all components? #438

pbtkhoa opened this issue Jun 29, 2022 · 13 comments

Comments

@pbtkhoa
Copy link

pbtkhoa commented Jun 29, 2022

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
Copy link

kasperskov-pdk commented Sep 1, 2022

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
Copy link

RuBaWa commented Oct 14, 2022

Do you have found a solution?

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

WButton should resolve src/components/Button.vue

@Veseron
Copy link

Veseron commented Oct 16, 2022

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

@acibilous
Copy link

any updates?

@simonmaass
Copy link

did anyone get this to work?

@craigrileyuk
Copy link

craigrileyuk commented May 3, 2025

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:

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
Copy link
Member

userquin commented May 3, 2025

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
Copy link

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
Copy link
Member

userquin commented May 3, 2025

then, why do you need to add a prefix?

@craigrileyuk
Copy link

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
Copy link
Member

userquin commented May 3, 2025

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
Copy link

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

@userquin
Copy link
Member

userquin commented May 4, 2025

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

8 participants