Quasar: Quasar v2 with Vue 3

[rstoenescu]

This ticket is for informative purposes.

Teaser: https://codepen.io/rstoenescu/pen/dypbRPL?editors=111

The plan

Our main focus at the moment is shipping Quasar v2 with Vue v3.
The plan is to not introduce any breaking changes, unless forced by the vue 3 / vue-router 4 architectures.

Affected Quasar packages: "quasar", "@quasar/app".

Rough schedule

• First beta: "quasar" v2.0.0-beta.1 & "@quasar/app" v3.0.0-beta.1 - 2020/12/15
• Stable releases: "quasar" v2.0.0 & "@quasar/app" v3.0.0 - 2021/01/30

The current progress is in line with holding the above schedule.

The code

The branch currently holding Quasar v2 is called vue3-work.

Donations

We are very thankful to each and every donation as it helps us to keep the boat going. https://donate.quasar.dev

[ontwikkelfabriek]

@rstoenescu
Will the codebase of Quasar v2 with Vue 3 be rewritten in TypeScript just like Vue3 is?

[IlCallo]

Quasar v2 will lay the fundations needed for a Composition API + TS + tests incremental migration, which will take place during Quasar v2 lifecycle.

Quasar v3 will probably be released when this incremental migration is completed.

[chintan-mishra]

Those who downvoted. Or are planning to do so. READ THIS.

Providing a stable API that maintains as much compatibility as possible requires time, effort, and capital. This is not to say that things won't break when moving from v1->v2. But the collateral effect of migrating to a complete TS based Quasar will be too large on the wider community. Thus, as an engineer I am following the exact same steps mentioned here. I am migrating some code of my very large Quasar v1 with Vue2 to TS and by the time v3 arrives we will have the whole community using TS.

Finally, if you are creating a new project and want to use TS then just add TS support when creating the application using the wizard.

[rstoenescu]

Maybe an additional important information. For app developers it won't matter whether Quasar is written in TS or not. Sure, the autocomplete will work a bit better, but you as a developer are NOT required to also use TS in your app.

[msinkgraven]

Are there any plans or ideas to support vite in quasar v2?

[zhengycsh]

desire

[leannc]

Is the beta version available now ? Waiting for this~

[rstoenescu]

Hi everyone,

Sorry but we'll have to delay the beta version due to vue-loader which has some SSR features not implemented yet. We cannot release a beta version until SSR is fully solved or else we might introduce breaking changes during this beta stage -- and we want to avoid this at all costs.

The new schedule is:

• First beta: "quasar" v2.0.0-beta.1 & "@quasar/app" v3.0.0-beta.1 - 2020/12/15
• Stable releases: "quasar" v2.0.0 & "@quasar/app" v3.0.0 - 2021/01/30

[bzd2000]

Is there an Alpha release?

[rdev06]

Can I use branch vue3-work for learning Quasar2 with vue 3 purpose?

[bzd2000]

Tried to build the vue3-work branch, but don't see how to build to app package.
I followed to instructions in the contribution guideline, but it seems only for the UI package.

Are there instruction on how to build the App package?

[BenHayat]

@rstoenescu
I had recently made a suggestion on next Quasar version # in the forum. I'd like to echo that here as well.

Most third party products try to follow the main product version # to make it more clear to the customers. For example, now the the new .Net 5 is out, most of the third party libraries, they use # 5 as well. Like Entity Framework 5 or ASP.Net 5 and etc.
In Vue, Vuetify and PrimeVue are doing the same following V3.
My suggestion is to skip Quasar V2 numbering and go straight to V3. This way, new prospects won't get the wrong impression that Quasar V2 is for Vue 2.
Hope this helps.

[smolinari]

@BenHayat - Unfortunately, that isn't going to work. Quasar/UI v2 is planned to be purely a port to Vue 3. Quasar v3 is planned to be a further and important evolution of Quasar, also built on Vue 3. See the dilemma? 😊

Scott

[BenHayat]

@BenHayat - Unfortunately, that isn't going to work. Quasar/UI v2 is planned to be purely a port to Vue 3. Quasar v3 is planned to be a further and important evolution of Quasar, also built on Vue 3. See the dilemma? 😊

Scott

@smolinari
Now it all makes sense. Quasar V2 and Quasar V3.
I didn't know this information.

Thank you Scott!!!

[layanto]

Will Quasar V2 and V3 consider supporting Pinia as alternative to Vuex? I think the API for Pinia is similar to the proposed API for Vuex 5 and has better typescript support.

[smolinari]

@layanto - Vuex isn't directly a part of Quasar. It's only suggested during project creation via the CLI. In the end, you can use whatever state management package you'd like, as long as it works with Vue.

Scott

[layanto]

What about accessing store from boot file if using Pinia as state management instead of Vuex?

[smolinari]

I believe Quasar will inject in anything found under src/store. @layanto Don't quote me on that though. 😁

Scott

[rstoenescu]

Teaser: https://codepen.io/rstoenescu/pen/dypbRPL?editors=111

[JulesNeck]

This looks really promising. The new quasar version will be my favourite christmas gift. Thanks Razvan for your magnificent work!

[BenHayat]

What is the significance of this teaser, beside these fact that Quasar is running in V3? Am I missing something from looking at those cards?

[danielfaust]

@BenHayat That finally the migration of that old AngularJS-webapp to Vue3+Quasar is within reach?

[smolinari]

@BenHayat - It's just a sign.. a teaser.. that Quasar v2 is getting closer to being a reality.

Scott

[BenHayat]

@BenHayat - It's just a sign.. a teaser.. that Quasar v2 is getting closer to being a reality.

Scott

There is absolutely no doubts in anyone's mind that the team will deliver even better than others.
I thought I was missing something in particular, and that's why asked.

Thanks Scott

[JulesNeck]

@BenHayat
The new composition api of Vue 3 makes it possible to seperate code by logical concerns instead of spreading it over options and mixins. So it's just a different way to write code. The new quasar version will make it easier to write larger and more complex applications. But I guess you already know this. For me as a developer working on a quite complex project with quasar this will impact a lot of my code. The teaser isn't spectacular, granted. But it shows that Razvan is busy working on it. And this are very good news.

[BenHayat]

@BenHayat
The teaser isn't spectacular, granted. But it shows that Razvan is busy working on it. And this are very good news.

Thanks! I got the same impression and I'm very happy. Honestly, there isn't anything out there that can get close to Quasar. Trust me I've tried them... :-)

[bzd2000]

Indeed, it is the most complete and best maintained.

[danielfaust]

there isn't anything out there that can get close to Quasar

I've tried them as well. For me the one thing which immediately hooked me on Quasar was the fact that the popup dialog would not scroll the page if dragged, it really kept a lock in the pages scrolling position, and if anything would scroll, it would be the content of the dialog, if designed to scroll, but nothing else. It's a very minor thing, but it shows the level of detail in correctness of this framework.

Example open the following in Chrome on Android:

1) https://vue.mdbootstrap.com/#/modals/modal and scroll to "Centered", for example, then tap and scroll the dialog, it scrolls the entire page, but everything should be locked

2) Go to https://quasar.dev/vue-components/dialog and go to Basic - Alert (or any other). Everything is locked, just like a native component. From all the frameworks I tested, Quasar was the only one which got this right.

[JulesNeck]

@BenHayat
Of course I trust you! ;-) I also tried a lot of different tools and frameworks over the years. I started with Visual Basic .Net, after that C#. I even used Angular and react a bit. Before Typescript came up I worked on a huge project with Coffeescript and the Qt framework (which is basically C++). I also experimented with ionic. And after that I discovered quasar. It's like a developers dream! It's so elegant and clean. Even the code looks nice... ;-)

[BenHayat]

@rstoenescu ;
Hi Razvan;
Could you please clarify something for me?
In Quasar V2, does this mean that we can create a Vue 3 project, install Quasar V2 and write Vue 3 code, i.e. composition API, even though the Quasar components haven't been converted/re-written for Vue Composition API?

At this point, it's not important to me, if the Quasar components are NOT re-written for Vue, as long as I can build Vue compatible project and use Vue 3 features and Quasar components.

Thank you in advance!

[rstoenescu]

@BenHayat Correction. More than half of Quasar components have been rewritten using Composition API. Eventually they will all be (it's my current focus these days). But regardless, you'll be able to use Options API or Composition API or any other Vue 3 feature in your projects.

[smolinari]

@BenHayat

does this mean that we can create a Vue 3 project, install Quasar V2 and write Vue 3 code,

The suggested and better route will be, create a Qv2 project (via the Quasar CLI) and develop your app with Vue 2 and/ or Vue 3 concepts (i.e. options or composition APIs), but have your app 100% driven by Vue 3 at the core. 😁

Scott

[BenHayat]

@rstoenescu

@BenHayat _Correction. More than half of Quasar components have been rewritten using Composition API_. Eventually they will all be (it's my current focus these days). But regardless, you'll be able to use Options API or Composition API or any other Vue 3 feature in your projects.

Hi Razavan;
Previously, Scott had mentioned:

Quasar/UI v2 is planned to be purely a port to Vue 3

And when I asked for clarification from you, I was mainly trying to understand what Quasar 2 is and how we can use it with Vue 3.
But you said "Correction. More than half of Quasar components have been re-written using Composition API"

So, now I'm even more confused.
Can we have a clear statement, on the path how we should peruse with NEW project?

I'm getting conflicting answer between Razavan's and Scott's answers.
Thanks!

[rstoenescu]

What Scott and I said is not conflicting at all. Quasar v2 will be based on Vue 3.
Vue 3 offers both Options API and Composition API (although Composition API is preferred), so you can write your components in the form that you like. Options API is not something specific to Vue 2 only.
It's irrelevant whether Quasar UI is written with Composition API or not as it does not affect your devland code.

You will be able to upgrade your current project to use the newer "quasar" and "@quasar/app" versions or you can create a new Quasar CLI project. The stride with Quasar v2 is to have a smooth transition when developers upgrade to it. All .vue files will mostly not need any update since vue-loader will compile SFC directly to Vue 3. There are a few (but NOT many) breaking changes in Quasar UI as well (due to the under the covers Vue3 architecture change), but upgrading should be very easy.

[BenHayat]

@rstoenescu

What Scott and I said is not conflicting at all. Quasar v2 will be based on Vue 3.

But, those two answers, were related to porting existing Quasar Vue 2 apps to Quasar Vue 3 app. That's not what I've been asking.

It's irrelevant whether Quasar UI is written with Composition API or not as it does not affect your devland code.

That was my point in my original question, which I said, "It's not important to me if Quasar's components are written in Option API or Composition API". So we both agree on that.

My main question was, which you kind of answered, for a NEW project, Can we start with Vue 3 and composition API for OUR components and NOT write the code with Option API (Vue 2 style) and have to go back again and change all the Option API codes to Composition API? This is what I'm trying to avoid.
My question isn't about porting Quasar 1.x & Vue 2 code to Vue 3 code. It's about starting a NEW project using Composition API for our components.

I hope my question is more clear now.

[rstoenescu]

@BenHayat to summarize: yes, you can start with composition api in a new project

[smolinari]

@BenHayat - Not trying to sound like a smartass here, but

Quasar/UI v2 is planned to be purely a port to Vue 3

If Quasar is porting to Vue 3, it would be majorly silly for us to have the Quasar v2 users have new projects only working in a Vue 2 fashion (i.e. only offer the options API). So, to me, it was common sense that a port to Vue 3 for Quasar means Quasar v2 users would get all the bells and whistles of Vue 3 i.e. they can use the composition API. Sorry, if that assumption caused the confusion.

Scott

[BenHayat]

@BenHayat - Not trying to sound like a smartass here, but

Quasar/UI v2 is planned to be purely a port to Vue 3

If Quasar is porting to Vue 3, it would be majorly silly for us to have the Quasar v2 users have new projects only working in a Vue 2 fashion (i.e. only offer the options API). So, to me, it was common sense that a port to Vue 3 for Quasar means Quasar v2 users would get all the bells and whistles of Vue 3 i.e. they can use the composition API. Sorry, if that assumption caused the confusion.

Scott

In the past, I've been burnt by making an assumption based on "Common sense" or "my interpretation". Now I have to be very careful and clear, as my decision affects others and I'm responsible for that.
So I tend to be very black & white not to fall into my own wrong assumption's trap.