owntone-server/web-src/MIGRATION_VUE3.md

Vue 3 + Vite Migration

• Vue Dev Tools required in version 6 (currently only released as beta versions): https://devtools.vuejs.org/guide/installation.html#beta

• vite does not support env vars in vite.config.js from .env files

  • https://stackoverflow.com/questions/66389043/how-can-i-use-vite-env-variables-in-vite-config-js
  • https://github.com/vitejs/vite/issues/1930

• Documentation update

• Add linting (ESLint) ?

• Update dialog is missing scan options

• Performance with huge artists/albums/tracks list (no functional template supported any more)

  • Do not reload data, if using the index-nav
    • PageAlbums
    • PageArtists
    • ...
  • Albums page is slow to load (because of the number of vue components?)
    • Evaluate virtual scroller https://github.com/Akryum/vue-virtual-scroller/tree/next/packages/vue-virtual-scroller

• JS error on Podacst page

  • Problem caused by the Slider component
  • Replace with plain html

• vue-router scroll-behavior

  • Index list not always hidden
  • Check transitions
  • Page display is "jumpy"
    • Workaround is removing the page transition effect

• Index navigation "scroll up/down" button does not scroll down, if index is visible

  • Use native intersection observer solves it in desktop mode
  • Mobile view still broken

• Update to latest dependency versions (vite, vue, etc.)

• Index navigation is broken (jump to "A")

  • Change in $router.push syntax, hash has to be passed as a separate parameter instead of as part of the path

• vue-range-slider is not compatible with vue3

  • replacement option: https://github.com/vueform/slider
  • @vueform/slider for volume control
  • track progress (now playing)
  • track progress (podcasts)

• vue-router does not support navigation guards in mixins: https://github.com/vuejs/vue-router-next/issues/454

  • replace mixin with composition api? https://next.router.vuejs.org/guide/advanced/composition-api.html#navigation-guards
  • Copied nav guards into each component

• vue-router link does not support tag and active-class properties: https://next.router.vuejs.org/guide/migration/index.html#removal-of-event-and-tag-props-in-router-link

• vue-tiny-lazyload-img does not support Vue 3

  • No sign of interesst to add support https://github.com/mazipan/vue-tiny-lazyload-img
  • v-lazy-image (https://github.com/alexjoverm/v-lazy-image) seems to be supported and popular
    • Works as a component instead of a directive
    • DOES NOT have a good error handling, if the (remote) image does not exist
  • vue3-lazyload (https://github.com/murongg/vue3-lazyload)
    • Works as a directive
    • Easy replacement for vue-tiny-lazyload-img

• Top margin in pages is wrong (related to vue-router scroll behavior changes)

  • Solved by adding the correct margin to take the top navbar (and where shown the tabs) into account

• Mobile view seems to be broken

  • Looks like the cause of this was the broken router-link in bulma tabs component

• Changing sort option (artist albums view) does not work

• Replace unmaintained vue-infinite-loading dependency

  • Replace with @ts-pro/vue-eternal-loading: https://github.com/ts-pro/vue-eternal-loading

• Replace bulma-switch with @vueform/toggle?

  • Update of bulma-switch (or vite) fixed the import of the sass file, no need to replace it now