Refactor to Vue 3 & Composition API

[maartenvn]

As Vue 2 is no longer actively maintained, besides security support until 23 september 2023, a refactor to Vue 3 must be made. Vue 3 also significantly improves performance and bundle size and offers much better DX with TypeScript.

Following refactors must be made:

• Switch from vue-class-component and vue-property-decorator to the new Vue Composition API.
  • Class component is no longer the recommended and will no longer receive support from the Vue organisation.
• Switch from vuex to pinia
  • Vuex is no longer the recommended store/state managment library in Vue and is in maintenance mode. (source)
• Switch from Vue CLI to Vite.
  • Vite is the new default toolset for Vue 3 and offers the best performance and buildtime.
  • Vue CLI is in maintenance mode.
• Update from Vue 2 to Vue 3
• Update from Vuetify 2 to Vuetify 3
  • This can only be done once Vuetify 3 is officially released. Currently the beta is active and the RC is coming soon

I recommend we tackle this in 2 "phases":

• Phase 1: refactor but stay on Vue 2.

  • [x] Refactor to the Compositation API using @vuejs/compositation-api which implements a forward compatible version of the Composition API for Vue 2.
  • [x] Refactor to Pinia, which supports Vue 2.
  • ~Switch to Vite, which has a plugin for Vue 2 support.~ (https://github.com/dodona-edu/dolos/issues/754#issuecomment-1168654759)

• Phase 2: refactor to Vue 3

  • [ ] Refactor from Vue 2 to Vue 3
  • [ ] Refactor from Vuetify 2 to Vuetify 3
  • [ ] Switch to Vite

Phase 1 will take the most development time as it requires a full rewrite/restructure of every component. Once Vuetify 3 is released, phase 2 will not be very time consuming.

[maartenvn]

The first refactor within Phase 1 will be switching to the compositation API.

I was unable to switch to Vite before switching from class-component as specific features are incompatible.

Within Phase 1 the order will be:

1. Refactor to the Composition API & Pinia (using Vuex with the Composition API is very difficult and not worth the hastle of working in multiple steps)
2. Refactor to Vite

[maartenvn]

With the upcoming release of Vue 2.7 we will take the step to 2.7 first, before upgrading to 3.0, as it backports most features from 3.0.

As of right now, we cannot upgrade to 2.7 because vuetify-loader doesn't support it yet (https://github.com/vuetifyjs/vuetify-loader/issues/240)

[maartenvn]

The refactor to Vite will be moved to Phase 2 because dev server performance is terrible with Vuetify 2. A dedicated Vite plugin for Vuetify 3 is available in alpha and should solve this issue, once we migrate to Vue 3.