Feature request: Don't allow components to be globally accessible.

[michaelpumo]

In the design system, you're free to build components referencing other components, without having to import them and without having to declare them within the components object.

This is very problematic, as if you ever import one of these into another Vue project, the console will light up with errors regarding missing dependencies and break.

I'm not sure how this is a good feature to have anyway since the whole idea of a component is to be a self-contained piece of code that defines its purpose and functionality explicitly, up-front.

I feel that globally accessible components throughout the system just leads to more problems than it solves.

[sdellis]

@michaelpumo I tend to disagree.

It works well the way it is for my use cases since VueDS makes it extremely easy for other devs to use the components in their apps by copying and pasting the markup from the docs, without having to import all the components separately. This was a huge selling point for our front-end team since our backend devs (mostly Rails) don't want to have to think about Vue (but they want the fully tested and accessible components that we create).

If you want to publish your components separately, that's fine and you can pull each one into VueDS via package.json to wrap them up in docs (or import into your patterns/templates or publish in a package).

[arielsalminen]

@michaelpumo I’m very much open to other ideas here. So far this model has been working very well with the clients I’ve worked with, and has been making the development process faster, but I’ve been also wondering if there are problems that it creates which I might not be aware of currently.

btw, it’s also possible to change this behaviour by disabling what’s happening in system.js: https://github.com/viljamis/vue-design-system/blob/master/src/system.js and then just importing components one-by-one/case-by-case where needed. Of course, then you’ll also have to figure out how do you publish the system in a way that is easy to import and use in other vue.js apps.

[arielsalminen]

I’d suggest making this an option or providing instructions if someone wants to disable this behaviour.

[MaximStone]

@viljamis Thanks for great design system. It's really helpful!

Is there an example of disabling global registering of components and example of project that works with local registering? I've tried to register locally but there are errors with SCSS variables. I suppose this happening because I've imported component from src folder, But npm version of design system already compiled, and components are hidden somewhere in system.js, am I right?

So question is - how I can get the link to compiled component from it?

There are many profits of using local component registering especially for developers, because some IDE may connect tags of components with their source code and show it if need.