VueJS v3 migration

[m-mohr]

At some point we need to migrate to VueJS v3. We need to determine what is required for this and which dependencies are v3 compliant.

The following dependencies depend on VueJS:

• [x] bootstrap-vue (WIP => https://bootstrap-vue.org/vue3)
• [x] v-clipboard (see https://github.com/euvl/v-clipboard/issues/17 => migrate to vue3-clipboard? )
• [x] vue-i18n (v9+)
• [x] vue-multiselect (WIP => https://github.com/shentao/vue-multiselect/tree/next)
• [x] vue-read-more-smooth (unmaintained, should be simple to migrate)
• [x] vue-router (v4+)
• [x] vue2-datepicker (=> vue-datepicker-next)
• [x] vue2-leaflet (may be obsolete by migrating to OL)
• [x] vue2-leaflet-fullscreen (may be obsolete by migrating to OL)
• [x] vuex (v4+)
• [x] vue-cli + plugins (babel, eslint, router, vuex, i18n)
• [x] vue-template-compiler (seems obsolete for v3)

[richardbischof]

Hi, we are interested in this issue and may think of how we can support work on it. What's the status of this issue, has anybody started working? Maybe you guys did some initial estimation of the workload or have more information, regarding any blockers because of dependency issues. :)

[m-mohr]

I'm happy to hear that you might be able to help. Happy to discuss this further.

Work has not started yet and is currently not planned from my side due to the lack of funding (and I also don't have a need for Vue3 myself right now). I didn't do any related work yet except for checking the dependencies in March. It did not look like there are major blockers assuming we'd have migrating to OpenLayers until then (which is planned for 3.2). I have no workload estimate due to lack of planning and experience with VueJS3 yet.

[m-mohr]

Tasklist:

• [x] Upgrade to Vue 3.5.21 with compatibility packages
• [x] Configure Vue 3 compatibility mode and build setup
• [x] Migrate Vue Router 4 and Vuex 4 to Vue 3 APIs
• [x] Migrate vue-i18n to v9 with legacy mode for compatibility
• [x] Update core application components for Vue 3 compatibility (StacBrowser.vue & StacHeader.vue)
• [x] Add TeleportPopover component using Vue 3 Teleport
• [x] Migrate Bootstrap Vue popovers to TeleportPopover
• [x] Convert Vue 2 filters to Vue 3 methods
• [x] Update vue-multiselect to v3.3.1 for Vue 3 compatibility
• [x] Responsiveness of the popover items (e.g. add some space to the side of the window)
• [x] Overall primary color on links.
• [x] Fix lint issues (especially naming of components)
• [x] Migrate from Bootstrap Vue 2 to Bootstrap Vue 3
• [x] Remove @vue/compat dependency
• [x] Replace vue2-datepicker with native Vue 3 datepicker
• [x] npm run i18n:report is failing, package is deprecated. => #712
• [x] Migrate vue-cli to vite => #711

[m-mohr]

Some general checks that we need to do based on the migration guides:

Vue:

• [x] Check whether the linter correctly works with v3 (see e.g. the key changes)
• [x] https://v3-migration.vuejs.org/breaking-changes/v-bind
• [x] https://v3-migration.vuejs.org/breaking-changes/key-attribute.html
• [x] https://v3-migration.vuejs.org/breaking-changes/async-components.html
• [x] https://v3-migration.vuejs.org/breaking-changes/emits-option.html
• [x] https://v3-migration.vuejs.org/breaking-changes/watch
• [x] https://v3-migration.vuejs.org/breaking-changes/mount-changes

There are recommended changes in tooling libraries, which we should discuss and potentially do in a separate PR:

• Vue CLI -> Vite
• Vuex -> Pinia

[saidy-moregeo]

• [x] Resolve sidebar auto-close on item selection.
• [x] Fixed search filter spacing issues with the styling.
• [x] Resolve spacing issue on the Asset accordion.
• [x] Check how to replace the offset parameter in b-card-img with lazy being set
• [x] Resolve issue with base map not showing up for API Catalogs. @m-mohr Traced it down to the layer.isVisible() call in MapUtils.isLayerVisible() but I have no clue yet why this happens. It seems to be happening because the layers are reactive due to how Vue handles it, but that leads to an error. It may help to make stacLayer and all ol stuff unreactive.
• [x] http://localhost:8080/external/planetarycomputer.microsoft.com/api/stac/v1/collections/3dep-lidar-dsm/items/UT_StatewideSouth_2_2020-dsm-2m-0-1 errors on the histogram
• [x] Investigate package bundle sizes.
• [x] Check the warnings in the web dev console @saidy-moregeo

[m-mohr]

Datepicker related (for later):

• [ ] Check all datepicker locales whether the new imports and the overrides still make sense. See also https://github.com/radiantearth/stac-browser/pull/663#discussion_r2410161042 and https://github.com/radiantearth/stac-browser/pull/663#discussion_r2410016207 and https://github.com/radiantearth/stac-browser/pull/663#discussion_r2410022000
• [x] Datepicker: Check that dates only and date+time is supported in the queryables
• [x] Resolved date picker color theme issues (the variables in the CSS are unused)
• [ ] Locale imports from date-fns don't work for at least deCH and en, we may need to define them manually.
• [x] Check Authentication methods (API Key, Basic, OIDC)
• [x] Check https://github.com/radiantearth/stac-browser/commit/68124c5c88e560eb84f044cbe256ee06524d4e26#r170192773

[m-mohr]

• [x] If you reload http://localhost:8080/search/external/planetarycomputer.microsoft.com/api/stac/v1/, it redirect you to the data source selection instead of search. @saidy-moregeo

Vue Router: @m-mohr

• [x] Check workaround and (reactive) usage of this.$route etc: https://router.vuejs.org/guide/migration/#The-currentRoute-property-is-now-a-ref- @m-mohr
• [x] We have one use of router.resolve, which we need to check: https://router.vuejs.org/guide/migration/#Removal-of-router-match-and-changes-to-router-resolve @m-mohr
• [x] We have a usage of fullPath (and potentially some path), check https://router.vuejs.org/guide/migration/#-route-properties-Encoding @m-mohr