search

arielsalminen / vue-design-system

An open source tool for building UI Design Systems with Vue.js
https://vueds.com
MIT License
2.17k stars 225 forks source link

Convert the Vue DS components into native Web Components #174

Open chenxeed opened 5 years ago

chenxeed commented 5 years ago

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.

PVince81 commented 4 years ago

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.

PVince81 commented 4 years ago

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.