Investigate Vue 3

[felixgabler]

Once we migrate, we could build new things with the help of https://vueuse.org/

[joeldomke]

I went through all dependencies that have "vue" in their name:

• vue-switches: :x:
  • Requires small changes, but PR is open for 3 months now
  • PR
• vue-cookie-law: :warning:
  • Does not support Vue 3, but can be swapped out with vue-cookie-accept-decline
  • Issue
• bootstrap-vue: :warning:
  • BootstrapVue supports Vue 3 via @vue/compat
  • Also there exists https://github.com/cdmoro/bootstrap-vue-3 that could be used as a drop in replacement until they unify
  • Issue
• vue-notification: :warning:
  • Does not seem to support Vue 3
  • Issue
  • Update (28.07.22): can be replaced by new fork vue3-notification
• vue-multiselect: :warning:
  • Does not support Vue 3, but can simply swapped out with the new version vue3-multiselect
  • Issue
• vue-simple-spinner: :warning:
  • No issues in the corresponding git repo, easy to replace if incompatible
• vue-native-websocket: :warning:
  • Does not seem to support Vue 3.
  • Issue
  • Update 28.07.22: Can be replaced by vue-native-websocket-vue3 or potentially by vueuse's useWebsocket. Check Pinia store compatibility.
• highcharts-vue: ✅
  • PR for Vue 3 is open, and it looks like it will be merged soon
  • Update 28.07.22: It now supports Vue 3 out of the box
• vue-clipboard2: ✅
  • Does not support Vue 3
  • Issue
  • The Vue 3 Port might solve this problem
  • Update (28.07.22): Replaced with vueuse's useClipboard

[felixgabler]

It seems like we need to wait until big dependencies like bootstrap-vue migrate. Given that we are not under time pressure, this is not a huge problem.

Notes: The PlotTab component (and thereby vue-highcharts) is used in the job results for many tools. Also, the websocket library is used within the store (see the mutations with the prefix "SOCKET_")

[joeldomke]

• highcharts-vue: :x:
  • PR for vue 3 is open, and it looks like it will be merged soon
• vue-native-websocket: :x:
  • Does not seem to support Vue 3.
  • Issue

[kyvg]

https://github.com/euvl/vue-notification/issues/198#issuecomment-820348076

[felixgabler]

Some helpful links:

• https://www.vuemastery.com/blog/vue-3-migration-build/
• https://www.vuemastery.com/blog/migration/

When updating, also make sure to replace Vuex with Pinia as it is now the default store for Vue (https://pinia.vuejs.org/cookbook/migration-vuex.html#converting-a-single-module). This should also be considered when choosing the replacement for the websocket library. It might not be able to hook into the store as it did before.

[felixgabler]

Because Bootstrap-Vue does not support Vue3 fully yet, we need to stay in compat mode: https://bootstrap-vue.org/vue3

As such, follow this procedure but keep MODE: 2 https://v3-migration.vuejs.org/migration-build.html#upgrade-workflow

Update steps needed:

• [x] Install latest Vue version
• [x] Create local app instance and register plugins here
• [x] Replace global API usages (https://v3-migration.vuejs.org/breaking-changes/global-api.html#a-note-for-plugin-authors)
• [x] Update vue-router
• [x] Update vue-i18n
• [x] Go through dependencies above and use latest versions
• [x] Use vueuse's websocket solution to remove dependency of global vue prototype
• [x] Check whether our own plugins need to be updated
• [x] Remove usages of Vue.extend (by removing mixin approach)
• [x] Go through breaking changes from https://v3-migration.vuejs.org/breaking-changes/v-model.html on
• [x] Investigate whether Vue.set and Vue.delete are still needed
• [x] Upgrade tests library and use local app instance

Things to test:

• [ ] 404 routes catching
• [ ] Transitions: Routes, transition group, text area subcomponent
• [ ] Tour
• [ ] Browser notifications
• [ ] Title manager
• [ ] Cookie law (also reapply theme)
• [ ] Modals
• [ ] Remember parameters
• [x] Tool refresh (ToolView getCurrentInstance)
• [ ] Image minimized
• [ ] Authentication & logged in/out through other tab
• [ ] Tree & MSAStage resize on fullscreen & window resize
• [ ] Forward to modeller
• [ ] File downloads (also check file names)
• [ ] Scroll to sections & alignments & handy scroll bar