search

quasarframework / quasar

Quasar Framework - Build high-performance VueJS user interfaces in record time
https://quasar.dev
MIT License
25.97k stars 3.52k forks source link

Create a "web component version" of quasar #6172

Closed sandrotaje closed 4 years ago

sandrotaje commented 4 years ago

It would be great if you make possible in the future to use the beatifull components of quasar but as a web component including a file from a repo.

I'm actually trying to export a simple web app using quasar as a web components and with some tricky hack i succeded.

I think that the possibility to use quasar inside other lib project would be something that enlarge the user base of quasar framework.

Obviously this is not comparable with using the framework but if someone want, for a specific project, only some component of quasar, it would be great to include through the new web component api.

Thanks in advance.

rstoenescu commented 4 years ago

Hi,

You can already, through the UMD usage...

sandrotaje commented 4 years ago

UMD import all quasar components and is not in the standard of Web Components. What i meant is to have for every graphic component in quasar a single web components that create an html tag in the form of web components. This can be very usefull for someone that wants to import only something (ex. data table).

I understand that is probably not the focus of the quasar framework. IMHO is a feature that can be very important in the future to have for a javascript framework.

rstoenescu commented 4 years ago

This would be a project even bigger (than Quasar at the current moment) in itself... In my opinion, Web Components are a nice thing but they won't replace Vue/React/Angular completely any time soon because they lack a lot of features.

LukaszKiedrowski commented 3 years ago

It’s not about replacing Vue/React/Angular but If every Quasar component would be wrap inside web component(Shadow Dom) then it will allow full styles / html encapsulation which is not possible at the moment. Quasar register global styles. Quasar doesn’t use even css modules. It is very useful to have such styles encapsulation if there are couple of projects on one page (aka microfrontends) it would be good to support something like that even if it will take a lot of time to implement. I can support with that but the question is - do you even consider to work on it in the future ? Thanks and have a nice day.

LukaszKiedrowski commented 3 years ago

@rstoenescu please read post above - thanks.

corepay commented 3 years ago

Hi @LukaszKiedrowski I am using quasar for apps I convert to web components in a hacky way as well. I build a vue app, add the quasar plugin and follow these few instructions https://itnext.io/vuidget-how-to-create-an-embeddable-vue-js-widget-with-vue-custom-element-674bdcb96b97

So far so good on the web components - except....I cannot figure how to get them to the shadow dom. currently just wrapping them and using them in some of my vue projects as i can control the css - but clients right now need to iframe to keep the css encapsulated.

I agree with your sentiments above - I have actual clients clamoring for web components using php, angular and react - getting all the benefits of integrating parts of my platform without having to build out their UIs with my apis.. Sadly I am starting to migrate my efforts to stencil.js after getting good with quasar.

Do you have any tips on how to get a vue/quasar web component into shadow dom?

I think @rstoenescu needs a little more convincing...

LukaszKiedrowski commented 3 years ago

Hi @corepay - first of all - thank you very much for your reply. Regarding your question. It is not big problem to get Quasar work with web components and shadow dom but only for static components like table, button, input and otherS. You can use for it target wc https://cli.vuejs.org/guide/build-targets.html#web-component

It’s not everything - you need to configure your web font icons outside of shadow Dom and also inside shadow Dom you need to define css variables for colors like primary on the root level of your component. There are also couple of other issues like global css reset. Please remember also that you need to import Quasar css into this web component. This should work without modification of Quasar. The biggest issue is with elements like q-select q-dialog notification q-popup-proxy and so on because quasar append them to document.body - and quasar styles will be place inside web component(shadow Dom) so appended dialog won’t have visual layer. To fix this issue you need to append dialog inside web component. It would be good if quasar allow to specify target selector for all those components. Once I will have time I will prepare PR and let’s see but maybe Quasar team have some plans for it ? What do you think @rstoenescu

theWebKeyGuy commented 3 years ago

I would also like to see this become an option as I feel this is the only place where I feel the framework is lacking. Was hoping to use this framework for everything but I guess not?... Would make it way easier to make things like Wordpress plugins as well but I guess I can use another framework.

LukaszKiedrowski commented 3 years ago

@theWebKeyGuy please see related bug ticket with some description and pull request which allow to fix one of the components - this is first step of course - other components and global logic/styles have to changes later.

bug ticket: https://github.com/quasarframework/quasar/issues/10538

pull request: https://github.com/quasarframework/quasar/pull/10824