vue-design-system
vue-design-system copied to clipboard
Convert the Vue DS components into native Web Components
Hello,
is it possible to build the Design System and generate the native web components, so these components can be used on native (non-vue) environment web app?
I was looking into this package and wondering if it's possible to integrate it with VueDS.
According to the FAQ it seems it should be possible: https://github.com/viljamis/vue-design-system/wiki/frequently-asked-questions-(FAQ)#is-this-tool-only-for-vuejs-based-applications
But I didn't find any documentation about how to do so in detail.
I guess it would require having a loop that includes all components separately, and then run:
% vue-cli-service build --target wc --name $componentName src/elements/SomeComponent.vue
The part I'm currently struggling with is how to include the design system's CSS inside the generated Web Component. So far it seems the only way that worked was importing the "system.css" from the outside by adding this inside the component's style tag:
<style>
@import url('/path/to/server/system.css');
</style>
but this would require every component to be modified, and also have the components know where the system.css is located, maybe through an additional attribute. This is rather cumbersome.
Ideal would be if there would be a system that would only extract the relevant CSS rules from the system.css (or before it's generated) and then automatically inject them into the inline <style>
tag.