Upgrade to Quasar v2 / Vue v3

[nicksellen]

Quasar v2 (which uses Vue v3) is out in beta now, and it sounds stable enough to start working on our upgrade.

Vue v3 introduces the composition API, but I guess at first we should try and upgrade with as minimal changes as possible.

TODO

• upgrade dependency versions
• go through the upgrade guide https://next.quasar.dev/start/upgrade-guide
• list outstanding issues (add checkbox for each one)
• check extensions for Quasar/Vue incompatibility (add checkbox for each)

[pogopaule]

I'll give this a shot.

[pogopaule]

@nicksellen Quasar moves from Stylus to SASS. It seems we could keep Stylus for our components. Do you think it makes sense to kick out Stylus entirely and replace it with SASS project-wide? Or should we only move to SASS where necessary? https://next.quasar.dev/start/upgrade-guide#option-1-convert-a-project

[nicksellen]

Personally, I'd be happy to move to sass. The tooling around it is likely better and simpler to keep aligned with Quasar. What do you think?

The other consideration for now, is if that makes the migration work grow a lot. Would be fine to upgrading keeping with stylus, and consider the switch to sass separately.

[larzon83]

+1 for sass.
When keeping stylus and need to use color vars inside a component (style lang="stylus") the vars are now in sass and can't be imported.
Maybe we can have a temp styl file that has the same definitions as the new sass file. If one want to define a new var or editing an existing one, changes need to be also done in the styl file. We only have a few vars currently so I think that would be ok.
We also don't need to change linting when keeping stylus.

[pogopaule]

After reading the info box I am hesitant to start migrating Vue 2 to Vue 3. @nicksellen and @larzon83 what are your opinions?

I could not find any information if Quasar 2 is compatible with Vue 2. So in case you agree to wait with the migration of Vue, what about the migration of Quasar?

[larzon83]

@pogopaule Isn't the point of Quasar v2 to use Vue 3? So, after installing Quasar v2, Vue 3 gets installed?
Anyway, the Vue migration/compat build is currently in beta: https://news.vuejs.org/issues/193

[tiltec]

Quasar v2 is now officially released, I had to pin some dependencies in 6d82681 to keep the automatic dependency update PRs working. Seems it's finally time to move to Vue3/Quasar2!

@pogopaule Do you think it makes sense to rebase this PR or should we rather follow the migration guide again?

[pogopaule]

I haven't done much for this ticket and it's been some time...so I guess it is a good idea to start again

[tiltec]

In the last days, I spent some hours progressing the Quasar upgrade - it's quite complex!

Currently, I'm a bit unsure about style files. Quasar doesn't provide stylus variables anymore, so it makes sense to move away from it. I followed @pogopaule's previous approach and converted everything to sass, but ran into some linter bugs. It seems that the sass syntax support is barely maintained, and some other issue comment mentions that scss is much better supported.

I now tend to convert to scss, which is quite similar to plain css with a lot of braces and semicolons. Not as pleasant to write, but probably fine...

EDIT: For now, I'll leave it at sass and disable stylelint.

[tiltec]

vuex-connect seems incompatible with Vue 3, I opened an issue. But maybe we want to get rid of the split between container and UI components anyway, therefore removing the need for vuex-connect?

[nicksellen]

Sounds a bit painful! But I guess the pain is needed to get through.

I'd be fine with the vuex-connect removed. Perhaps one solution to migrate away without too many files to change is to rewrite the connecting files as vue components that manually map the events/props?

[tiltec]

vue-croppa seems unsupported: zhanziyang/vue-croppa#235

I'm also a bit confused how to use the vue migration build. I can set it to run in Vue2 mode by default, and then switch to Vue3 mode on a per-component basis when we are done upgrading. But how about dependencies? Each of them would need to set all their components to Vue3 mode, with weird errors happening otherwise. Here's an example from vue-leaflet, the successor of vue2-leaflet.

[nicksellen]

How does nesting working? E.g. if you made a component with a local config to use vue3 compat mode, do nested components also use vue3? Could be a way? (Either one that sets vue3 mode and renders the child elements, or a small component that directly includes the library one). Maybe doesn't work, but an idea!

[tiltec]

I think compat config isn't inherited when nesting components; maybe all vue3-aware dependencies really need to declare vue3 compat mode to make app-wide vue2 mode work.

[tiltec]

I found a way to use Croppa with the vue migration build :)

https://github.com/yunity/karrot-frontend/blob/72d3aef955ec01ab0c44c707260a19e2dbac7882/src/authuser/components/Settings/ChangePhoto.vue#L88-L90

[github-actions]

This issue is marked as stale because it has not had any activity for 90 days.

It doesn't mean it's not important, so please remove the stale label if you like it, or add a comment saying what it means to you :)

However, if you just leave it like this, I'll close it in 7 days to help keep your issues tidy!

Thanks!