vue-cli 3.0 and the future of quasar-cli
a47ae last edited by
I agree that it is always bad to be forced to a specific build system by a framework, but I think Quasars case is a bit different.
Meteor is a standalone framework, whereas Quasar is somehow dependent on Vue.js, so it is also dependent on how Vue.js apps can be build (e.g. vue-template-compiler).
And because of that you are totally free to implement the build on your own just like pre 0.15 (I used to never use the cli to build but just call webpack directly via npm).
The real benefit of Quasar CLI comes from having one tool which supports different build setups like SPA, PWA, Electron and Cordova. In the pre 0.15 days it was a bit of a struggle to set up an Electron version of your app after you initiated a plain SPA. Also having all the webpack config in your project scared lots of people because it seemed very complex to get your project up and running, even if most people never needed to touch the build configurationand in the past is was not really possible to easily upgrade your Quasar version without modifying all the changed template parts by hand.
I think the problem here is that @rstoenescu commited lots of his time to build the new cli version and pack all the features in it. So I can totaly understand that its not really statisfying that you build such a tool, which right now is mostly state of the art and works flawlessly and people directly ask you to throw it all away because as @rstoenescu formulated it
[…] developers going for the new shiny thing
without arguing what they are missing from the current solution.
But I can also see where lots of the concernes are coming from. Of course it would be fatal if someday Quasar CLI would not longer work with the latest Vue.js version or was missing feature that makes it not longer usable for people. But if that happens it is most likely that Quasar as it self is not longer maintained, because why should @rstoenescu stop updating the cli somedays?
On the other hand the current Quasar CLI setup is very similar to the Vue.js CLI v3 setup:
- Both no longer ship a webpack config as part of the source but build this config during runtime
- Both provide a config file where most of the aspects are configured
- Both use webpack for building
Where they are different:
- + Quasar allows to build SPAs, PWAs, Electron apps and Cordova apps out of one source repository, as far as I know this is not possible with the defautl Vue.js setup
- - Vue CLI allows for a plugin infrastructure which can alter the build process. Even Vue CLI itself is build using these plugins
- - Vue CLI alows for “Chaining” of webpack config (https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md#chaining-advanced) which allows to later tap into webpack rules
I guess webpack chain feature is easily integratable into Quasar CLI. So currently I see no real benefit from migrating to Vue CLI except
Migrating to Vue CLI (while being a bit of a pain at first) propably saves dev time in the future.
Lets assume Quasar is provided as a config of Vue CLI, then @rstoenescu never has to bother about updating the webpack config, learning about new PWA toolchains, testing and maintaining a cli by himself, while still being able to support Cordova and Eelctron via the plugin infrastructure.
This integration would propably also support Quasars stand in the Vue.js community.
So I am really looking forward to hear some input from @rstoenescu on this topic!
P.S.: @LaurentPayot Are you sure the tempalte system will be deprecated? From your link I can only see that the PWA template will be deprecated but not the infrastructure as such. Also last time I checked workbox was not deprecating the other tools, but more combining the, while still being in development, but you are right, workbox is propably the future for PWAs
LaurentPayot last edited by
The short list of Vue CLI 2 templates was mainly about build systems. They are now replaced by a plugin-based configuration of webpack (a little bit like the Quasar’s extendWebpack function btw, except no templates are used at all)
a47ae last edited by
@laurentpayot Ah, then this is indeed a strong point on moving part of Quasar CLI to the new Vue CLI platform.
I think these are the plugins you are referring to: https://github.com/vuejs/vue-cli/blob/dev/docs/plugin-dev.md from my understanding these provide hooks into the cli tool, while the webpack part is, just like Quasar CLI, there for users to alter their config but it also makes use of chaining as linked in my post above.
LaurentPayot last edited by
@a47ae yes, wrong link
Frondor last edited by Frondor
I agree its such a pity to not have previously anticipated this, although Vue CLI 3 has been in development for a few months. I was concerned about its development and also the new Quasar CLI for v0.15, but I assumed Razvan was not only aware of this, but also taking Vue CLI 3 into consideration (and probably he did! But decided to go for Quasar CLI anyway for some reason, which happened, and now I totally understand his frustration when somebody shows up with something like “Hey, let’s get into the hype-wagon of Vue CLI!”), so I didn’t worry at all.
I’m sure everyone here is aware of all the work and effort that required v0.15, but to make it clear, nothing from all that hard work would be lost by “migrating” to remote preset(s) of Vue CLI. It’s just a port, and the advantages of that are already well explained in the replies above.
Quasar Vue cli 3 plugin: https://goo.gl/fNxDU3
Quick summary of for/against arguments, as of writing this. You’ll have to decide for yourself.
- Using vue cli plugins
- Testing (unit & end to end), which Quasar CLI does not yet support it (it’s currently under work)
Disadvantages, due to current vue-cli 3 architecture:
- no ability to “write code once then deploy as a SPA/PWA/Mobile & Electron app”; you will usually pick what you want to build (SPA or PWA – only) right from the start when creating the app with Vue CLI; even if vue-cli will support these
- only SPA and PWA supported; can’t build Mobile or Electron apps as vue cli doesn’t support it; the smart algorithms behind Quasar CLI use more than one webpack config, which is not possible with Vue CLI
- none of the features embedded in quasar.conf.js; for many, you’ll have to manually edit your
- building/developing with one theme and switching to the other requires editing the vue config (in package.json or vue.config.js, depending on what you picked when creating the vue app)
- you lose the ability to effortlessly upgrade your the Quasar version that you are using as with Quasar CLI; it will possibly require you to manually edit
src/main.jsto update to latest specs
rconstantine last edited by
Wow. I’m impressed with @rstoenescu 's mature response in providing the Vue cli 3 plugin. As for myself, I’ll be using the Starter Kit for now.
One thing I wasn’t clear on is whether vue-cli 3 introduces breaking changes and can’t be used with quasar-cli at the moment - vue-cli is a dependency, right? Once vue-cli 3 is out of beta it will be the default installed with the basic npm install command, won’t it?
Another thing I’m not clear on is what vue-cli 3 means for quasar’s development going forward. I don’t imagine @rstoenescu will ignore it altogether, but I don’t think I’ve seen a statement about that.
In any case, I’m really enjoying working with Quasar.
nklayman last edited by
I believe all of the disadvantages listed can be solved/nearly solved:
no ability to “write code once then deploy as a SPA/PWA/Mobile & Electron app”; you will usually pick what you want to build (SPA or PWA – only) right from the start when creating the app with Vue CLI; even if vue-cli will support these
Not true, you can always call
vue add my-plugin
only SPA and PWA supported; can’t build Mobile or Electron apps as vue cli doesn’t support it; the smart algorithms behind Quasar CLI use more than one webpack config, which is not possible with Vue CLI
- PWA: @vue/cli-plugin-pwa (official)
- Mobile: vue-cli-plugin-nativescript-vue (TRULY NATIVE, by nativescript-vue, semi official)
- Electron: vue-cli-plugin-electron-builder (made by me)
You can use a custom webpack config by calling
api.resolveChainableWebpackConfig()and modify it as you wish. With this PR you can import the build and serve commands and call them with a custom chainable webpack config (used in vue-cli-plugin-electron-builder).
none of the features embedded in quasar.conf.js; for many, you’ll have to manually edit your src/main.js file
This is true, however, I bet this could be implemented in a plugin by having it create a custom
quasarImports.jsduring build/serve and having it imported in
main.js. This is also a relatively minor issue.
building/developing with one theme and switching to the other requires editing the vue config (in package.json or vue.config.js, depending on what you picked when creating the vue app)
With the previously mentioned PR, you can overwrite the build/serve commands, calling them multiple times for each theme with custom output directories for each build.
you lose the ability to effortlessly upgrade your the Quasar version that you are using as with Quasar CLI; it will possibly require you to manually edit src/main.js to update to latest specs
Most of the time, it is quite easy to upgrade to the new version, and will be easier with the custom
Some other features of using vue-cli not mentioned:
- Way more community plugins (unit testing, typescript, etc…)
- CLI ui, making it super easy for new developers
- Better support, the entire vuejs team is working on vue-cli
- Easier integration with existing vue-cli 3 apps
- Less risk for large projects as they are not locked into quasar
- Less work for quasar dev team as they have less bugs, don’t have to add typescript/testing support, and just less code to maintain in general.
I look forward to the bright future of quasar and I hope my comments will be taken into account.
“write code once then deploy as a SPA/PWA/Mobile & Electron app” – you said: “not true”. Then you listed a mobile vue cli 3 plugin which uses nativescript (so NOT actually web code using web api). I’d really be interested to see how you can write one codebase then run it on electron and nativescript
The main point is that if you add one of the PWA, Electron or any other “Quasar mode-like” vue cli 3 plugin, you’re building only PWA or only Electron, or only (…fill in the blanks here…). Unless you create multiple project folders. This is for starters. Then, saying you can add some plugin is not equal to having same feature-rich functionality as embedded into Quasar CLI. Some examples that immediately come to my mind (the full list is big): command line parameter tells what you want to develop/build (SPA, PWA, Mobile, Electron), directly develop on a mobile phone (or emulator) with HMR, automatic handling of statics (without the need to change any path) regardless of vue router mode chosen, and sooo many more.
I believe each developer should chose one path after they know both (Quasar CLI / Vue CLI) really well, which I feel it’s the thing missing in most comments here. My recommendation is Quasar CLI, but you can safely go with Vue CLI too, depending on your needs. In any case, it’s no war between Quasar CLI and Vue CLI as some might imply. Quasar is about flexibility and it will forever be. You want to use Vue CLI 3? Ok, go that path. You want to get the recommended experience with Quasar, go with Quasar CLI. There’s a Nuxt module coming up, and lots more. Choose whatever fits your needs best. Flexibility. Nothing more.
Also mind the timestamp of each comment and the corresponding vue-cli state at each of those moments. For example you’re saying vue cli ui was not mentioned. It didn’t exist at that time
LaurentPayot last edited by LaurentPayot
I’m going full PWA so I do not need Electron nor Cordova. I use vue-cli 3 with a customized Quasar UMD build (removed unneeded components and css with a bit of metaprogramming) and with a custom script at startup I can dynamically load different themes depending on the platform.
The more I use vue-cli the more I think quasar-cli is amazing because it really hides a lot of complexity from developers.