Epic: Vue 3

[dschmidt]

PR available for compat mode:

• [full-ci] @vue/compat #8128

Dependencies

Let's collect information on the state of Vue 3 compatibility of our dependencies and on available migration guides:

• vue-portal:
  • Provide version that's Vue 3 compatible LinusBorg/portal-vue#300 beta version available, final will be released as is
  • maybe we can use native <teleport> instead
• vue-gettext ([full-ci] Vue 3: Use vue3-gettext #8257):
  • does not support Vue 3
  • possible alternative: https://github.com/jshmrtn/vue3-gettext
• vuex-mock-store
  • unclear, but seems only used in two places, can/should be removed removed
• @vue/test-utils@1
  • @vue/test-utils@2: https://test-utils.vuejs.org/migration/
• v-calendar
  • currently in alpha state: https://vcalendar.io/vue-3.html
  • "stable", but breaking changes are still possible
• vue-async-computed:
  • does not support Vue 3
  • possible alternatives: vue-concurrency or https://vueuse.org/core/computedAsync/
  • only used in FileDetails.vue
• vue-events:
  • not used anymore
• vue-inline-svg:
  • https://www.npmjs.com/package/vue-inline-svg#vue-v3
  • (used in ods)
• vue-meta:
  • look for metaInfo()
  • possible alternative in VueUse: vue-meta or @vueuse/head nuxt/vue-meta#782
• vue-resize
  • not used anymore?
• vue-router:
  • https://router.vuejs.org/guide/migration/index.html
• vue-scrollto:
  • not used anymore
• vue-select:
  • beta version available: Vue 3 / Component Roadmap sagalbot/vue-select#1597
• vuex:
  • https://vuex.vuejs.org/guide/migrating-to-4-0-from-3-x.html
  • alternative would be pinia: "Pinia is now the new default
    The official state management library for Vue has changed to Pinia. Pinia has almost the exact same or enhanced API as Vuex 5, described in [Vuex] Vuex 5 vuejs/rfcs#271. You could simply consider Pinia as Vuex 5 with a different name. Pinia also works with Vue 2.x as well."
  • vuex-extensions: https://github.com/huybuidac/vuex-extensions/tree/vuex4
• vuex-router-sync ([full-ci] Vue 3: Remove vuex-router-sync #8256):
  • dead, but is just one 100 line file. Can be forked or just be rewritten for whatever solution we choose
• sentry integration
• vue-style-loader -> [Vue 3 follow-up] Get ODS docs running again #8302
  • used in ODS build script
  • no idea if specific vue 3 support is needed
• vue-styleguidist: -> [Vue 3 follow-up] Get ODS docs running again #8302
  • used in ODS documentation
  • seems to support Vue 3 in current releases

Other TODOs:

• Vue Initilization: do not use new Vue but createApp
• Get rid of Vue.extend and .$mount for OcGhostElement -> Vue 3: Use Teleport for the drag ghost item #8258
• Get rid of Vue.prototype usages
• Get rid of events api usage: https://v3-migration.vuejs.org/breaking-changes/events-api.html
• When all deps are updated, remove

  web/packages/web-test-helpers/src/helpers.ts

  Line 6 in a86263d

  jest.spyOn(console, 'warn').mockImplementation(() => undefined)

  and fix all warnings in unit tests
• [u] Get rid of Panel.componentListeners?

[JammingBen]

Also see the info in the existing issues:

• Migrate to Vue 3 #5269
• research: try out VUE3 compat release #5268

[pascalwengerter]

Shameless plug from my side also: palavatv/palava-web#103 (includes the update of vue-meta and vue-inline-svg, both of which I've introduced at ownCloud, to V3). vue-meta is actually still being used and was introduced in the a11y-marathon, search for metaInfo() to see it being applied

[dschmidt]

See also

• https://github.com/owncloud/web/tree/migrate-to-vue3 (existed at some point, but was deleted)
• owncloud/owncloud-design-system@master...migrate-to-vue-3
• [draft] Try Vue3 compat mode #5368

[pascalwengerter]

@dschmidt do you want to turn the issue description into a checklist for better update-a-bility? :) e.g. vuex-mock-store seems to be removed already, by one of your test-update-PRs most likely?

Also, some of the problematic dependencies can potentially be replaced by something the newly introduced https://vueuse.org/ brings along? 😎

[dschmidt]

Done

[JammingBen]

Web is finally running Vue 3 🥳