Building web components ?
-
Hello,
I have read the discussion about the differences between vue-cli3 and quasar-cli
I understand the benefits of quasar-cli.
But ihmo, i think there’s one thing really good in vue-cli: it’s possible to build web components with option “target --wc”I think web components is the future for web development (shadow dom is really great for mixing components from various sources without problem with css scoping).
Is there a plan to improve Quasar with the ability to build web components ?
And many thanks for your work
-
Um, you do realize the resulting built component made from “target --wc” isn’t a pure web component, but rather a packaged component usable or “importable” into your system, as long as the Vue library is also available? In other words, you couldn’t use a --wc built component without Vue also loaded. To me that isn’t web components as they were intended. It’s more like interoperable Vue components.
Quasar has it’s own method too, at least for interoperability within the Quasar ecosystem. It’s called the App Extension system. About the only thing missing in Quasar would be an export feature in the CLI to package any custom component (or maybe even set of components) automatically into an app extension.
Scott
-
So Scott been learning Quasar, actually built a pretty nice app with it in a few days with only a little self-taught programming background. Love the framework and how simple it is to use. Been getting my tips and techniques from these forums and beyond and see you providing a lot of help and it is much appreciated. Sadly though in my hour of need here - building a web component or web package component usable or whatever it is called at the end of the day I need to provide an HTML page to insert my Built with Quasar app as a <insert pure quasar term for wc here>. I don’t care if the HTML page needs to import Vue.
This HTML page will be linked to a menu item in a dashboard on a PHP project and I need to pass vars or props in the HTML tag <myapp-component name=“Joe” id=“12345”></myapp-component>. I have tried several Vue libraries and wrappers to get this “out of the box” Vue CLI (target --wc") feature to work with Quasar and am close with this package ~ https://karol-f.github.io/vue-custom-element/#/demos/binding but for the life of me cannot get the props to pass to my Quasar app. I can with Vue CLI build all day long though.
So taking your lead I look at the App extension system and don’t see how that can work - yes I know that I am not johnny Javascript yet but there really isn’t much there that leads me hope this can be done. Can you provide any? I need a single app.js and css.js (not hashed) and way to import Quasar as a packaged component or web component or whatever…
-
@rjp - I’m not sure what you want. Quasar builds complete apps or rather you build complete apps with Quasar. It wasn’t made to export out its components for general use. You still need Quasar (and Vue).
Scott
-
HI Scott, revisiting again for a deployment.
What I am asking is can Quasar build as a web component.
Vue CLI has a build that will wrap a vue component or app : https://cli.vuejs.org/guide/build-targets.html#web-component
My current deployment I have a customer using iFrame and sending a get with query params to initialize views and data. A web component they just add a tag to their html page and pass props - ideal solution…
-
You can use Quasar as a Vue plug-in. It won’t “build” as a web component.
https://quasar.dev/start/vue-cli-plugin
Scott
-
@rjp Did you finally was able to compile a web component with Vue + Quasar embedded inside ? The closest I’ve been (with not success, unfortunately) was following this link instructions:
https://medium.com/@juanignaciogarzon/creating-a-web-component-with-vue-quasar-188007ec999e -
Also looking for a solution. It may not be a “pure” web component, but I am looking for a way to embed my app within another web page without using an iframe. I don’t even care about passing props.
-
I got this working like this: https://gist.github.com/larvanitis/78fd056ae4a30337a29a982bebe213d2
It is not a proper web component but you can load it in any page, as long as you have
Vuein the global scope.Note: it is not tested that well, so take care.
-
And this for a reusable wrapper creator with support for
props: https://gist.github.com/larvanitis/b4937a182e41b8563e95e531f199b7e2Also untested…
