Epic: Vue 3

[dschmidt]

PR available for compat mode:

• https://github.com/owncloud/web/pull/8128

Dependencies

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

• [x] vue-portal:
  • https://github.com/LinusBorg/portal-vue/issues/300 beta version available, final will be released as is
  • maybe we can use native <teleport> instead
• [x] vue-gettext (https://github.com/owncloud/web/pull/8257):
  • does not support Vue 3
  • possible alternative: https://github.com/jshmrtn/vue3-gettext
• [x] vuex-mock-store
  • [x] unclear, but seems only used in two places, can/should be removed removed
• [x] @vue/test-utils@1
  • [x] @vue/test-utils@2: https://test-utils.vuejs.org/migration/
• [x] v-calendar
  • [x] currently in alpha state: https://vcalendar.io/vue-3.html
  • [x] "stable", but breaking changes are still possible
• [x] vue-async-computed:
  • does not support Vue 3
  • [x] possible alternatives: vue-concurrency or https://vueuse.org/core/computedAsync/
  • only used in FileDetails.vue
• [x] vue-events:
  • not used anymore
• [x] vue-inline-svg:
  • https://www.npmjs.com/package/vue-inline-svg#vue-v3
  • (used in ods)
• [x] vue-meta:
  • look for metaInfo()
  • possible alternative in VueUse: https://github.com/nuxt/vue-meta/issues/782
• [x] vue-resize
  • not used anymore?
• [x] vue-router:
  • https://router.vuejs.org/guide/migration/index.html
• [x] vue-scrollto:
  • not used anymore
• [x] vue-select:
  • beta version available: https://github.com/sagalbot/vue-select/issues/1597
• [x] 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 https://github.com/vuejs/rfcs/pull/271. You could simply consider Pinia as Vuex 5 with a different name. Pinia also works with Vue 2.x as well."
  • [x] vuex-extensions: https://github.com/huybuidac/vuex-extensions/tree/vuex4
  • [x] vuex-router-sync (https://github.com/owncloud/web/pull/8256):
  • dead, but is just one 100 line file. Can be forked or just be rewritten for whatever solution we choose
• [x] sentry integration
• [ ] vue-style-loader -> https://github.com/owncloud/web/issues/8302
  • used in ODS build script
  • no idea if specific vue 3 support is needed
• [ ] vue-styleguidist: -> https://github.com/owncloud/web/issues/8302
  • used in ODS documentation
  • seems to support Vue 3 in current releases

Other TODOs:

• [x] Vue Initilization: do not use new Vue but createApp
• [x] Get rid of Vue.extend and .$mount for OcGhostElement -> https://github.com/owncloud/web/pull/8258
• [x] Get rid of Vue.prototype usages
• [x] Get rid of events api usage: https://v3-migration.vuejs.org/breaking-changes/events-api.html
• [ ] When all deps are updated, remove https://github.com/owncloud/web/blob/a86263dfee57e00564cad9b5bc2e7087581ddcfa/packages/web-test-helpers/src/helpers.ts#L6 and fix all warnings in unit tests
• [u] Get rid of Panel.componentListeners?

[JammingBen]

Also see the info in the existing issues:

• https://github.com/owncloud/web/issues/5269
• https://github.com/owncloud/web/issues/5268

[pascalwengerter]

Shameless plug from my side also: https://github.com/palavatv/palava-web/pull/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)
• https://github.com/owncloud/owncloud-design-system/compare/master...migrate-to-vue-3
• https://github.com/owncloud/web/pull/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 🥳