search

vuejs / docs

📄 Documentation for Vue 3
https://vuejs.org
Other
2.94k stars 4.47k forks source link

Best practice to create a component library with vue #1060

Open SvenBudak opened 3 years ago

SvenBudak commented 3 years ago

Currently (and also the last months) I found only tedious knowledge about how to create a component library with VueJS. I found tons of articles that were either outdated or left out basic features.

The best I found so far was a CLI to create component libraries: https://github.com/team-innovation/vue-sfc-rollup

This is a very good base, but it still uses the depricated node-sass instead of sass: https://www.npmjs.com/package/sass

And what I see as the biggest problem is that with vue-sfc-rollup you can't work with sass directly in the vue components. For example <style scoped lang="scss"> will not work. But it should, because you want to load component related styles only once the component is loaded. Here, you should definitely take automated care that the component styles are loaded only 1 time in the DOM, even if the component is loaded 100 times.

It would also be helpful if you could specify a sass / scss file that is ALWAYS loaded (for example to load a reset.css or normalize.css) and a sass / scss file that is always loaded when a component is loaded from the libary (could for example contain css variables that are necessary for the components).

This would massively reduce CSS overhead, developers would be more willing to invest time in developing high quality component libraries (which should greatly expand the ecosystem in a short time) and the performance of Vue applications would look much more attractive on paper.

If these problems can be solved, I would recommend to contact the developers of vue-sfc-rollup if they would be interested in integrating their CLI directly into the VueCLI. Or allow to integrate them. Similar to what is possible with Angular, for example: https://angular.io/guide/creating-libraries (Which works wonderfully, by the way. I have already created several libraries with it and had a lot of fun developing them).

skirtles-code commented 3 years ago

From a documentation perspective, this has the potential to be a Cookbook entry. It might need to be multiple entries covering different aspects as I suspect it would be too much for a single entry.

965 is related, though that only covers one specific part of the process.