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


Log in to reply