Vue 3 Migration

[ShGKme]

How to use GitHub

• Please use the 👍 reaction to show that you are interested into the same feature.
• Please don't comment if you have no relevant information to add. It's just extra noise for everyone subscribed to this issue.
• Subscribe to receive notifications on status change and new comments.

---

⚰️ Vue 2 End-Of-Life - 2024

Vue 2 will reach End of Life (EOL) on December 31st, 2023: https://v2.vuejs.org/lts/

See also: https://v3-migration.vuejs.org/

Dependency compatibilities

Nextcloud Dependencies:

• @nextcloud/vue: Migrate to Vue 3 nextcloud-libraries/nextcloud-vue#2154
• nextcloud-vue-collections: https://github.com/nextcloud-libraries/nextcloud-vue-collections/tree/vue3
• @nextcloud/dialogs: feat(vue3): migrate to vue3 nextcloud-libraries/nextcloud-dialogs#884
• @nextcloud/upload: Migrate to Vue 3 nextcloud-libraries/nextcloud-upload#1197

Other dependencies:

• vue@2 -> vue@3
• vue-router@3 -> vue-router@4
• vuex@3 -> vuex@4
• vuex@4
• vue-cropperjs@4 -> vue-cropperjs@5
• vue-draggable-resizable@2 -> vue-draggable-resizable@3
• vue-observe-visibility@1 -> vue-observe-visibility@2
• vue-outside-events - migrate to vueuse feat(vue3): replace vue-outside-events with vueuse #12346
• vue-prevent-unload - get rid of or migrate to vueuse if any fix(prevent-unload): replace PreventUnload with native browser functionality #12349
• vue-shortkey - check vue3-shortkey
• vue-virtual-scroller@1 -> vue-virtual-scroller@2
• vue2-leaflet -> @vue-leaflet/vue-leaflet

📄 Preparations

Details are to be added to the separated issues.

• Migrate all deprecated in 2.7 things
  • Remove deprecated slot syntax in Vue components #9449
  • Use deep selector #9410
• Prepare for the migration (with ESLint warnings whenever possible // todo: create an issue)
  • Always use $scopedSlots instead of $slots
  • Do not use Vue component instance as event emitter (EventBus), use mitt instead or remove the event bus Chore(Vue3): Migrate to mitt #11996
  • Check v-bind merge Behavior chore(Vue3): v-bind checking #12005
  • Always use reactive for external object that made reactive by putting in components data #9450 chore: define explicit reactivity for webrtc models #11993\
• Get rid of global directive registration fix(directive): unify tooltip registration #12358
• Unify RoomSelector mounting refactor(plugins): add reusable requestRoomSelection util to run room selector #12356

🚋 Do the migration

• Create vue3 branch
• Switch to Vue 3 with minimal running instance:
  • Fix bundling Prepare vue3 branch #12352
  • Make the minimal required migration to get app running (bundled successfully), e.g. Vue app init
  • Comment all "optional" failing features, e.g. not migrated libraries
  • Merge to vue3
• Fix all the issues with migration separately uncommenting all the disabled features
  • Fix @nextcloud/vue@9 breaking changes #12359
  • Fix all breaking changes in Vue 3 #12366
  • Return @nextcloud/uploads
  • Return @nextcloud/dialogs
  • Return @nextcloud/collections
  • Check Leaflet
• Migrate all tests to VTU v2 and fix tests #12363
• Fix ESLint using chore: Prepare 8.4.0 nextcloud-libraries/eslint-config#768
• Add ESLint rules for changed stuff
  • eslintconfig should be aware of vue3 syntax

Things that are not required for the migration, but would be nice

• Better compatibility with SFC Setup and using new useful features
  • Techdebt: add ESLint rules to prepare for Vue 3 migration #9457
    • Define all Vue component events in emits
    • Define all public component methods in expose
• Slowly start to follow new Vue recommendations
  • Do not create new mixins. Create composables instead.
  • Do not create new Vuex modules. Create Pinia stores instead.
• Migrate to Vite (see also Decrease the bundle size and the build time #9406)