Vue 3

[mzur]

Tasks:

• Install Vue 3 compat
• Set up Vite build
• Update uiv
• Test Vite hot reload
• Fix navbar dropdowns
• Find Vue Compat warnings and fix them
  • Use fake privacy page for default layout/code
  • Disable compat features to find source of warnings
  • Walk through all views and look for warnings
• Update slots to <template #slot> syntax
• Update use of v-model to new default modelValue variable name
• Define component events with emits: ['evt', ...]
• Make image annotation tool work
• Make video annotation tool work
  • Check annotation model if any properties must be reactive
  • Implement annotation session filter. Resolves Annotation session filter in the video annotation tool #281
• Replace use of $on, $once and $off.
• Replace use of inline-template.
• Update :disabled and v-bind:disabled attributes that expect the attribute to be removed if false. Use null instead.
• Rename beforeDestroy to beforeUnmount.
• Fix these locations:
  • Error Property "scollable" was accessed during render but is not defined on instance. on project overview.
  • The image/video annotation tab filter system. It uses Vue.extend, $mount(), $on() and $off(). Fix this once the image/video annotation tools are functional again with the compatibility build. Finally disable GLOBAL_EXTEND.
• Remove/replace Vue Resource. Afterwards, disable GLOBAL_PROTOTYPE. Maybe use a fetch wrapper.
  • We keep vue-resource for now, as it also can be used directly (not as Vue plugin).
• Replace Vue.Promise with native Promise
• Walk through all JS files and test their features in the UI. View routes:
  • /
  • admin
  • admin/announcements
  • admin/announcements/new
  • admin/export
  • admin/federated-search
  • admin/import
  • admin/import/{token}
  • admin/label-trees
  • admin/logs
  • admin/logs/{file}
  • admin/users
  • admin/users/delete/{id}
  • admin/users/edit/{id}
  • admin/users/new
  • admin/users/{id}
  • image-annotations/{id}
  • images/{id}
  • images/{id}/annotations
  • imprint
  • label-trees
  • label-trees/create
  • label-trees/import
  • label-trees/{id}
  • label-trees/{id}/members
  • label-trees/{id}/merge
  • label-trees/{id}/merge/{id2}
  • label-trees/{id}/projects
  • label-trees/{id}/versions/create
  • label-trees/{id}/versions/{id2}
  • manual
  • manual/documentation/{module}/{article?}
  • manual/tutorials/{module}/{article?}
  • notifications
  • pending-volumes/{id}
  • pending-volumes/{id}/annotation-labels
  • pending-volumes/{id}/file-labels
  • pending-volumes/{id}/finish
  • pending-volumes/{id}/label-map
  • pending-volumes/{id}/user-map
  • privacy
  • project-invitations/{uuid}
  • projects
  • projects/create
  • projects/{id}
  • projects/{id}/charts
  • projects/{id}/label-trees
  • projects/{id}/members
  • projects/{id}/reports
  • search
  • settings
  • settings/account
  • settings/authentication
  • settings/notifications
  • settings/profile
  • settings/tokens
  • terms
  • video-annotations/{id}
  • videos/{id}
  • videos/{id}/annotations
  • volumes/clone/{id}
  • volumes/create
  • volumes/edit/{id}
  • volumes/{id}
  • volumes/{id}/reports
• Update Docker build process (if necessary)
• Maybe remove cachebust_asset()
• Update modules:
  • Migrate from Mix to Vite
  • Change <script type="text/javascript"> to <script type="module"> for inline scripts
  • Update use of Vue Resource
  • Update <control-button> component to use scoped slot event instead of $on listener (689106d).
• TEST EVERYTHING with compat MODE: 3
  • Change <script type="text/javascript"> to <script type="module"> for inline scripts that were added in the meantime
  • Check all view routes again.
  • Check if date picker components behave correctly
  • Check if echarts charts work correctly
• Remove Vue Compat, including all uses of compatConfig
• Test Vue2 vs Vue3 performance on huge video/image with lots of annotations
• Invite everyone to test the UI and find errors
• Check if NPM run prod silently fails when using Node 23 #984 is resolved
• Follow up with Improve annotation performance #249 (unify image and video annotation tools with composition API)

Resolves #455
Resolves #515