Investigate Vue 3 about toolkit

[joeldomke]

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

• vue-switches: ❌
  • Requires small changes, but PR is open for 3 months now
  • PR
• vue-cookie-law: ⚠️
  • Does not support Vue 3, but can be swapped out with vue-cookie-accept-decline
  • Issue
• bootstrap-vue: ⚠️
  • 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: ⚠️
  • Does not seem to support Vue 3
  • Issue
  • Update (28.07.22): can be replaced by new fork vue3-notification
• vue-multiselect: ⚠️
  • Does not support Vue 3, but can simply swapped out with the new version vue3-multiselect
  • Issue
• vue-simple-spinner: ⚠️
  • No issues in the corresponding git repo, easy to replace if incompatible
• vue-native-websocket: ⚠️
  • 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: ❌
  • PR for vue 3 is open, and it looks like it will be merged soon
• vue-native-websocket: ❌
  • Does not seem to support Vue 3.
  • Issue

[kyvg]

euvl/vue-notification#198 (comment)

[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:

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