From 559a13069a32dd81a41aa4feed4fcba25f39df62 Mon Sep 17 00:00:00 2001
From: Dominik Schmidt <dev@dominik-schmidt.de>
Date: Wed, 11 Jan 2023 23:48:48 +0100
Subject: [PATCH] wip

---
 .../design-system/src/directives/OcTooltip.ts | 59 ++++++-------
 packages/web-app-files/package.json           |  2 +-
 packages/web-app-files/src/fileSideBars.ts    |  3 +-
 .../web-app-files/src/router/deprecated.ts    |  5 +-
 packages/web-app-files/src/router/utils.ts    |  9 +-
 .../web-app-files/src/search/sdk/index.ts     |  6 +-
 .../web-app-files/src/search/sdk/preview.ts   |  6 +-
 .../tests/unit/components/Search/List.spec.ts |  2 -
 .../tests/unit/router/utils.spec.ts           | 31 +++----
 .../tests/unit/search/sdk.spec.ts             | 12 +--
 packages/web-pkg/package.json                 |  2 +-
 .../appDefaults/useAppNavigation.ts           |  5 +-
 .../src/composables/router/useActiveApp.ts    |  3 +-
 .../src/composables/router/useRouteMeta.ts    |  4 +-
 .../src/composables/router/useRouteParam.ts   |  9 +-
 .../src/composables/router/useRouteQuery.ts   |  8 +-
 .../src/composables/router/useRouter.ts       |  4 +-
 packages/web-pkg/src/index.ts                 |  1 +
 packages/web-pkg/src/types/index.ts           |  1 +
 packages/web-pkg/src/types/router.ts          |  3 +
 .../unit/composables/router/useRouter.spec.ts |  4 +-
 packages/web-runtime/package.json             |  2 +-
 packages/web-runtime/src/App.vue              | 24 +++---
 .../src/components/Topbar/TopBar.vue          |  2 +-
 packages/web-runtime/src/container/api.ts     | 11 +--
 .../src/container/application/classic.ts      |  4 +-
 .../src/container/application/index.ts        |  4 +-
 .../web-runtime/src/container/bootstrap.ts    |  8 +-
 packages/web-runtime/src/container/types.ts   |  5 +-
 packages/web-runtime/src/defaults/vue.js      |  2 -
 packages/web-runtime/src/index.ts             |  6 +-
 .../web-runtime/src/layouts/Application.vue   |  4 +-
 .../web-runtime/src/pages/oidcCallback.vue    |  5 +-
 packages/web-runtime/src/router/helpers.ts    | 19 +++--
 packages/web-runtime/src/router/index.ts      | 11 +--
 .../web-runtime/src/router/patchCleanPath.ts  | 36 ++++----
 .../src/services/auth/authService.ts          | 10 ++-
 packages/web-test-helpers/package.json        |  2 +-
 pnpm-lock.yaml                                | 85 ++++++-------------
 39 files changed, 198 insertions(+), 221 deletions(-)
 create mode 100644 packages/web-pkg/src/types/index.ts
 create mode 100644 packages/web-pkg/src/types/router.ts

diff --git a/packages/design-system/src/directives/OcTooltip.ts b/packages/design-system/src/directives/OcTooltip.ts
index ddce940f63a..3b7cf58fcc9 100644
--- a/packages/design-system/src/directives/OcTooltip.ts
+++ b/packages/design-system/src/directives/OcTooltip.ts
@@ -1,5 +1,3 @@
-import tippy from 'tippy.js'
-import merge from 'deepmerge'
 import __logger from '../utils/logger'
 
 export const hideOnEsc = {
@@ -48,36 +46,33 @@ export const destroy = (_tippy) => {
 }
 
 const initOrUpdate = (el, { value = {} }: any, { elm }) => {
-  if (Object.prototype.toString.call(value) !== '[object Object]') {
-    value = { content: value }
-  }
-
-  if (value.content !== 0 && !value.content) {
-    destroy(elm.tooltip)
-    elm.tooltip = null
-    return
-  }
-
-  const props = merge.all([
-    {
-      ignoreAttributes: true,
-      aria: {
-        content: null,
-        expanded: false
-      }
-    },
-    value
-  ])
-
-  if (!elm.tooltip) {
-    elm.tooltip = tippy(el, {
-      ...props,
-      plugins: [hideOnEsc, ariaHidden]
-    })
-    return
-  }
-
-  elm.tooltip.setProps(props)
+  // if (Object.prototype.toString.call(value) !== '[object Object]') {
+  //   value = { content: value }
+  // }
+  // if (value.content !== 0 && !value.content) {
+  //   console.log('elm', elm, value)
+  //   destroy(elm.tooltip)
+  //   elm.tooltip = null
+  //   return
+  // }
+  // const props = merge.all([
+  //   {
+  //     ignoreAttributes: true,
+  //     aria: {
+  //       content: null,
+  //       expanded: false
+  //     }
+  //   },
+  //   value
+  // ])
+  // if (!elm?.tooltip) {
+  //   elm.tooltip = tippy(el, {
+  //     ...props,
+  //     plugins: [hideOnEsc, ariaHidden]
+  //   })
+  //   return
+  // }
+  // elm.tooltip.setProps(props)
 }
 
 export default {
diff --git a/packages/web-app-files/package.json b/packages/web-app-files/package.json
index 01a16e7fb45..e011a543e20 100644
--- a/packages/web-app-files/package.json
+++ b/packages/web-app-files/package.json
@@ -26,7 +26,7 @@
     "uuid": "^9.0.0",
     "vue-concurrency": "4.0.0",
     "vue-gettext": "2.1.12",
-    "vue-router": "3.6.5",
+    "vue-router": "4.1.6",
     "vuex": "4.1.0",
     "web-app-files": "workspace:*",
     "web-app-search": "workspace:*",
diff --git a/packages/web-app-files/src/fileSideBars.ts b/packages/web-app-files/src/fileSideBars.ts
index 24e7998a15a..67b1ac36bca 100644
--- a/packages/web-app-files/src/fileSideBars.ts
+++ b/packages/web-app-files/src/fileSideBars.ts
@@ -18,7 +18,8 @@ import { spaceRoleEditor, spaceRoleManager } from 'web-client/src/helpers/share'
 import { Panel } from '../../web-pkg/src/components/sideBar'
 
 import { Resource, User } from 'web-client'
-import Router from 'vue-router'
+import { Router } from 'web-pkg/src/types/router'
+
 
 function $gettext(msg: string): string {
   return msg
diff --git a/packages/web-app-files/src/router/deprecated.ts b/packages/web-app-files/src/router/deprecated.ts
index 96a50c20b76..d0e9ad1b08f 100644
--- a/packages/web-app-files/src/router/deprecated.ts
+++ b/packages/web-app-files/src/router/deprecated.ts
@@ -1,4 +1,5 @@
-import VueRouter, { RouteConfig, Route, Location, RouteMeta } from 'vue-router'
+import { RouteConfig, Route, Location, RouteMeta } from 'vue-router'
+import { Router } from 'web-pkg/src/types/router'
 import { createLocationSpaces } from './spaces'
 import { createLocationShares } from './shares'
 import { createLocationCommon } from './common'
@@ -100,7 +101,7 @@ export const buildRoutes = (): RouteConfig[] =>
  * @param comparatives
  */
 export const isLocationActive = (
-  router: VueRouter,
+  router: Router,
   ...comparatives: [Location, ...Location[]]
 ): boolean => {
   const [first, ...rest] = comparatives.map((c) => {
diff --git a/packages/web-app-files/src/router/utils.ts b/packages/web-app-files/src/router/utils.ts
index fb05096d6fc..5ec59f08711 100644
--- a/packages/web-app-files/src/router/utils.ts
+++ b/packages/web-app-files/src/router/utils.ts
@@ -1,8 +1,9 @@
-import VueRouter, { Location } from 'vue-router'
+import { Location } from 'vue-router'
+import { Router } from 'web-pkg/src/types/router'
 import merge from 'lodash-es/merge'
 
 export interface ActiveRouteDirectorFunc<T extends string> {
-  (router: VueRouter, ...comparatives: T[]): boolean
+  (router: Router, ...comparatives: T[]): boolean
 }
 
 /**
@@ -13,7 +14,7 @@ export interface ActiveRouteDirectorFunc<T extends string> {
  * @param comparatives
  */
 export const isLocationActive = (
-  router: VueRouter,
+  router: Router,
   ...comparatives: [Location, ...Location[]]
 ): boolean => {
   const { href: currentHref } = router.resolve(router.currentRoute)
@@ -47,7 +48,7 @@ export const isLocationActive = (
 export const isLocationActiveDirector = <T extends string>(
   ...defaultComparatives: [Location, ...Location[]]
 ): ActiveRouteDirectorFunc<T> => {
-  return (router: VueRouter, ...comparatives: T[]): boolean => {
+  return (router: Router, ...comparatives: T[]): boolean => {
     if (!comparatives.length) {
       return isLocationActive(router, ...defaultComparatives)
     }
diff --git a/packages/web-app-files/src/search/sdk/index.ts b/packages/web-app-files/src/search/sdk/index.ts
index 14efc43f8a3..888cddbf473 100644
--- a/packages/web-app-files/src/search/sdk/index.ts
+++ b/packages/web-app-files/src/search/sdk/index.ts
@@ -3,7 +3,7 @@ import Preview from './preview'
 import List from './list'
 import { EventBus } from 'web-pkg/src/services/eventBus'
 import { Store } from 'vuex'
-import VueRouter from 'vue-router'
+import { Router } from 'web-pkg/src/types/router'
 
 function $gettext(msg) {
   return msg
@@ -14,9 +14,9 @@ export default class Provider extends EventBus implements SearchProvider {
   public readonly previewSearch: SearchPreview
   public readonly listSearch: SearchList
   private readonly store: Store<any>
-  private readonly router: VueRouter
+  private readonly router: Router
 
-  constructor(store: Store<any>, router: VueRouter) {
+  constructor(store: Store<any>, router: Router) {
     super()
 
     this.id = 'files.sdk'
diff --git a/packages/web-app-files/src/search/sdk/preview.ts b/packages/web-app-files/src/search/sdk/preview.ts
index 5ebbffa6c33..2c7d31ec2d4 100644
--- a/packages/web-app-files/src/search/sdk/preview.ts
+++ b/packages/web-app-files/src/search/sdk/preview.ts
@@ -4,7 +4,7 @@ import { clientService } from 'web-pkg/src/services'
 import { buildResource } from 'web-client/src/helpers'
 import { Cache } from 'web-pkg/src/helpers/cache'
 import { Component } from 'vue'
-import VueRouter from 'vue-router'
+import { Router } from 'web-pkg/src/types/router'
 import { DavProperties } from 'web-client/src/webdav/constants'
 import { Store } from 'vuex'
 
@@ -13,10 +13,10 @@ export const previewSearchLimit = 8
 export default class Preview implements SearchPreview {
   public readonly component: Component
   private readonly cache: Cache<string, SearchResult>
-  private readonly router: VueRouter
+  private readonly router: Router
   private readonly store: Store<any>
 
-  constructor(store: Store<any>, router: VueRouter) {
+  constructor(store: Store<any>, router: Router) {
     this.component = PreviewComponent
     this.router = router
     this.store = store
diff --git a/packages/web-app-files/tests/unit/components/Search/List.spec.ts b/packages/web-app-files/tests/unit/components/Search/List.spec.ts
index fa77aefca12..0b167d11d51 100644
--- a/packages/web-app-files/tests/unit/components/Search/List.spec.ts
+++ b/packages/web-app-files/tests/unit/components/Search/List.spec.ts
@@ -1,5 +1,4 @@
 import { describe } from '@jest/globals'
-// import VueRouter from 'vue-router'
 // import List from 'web-app-files/src/components/Search/List.vue'
 //
 // const stubs = {
@@ -98,7 +97,6 @@ describe('List component', () => {
 //       }
 //     },
 //     store: createStore(files),
-//     router: new VueRouter(),
 //     stubs,
 //     mock: {
 //       webdav: {
diff --git a/packages/web-app-files/tests/unit/router/utils.spec.ts b/packages/web-app-files/tests/unit/router/utils.spec.ts
index 234a8449d16..627f4c40d51 100644
--- a/packages/web-app-files/tests/unit/router/utils.spec.ts
+++ b/packages/web-app-files/tests/unit/router/utils.spec.ts
@@ -3,18 +3,19 @@ import {
   isLocationActiveDirector,
   createLocation
 } from '../../../src/router/utils'
-import VueRouter from 'vue-router'
+import { Router } from 'web-pkg/src/types/router'
+import { mock } from 'jest-mock-extended'
 
 describe('utils', () => {
   describe('isLocationActive', () => {
     it('returns true if one location is active', () => {
-      const fakeRouter = {
+      const fakeRouter = mock<Router>({
         currentRoute: { name: 'foo' },
         resolve: (r) => ({ href: r.name })
-      }
+      })
 
-      expect(isLocationActive(fakeRouter as VueRouter, { name: 'foo' })).toBe(true)
-      expect(isLocationActive(fakeRouter as VueRouter, { name: 'foo' }, { name: 'bar' })).toBe(true)
+      expect(isLocationActive(fakeRouter, { name: 'foo' })).toBe(true)
+      expect(isLocationActive(fakeRouter, { name: 'foo' }, { name: 'bar' })).toBe(true)
     })
 
     it('returns false if all locations inactive', () => {
@@ -23,8 +24,8 @@ describe('utils', () => {
         resolve: (r) => ({ href: r.name })
       }
 
-      expect(isLocationActive(fakeRouter as VueRouter, { name: 'bar' })).toBe(false)
-      expect(isLocationActive(fakeRouter as VueRouter, { name: 'bar' }, { name: 'baz' })).toBe(
+      expect(isLocationActive(fakeRouter, { name: 'bar' })).toBe(false)
+      expect(isLocationActive(fakeRouter, { name: 'bar' }, { name: 'baz' })).toBe(
         false
       )
     })
@@ -32,32 +33,32 @@ describe('utils', () => {
 
   describe('isLocationActiveDirector', () => {
     test('director can be created and be used to check active locations', () => {
-      const fakeRouter = {
+      const fakeRouter = mock<Router>({
         currentRoute: { name: 'unknown' },
         resolve: (r) => ({ href: r.name })
-      }
+      })
 
       const isFilesLocationActive = isLocationActiveDirector(
         { name: 'foo' },
         { name: 'bar' },
         { name: 'baz' }
       )
-      expect(isFilesLocationActive(fakeRouter as VueRouter)).toBe(false)
+      expect(isFilesLocationActive(fakeRouter)).toBe(false)
 
       fakeRouter.currentRoute.name = 'bar'
 
-      expect(isFilesLocationActive(fakeRouter as VueRouter)).toBe(true)
-      expect(isFilesLocationActive(fakeRouter as VueRouter, 'foo', 'bar')).toBe(true)
+      expect(isFilesLocationActive(fakeRouter)).toBe(true)
+      expect(isFilesLocationActive(fakeRouter, 'foo', 'bar')).toBe(true)
     })
 
     test('director closure only allows to check known locations and throws if unknown', () => {
-      const fakeRouter = {
+      const fakeRouter = mock<Router>({
         currentRoute: { name: 'baz' },
         resolve: (r) => ({ href: r.name })
-      }
+      })
 
       const isFilesLocationActive = isLocationActiveDirector({ name: 'foo' }, { name: 'bar' })
-      expect(() => isFilesLocationActive(fakeRouter as VueRouter, 'unknown')).toThrow()
+      expect(() => isFilesLocationActive(fakeRouter, 'unknown')).toThrow()
     })
   })
 
diff --git a/packages/web-app-files/tests/unit/search/sdk.spec.ts b/packages/web-app-files/tests/unit/search/sdk.spec.ts
index ac0ee5f9a08..a5e316b99ab 100644
--- a/packages/web-app-files/tests/unit/search/sdk.spec.ts
+++ b/packages/web-app-files/tests/unit/search/sdk.spec.ts
@@ -1,8 +1,8 @@
 import { SDKSearch } from '../../../src/search'
 import { clientService } from 'web-pkg/src/services'
 import { Store } from 'vuex'
-import VueRouter from 'vue-router'
-import { mockDeep } from 'jest-mock-extended'
+import { Router } from 'web-pkg/src/types/router'
+import { mock, mockDeep } from 'jest-mock-extended'
 
 const searchMock = jest.fn()
 jest.spyOn(clientService, 'owncloudSdk', 'get').mockImplementation(
@@ -35,7 +35,7 @@ const storeWithoutFileSearch = mockDeep<Store<any>>({
 
 describe('SDKProvider', () => {
   it('is only available if announced via capabilities', () => {
-    const search = new SDKSearch(storeWithoutFileSearch, {} as unknown as VueRouter)
+    const search = new SDKSearch(storeWithoutFileSearch, mock<Router>())
     expect(search.available).toBe(false)
   })
 
@@ -48,14 +48,14 @@ describe('SDKProvider', () => {
       ].forEach((v) => {
         const search = new SDKSearch(store, {
           currentRoute: { name: v.route }
-        } as unknown as VueRouter)
+        } as unknown as Router)
 
         expect(!!search.previewSearch.available).toBe(!!v.available)
       })
     })
 
     it('can search', async () => {
-      const search = new SDKSearch(store, jest.fn() as unknown as VueRouter)
+      const search = new SDKSearch(store, mock<Router>())
       const files = [
         { id: 'foo', name: 'foo' },
         { id: 'bar', name: 'bar' },
@@ -75,7 +75,7 @@ describe('SDKProvider', () => {
   })
   describe('SDKProvider listSearch', () => {
     it('can search', async () => {
-      const search = new SDKSearch(store, jest.fn() as unknown as VueRouter)
+      const search = new SDKSearch(store, mock<Router>())
       const files = [
         { id: 'foo', name: 'foo' },
         { id: 'bar', name: 'bar' },
diff --git a/packages/web-pkg/package.json b/packages/web-pkg/package.json
index 0c8913a56e7..9a1a9e9d8af 100644
--- a/packages/web-pkg/package.json
+++ b/packages/web-pkg/package.json
@@ -11,7 +11,7 @@
     "luxon": "^2.4.0",
     "qs": "^6.10.3",
     "uuid": "^9.0.0",
-    "vue-router": "3.6.5",
+    "vue-router": "4.1.6",
     "vuex": "4.1.0",
     "web-client": "npm:@ownclouders/web-client",
     "web-pkg": "npm:@ownclouders/web-pkg"
diff --git a/packages/web-pkg/src/composables/appDefaults/useAppNavigation.ts b/packages/web-pkg/src/composables/appDefaults/useAppNavigation.ts
index 1bfd72ec3de..e4e4eeb4444 100644
--- a/packages/web-pkg/src/composables/appDefaults/useAppNavigation.ts
+++ b/packages/web-pkg/src/composables/appDefaults/useAppNavigation.ts
@@ -1,5 +1,6 @@
 import { unref } from 'vue'
-import VueRouter, { Location } from 'vue-router'
+import { Location } from 'vue-router'
+import { Router } from 'web-pkg/src/types/router'
 
 import { MaybeRef } from '../../utils'
 import { FileContext } from './types'
@@ -8,7 +9,7 @@ import { Resource } from 'web-client'
 import { useFileRouteReplace } from '../router/useFileRouteReplace'
 
 interface AppNavigationOptions {
-  router: VueRouter
+  router: Router
   currentFileContext: MaybeRef<FileContext>
 }
 
diff --git a/packages/web-pkg/src/composables/router/useActiveApp.ts b/packages/web-pkg/src/composables/router/useActiveApp.ts
index 4b3fbff4b59..4f35b7f82c7 100644
--- a/packages/web-pkg/src/composables/router/useActiveApp.ts
+++ b/packages/web-pkg/src/composables/router/useActiveApp.ts
@@ -1,6 +1,5 @@
 import { computed, ComputedRef, unref } from 'vue'
-import { useRoute } from './useRoute'
-import { Route } from 'vue-router'
+import { useRoute } from 'vue-router'
 
 export const activeApp = (route: Route): string => {
   return route.path.split('/')[1]
diff --git a/packages/web-pkg/src/composables/router/useRouteMeta.ts b/packages/web-pkg/src/composables/router/useRouteMeta.ts
index eb57fd45cbb..f258a49b9e2 100644
--- a/packages/web-pkg/src/composables/router/useRouteMeta.ts
+++ b/packages/web-pkg/src/composables/router/useRouteMeta.ts
@@ -1,7 +1,7 @@
 import { computed, Ref, unref } from 'vue'
-import { useRoute } from './useRoute'
+import { useRoute } from 'vue-router'
 
 export const useRouteMeta = (key: string, defaultValue?: string): Ref<string> => {
   const route = useRoute()
-  return computed(() => unref(route).meta[key] || defaultValue)
+  return computed(() => unref(route).meta[key] as string || defaultValue)
 }
diff --git a/packages/web-pkg/src/composables/router/useRouteParam.ts b/packages/web-pkg/src/composables/router/useRouteParam.ts
index 4be616d21b6..af284edc878 100644
--- a/packages/web-pkg/src/composables/router/useRouteParam.ts
+++ b/packages/web-pkg/src/composables/router/useRouteParam.ts
@@ -1,4 +1,4 @@
-import { customRef, Ref } from 'vue'
+import { customRef, Ref, unref } from 'vue'
 import { useRouter } from './useRouter'
 import { ParamValue } from './types'
 
@@ -11,15 +11,16 @@ export const useRouteParam = (name: string, defaultValue?: ParamValue): Ref<Para
     return {
       get() {
         track()
-        return router.currentRoute.params[name] || defaultValue
+        const value = unref(router.currentRoute).params[name] || defaultValue
+        return Array.isArray(value) ? value.join('/') : value
       },
       async set(v) {
-        if (router.currentRoute.params[name] === v) {
+        if (unref(router.currentRoute).params[name] === v) {
           return
         }
         await router.replace({
           params: {
-            ...router.currentRoute.params,
+            ...unref(router.currentRoute).params,
             [name]: v
           }
         })
diff --git a/packages/web-pkg/src/composables/router/useRouteQuery.ts b/packages/web-pkg/src/composables/router/useRouteQuery.ts
index 19b57d71a1a..ece6aaea96a 100644
--- a/packages/web-pkg/src/composables/router/useRouteQuery.ts
+++ b/packages/web-pkg/src/composables/router/useRouteQuery.ts
@@ -1,4 +1,4 @@
-import { customRef, Ref } from 'vue'
+import { customRef, Ref, unref } from 'vue'
 import { useRouter } from './useRouter'
 import { QueryValue } from './types'
 
@@ -11,15 +11,15 @@ export const useRouteQuery = (name: string, defaultValue?: QueryValue): Ref<Quer
     return {
       get() {
         track()
-        return router.currentRoute.query[name] || defaultValue
+        return unref(router.currentRoute).query[name] || defaultValue
       },
       async set(v) {
-        if (router.currentRoute.query[name] === v) {
+        if (unref(router.currentRoute).query[name] === v) {
           return
         }
         await router.replace({
           query: {
-            ...router.currentRoute.query,
+            ...unref(router.currentRoute).query,
             [name]: v
           }
         })
diff --git a/packages/web-pkg/src/composables/router/useRouter.ts b/packages/web-pkg/src/composables/router/useRouter.ts
index 83aff6d30a5..8a9d0ccbf7e 100644
--- a/packages/web-pkg/src/composables/router/useRouter.ts
+++ b/packages/web-pkg/src/composables/router/useRouter.ts
@@ -1,7 +1,7 @@
-import VueRouter from 'vue-router'
+import { Router } from 'web-pkg/src/types/router'
 import { useService } from '../service'
 
-export const useRouter = (): VueRouter => {
+export const useRouter = (): Router => {
   const hack = (window as any).__HACK__router
   if (hack) {
     return hack
diff --git a/packages/web-pkg/src/index.ts b/packages/web-pkg/src/index.ts
index 0062a8eea8d..4082c482d81 100644
--- a/packages/web-pkg/src/index.ts
+++ b/packages/web-pkg/src/index.ts
@@ -5,4 +5,5 @@ export * from './helpers'
 export * from './http'
 export * from './observer'
 export * from './services'
+export * from './types'
 export * from './utils'
diff --git a/packages/web-pkg/src/types/index.ts b/packages/web-pkg/src/types/index.ts
new file mode 100644
index 00000000000..398cae73496
--- /dev/null
+++ b/packages/web-pkg/src/types/index.ts
@@ -0,0 +1 @@
+export * from './router'
diff --git a/packages/web-pkg/src/types/router.ts b/packages/web-pkg/src/types/router.ts
new file mode 100644
index 00000000000..20dd41553be
--- /dev/null
+++ b/packages/web-pkg/src/types/router.ts
@@ -0,0 +1,3 @@
+import { createRouter } from 'vue-router'
+
+export type Router = ReturnType<typeof createRouter>
diff --git a/packages/web-pkg/tests/unit/composables/router/useRouter.spec.ts b/packages/web-pkg/tests/unit/composables/router/useRouter.spec.ts
index 7c743d4a511..d526620c70c 100644
--- a/packages/web-pkg/tests/unit/composables/router/useRouter.spec.ts
+++ b/packages/web-pkg/tests/unit/composables/router/useRouter.spec.ts
@@ -1,5 +1,5 @@
 import { useRouter } from 'web-pkg/src/composables'
-import VueRouter from 'vue-router'
+import { Router } from 'web-pkg/src/types/router'
 import { createRouter, getComposableWrapper } from 'web-test-helpers'
 
 describe('useRouter', () => {
@@ -10,7 +10,7 @@ describe('useRouter', () => {
     const mocks = { $router: router }
     getComposableWrapper(
       () => {
-        expect(useRouter()).toBeInstanceOf(VueRouter)
+        expect(useRouter()).toBeInstanceOf(Router)
       },
       { mocks }
     )
diff --git a/packages/web-runtime/package.json b/packages/web-runtime/package.json
index 95ed4d375d5..e8d0fc14c5f 100644
--- a/packages/web-runtime/package.json
+++ b/packages/web-runtime/package.json
@@ -43,7 +43,7 @@
     "vue-gettext": "2.1.12",
     "vue-inline-svg": "3.1.0",
     "vue-meta": "^2.2.2",
-    "vue-router": "3.6.5",
+    "vue-router": "4.1.6",
     "vue-select": "4.0.0-beta.6",
     "vuex": "4.1.0",
     "vuex-router-sync": "^5.0.0",
diff --git a/packages/web-runtime/src/App.vue b/packages/web-runtime/src/App.vue
index b2db66d97a4..3f78be2a0fa 100644
--- a/packages/web-runtime/src/App.vue
+++ b/packages/web-runtime/src/App.vue
@@ -104,18 +104,18 @@ export default defineComponent({
     }
   },
   watch: {
-    $route: {
-      immediate: true,
-      handler: function (to) {
-        const extracted = this.extractPageTitleFromRoute(to)
-        if (!extracted) {
-          return
-        }
-        const { shortDocumentTitle, fullDocumentTitle } = extracted
-        this.announceRouteChange(shortDocumentTitle)
-        document.title = fullDocumentTitle
-      }
-    },
+    // $route: {
+    //   immediate: true,
+    //   handler: function (to) {
+    //     const extracted = this.extractPageTitleFromRoute(to)
+    //     if (!extracted) {
+    //       return
+    //     }
+    //     const { shortDocumentTitle, fullDocumentTitle } = extracted
+    //     this.announceRouteChange(shortDocumentTitle)
+    //     document.title = fullDocumentTitle
+    //   }
+    // },
     capabilities: {
       immediate: true,
       handler: function (caps) {
diff --git a/packages/web-runtime/src/components/Topbar/TopBar.vue b/packages/web-runtime/src/components/Topbar/TopBar.vue
index 9f0f1cc8309..a4fda8589eb 100644
--- a/packages/web-runtime/src/components/Topbar/TopBar.vue
+++ b/packages/web-runtime/src/components/Topbar/TopBar.vue
@@ -57,7 +57,7 @@ export default {
     ...mapGetters(['configuration', 'user']),
 
     activeRoutePath() {
-      return this.$router.resolve(this.$route).location.path
+      return this.$router.resolve(this.$route).path
     },
 
     appMenuItems() {
diff --git a/packages/web-runtime/src/container/api.ts b/packages/web-runtime/src/container/api.ts
index b9e4ff2ddb0..0a640968b17 100644
--- a/packages/web-runtime/src/container/api.ts
+++ b/packages/web-runtime/src/container/api.ts
@@ -1,4 +1,5 @@
-import VueRouter, { RouteConfig } from 'vue-router'
+import { RouteConfig } from 'vue-router'
+import { Router } from 'web-pkg/src/types/router'
 import clone from 'lodash-es/clone'
 import {
   RuntimeApi,
@@ -18,7 +19,7 @@ import { App, Component, h } from 'vue'
  * @param router
  * @param routes
  */
-const announceRoutes = (applicationId: string, router: VueRouter, routes: RouteConfig[]): void => {
+const announceRoutes = (applicationId: string, router: Router, routes: RouteConfig[]): void => {
   if (!isArray(routes)) {
     throw new ApiError("routes can't be blank")
   }
@@ -205,7 +206,7 @@ const requestStore = (store: Store<unknown>): Store<unknown> => {
  *
  * @param router
  */
-const requestRouter = (router: VueRouter): VueRouter => {
+const requestRouter = (router: Router): Router => {
   if (isEqual(process.env.NODE_ENV, 'development')) {
     console.warn('requestRouter // router api is deprecated, use with caution')
   }
@@ -238,7 +239,7 @@ export const buildRuntimeApi = ({
   applicationId: string
   store: Store<unknown>
   translations: unknown
-  router: VueRouter
+  router: Router
   supportedLanguages: { [key: string]: string }
 }): RuntimeApi => {
   if (!applicationName) {
@@ -262,7 +263,7 @@ export const buildRuntimeApi = ({
     announceExtension: (extension: { [key: string]: unknown }): void =>
       announceExtension(applicationId, store, extension),
     requestStore: (): Store<unknown> => requestStore(store),
-    requestRouter: (): VueRouter => requestRouter(router),
+    requestRouter: (): Router => requestRouter(router),
     openPortal: (
       instance: App,
       toApp: string,
diff --git a/packages/web-runtime/src/container/application/classic.ts b/packages/web-runtime/src/container/application/classic.ts
index 4f8e18da68c..9dbb4a8c009 100644
--- a/packages/web-runtime/src/container/application/classic.ts
+++ b/packages/web-runtime/src/container/application/classic.ts
@@ -4,7 +4,7 @@ import Vue, { App } from 'vue'
 import { isFunction, isObject } from 'lodash-es'
 import { NextApplication } from './next'
 import { Store } from 'vuex'
-import VueRouter from 'vue-router'
+import { Router } from 'web-pkg/src/types/router'
 import { RuntimeError } from '../error'
 
 type VueConstructor = typeof Vue
@@ -78,7 +78,7 @@ export const convertClassicApplication = async ({
 }: {
   applicationScript: ClassicApplicationScript
   store: Store<unknown>
-  router: VueRouter
+  router: Router
   translations: unknown
   supportedLanguages: { [key: string]: string }
 }): Promise<NextApplication> => {
diff --git a/packages/web-runtime/src/container/application/index.ts b/packages/web-runtime/src/container/application/index.ts
index 9afc1e9842a..43ad46a5b2c 100644
--- a/packages/web-runtime/src/container/application/index.ts
+++ b/packages/web-runtime/src/container/application/index.ts
@@ -1,5 +1,5 @@
 import { Store } from 'vuex'
-import VueRouter from 'vue-router'
+import { Router } from 'web-pkg/src/types/router'
 import { NextApplication } from './next'
 import { convertClassicApplication } from './classic'
 import { ClassicApplicationScript } from '../types'
@@ -54,7 +54,7 @@ export const buildApplication = async ({
 }: {
   applicationPath: string
   store: Store<unknown>
-  router: VueRouter
+  router: Router
   translations: unknown
   supportedLanguages: { [key: string]: string }
   configurationManager: ConfigurationManager
diff --git a/packages/web-runtime/src/container/bootstrap.ts b/packages/web-runtime/src/container/bootstrap.ts
index 544bee7438c..722076ab4bc 100644
--- a/packages/web-runtime/src/container/bootstrap.ts
+++ b/packages/web-runtime/src/container/bootstrap.ts
@@ -2,7 +2,7 @@ import { registerClient } from '../services/clientRegistration'
 import { RuntimeConfiguration } from './types'
 import { buildApplication, NextApplication } from './application'
 import { Store } from 'vuex'
-import VueRouter from 'vue-router'
+import { Router } from 'web-pkg/src/types/router'
 import Vue from 'vue'
 import { loadTheme } from '../helpers/theme'
 import OwnCloud from 'owncloud-sdk'
@@ -121,7 +121,7 @@ export const initializeApplications = async ({
   runtimeConfiguration: RuntimeConfiguration
   configurationManager: ConfigurationManager
   store: Store<unknown>
-  router: VueRouter
+  router: Router
   translations: unknown
   supportedLanguages: { [key: string]: string }
 }): Promise<NextApplication[]> => {
@@ -325,7 +325,7 @@ export const announceAuthService = ({
   vue: VueConstructor
   configurationManager: ConfigurationManager
   store: Store<any>
-  router: VueRouter
+  router: Router
 }): void => {
   authService.initialize(configurationManager, clientService, store, router)
   vue.prototype.$authService = authService
@@ -344,7 +344,7 @@ export const announceDefaults = ({
   router
 }: {
   store: Store<unknown>
-  router: VueRouter
+  router: Router
 }): void => {
   // set home route
   const appIds = store.getters.appIds
diff --git a/packages/web-runtime/src/container/types.ts b/packages/web-runtime/src/container/types.ts
index a10ac590755..c3cec8bd1d7 100644
--- a/packages/web-runtime/src/container/types.ts
+++ b/packages/web-runtime/src/container/types.ts
@@ -1,5 +1,6 @@
 import { Store } from 'vuex'
-import VueRouter, { RouteConfig } from 'vue-router'
+import { RouteConfig } from 'vue-router'
+import { Router } from 'web-pkg/src/types/router'
 import Vue, { Component } from 'vue'
 
 /** shim configuration for now, should be typed in a later step */
@@ -83,7 +84,7 @@ export interface RuntimeApi {
   announceStore: (applicationStore: Store<unknown>) => void
   announceExtension: (extension: { [key: string]: unknown }) => void
   requestStore: () => Store<unknown>
-  requestRouter: () => VueRouter
+  requestRouter: () => Router
   openPortal: (
     instance: typeof Vue.prototype,
     toApp: string,
diff --git a/packages/web-runtime/src/defaults/vue.js b/packages/web-runtime/src/defaults/vue.js
index f3728b95861..25cd87891f6 100644
--- a/packages/web-runtime/src/defaults/vue.js
+++ b/packages/web-runtime/src/defaults/vue.js
@@ -4,11 +4,9 @@ import Avatar from '../components/Avatar.vue'
 import focusMixin from '../mixins/focusMixin'
 import lifecycleMixin from '../mixins/lifecycleMixin'
 import VueMeta from 'vue-meta'
-import VueRouter from 'vue-router'
 import Vuex from 'vuex'
 
 Vue.use(Vuex)
-Vue.use(VueRouter)
 Vue.use(WebPlugin)
 Vue.use(VueMeta, {
   refreshOnceOnNavigation: true
diff --git a/packages/web-runtime/src/index.ts b/packages/web-runtime/src/index.ts
index a3491f89516..1b1b3372b72 100644
--- a/packages/web-runtime/src/index.ts
+++ b/packages/web-runtime/src/index.ts
@@ -64,13 +64,12 @@ export const bootstrap = async (configurationPath: string): Promise<void> => {
   announceDefaults({ store, router })
 }
 
-export const renderSuccess = (): void => {
+export const renderSuccess = async (): Promise<void> => {
   Vue.prototype.$store = store
 
   const applications = Array.from(applicationStore.values())
   const instance = createApp({
     store,
-    router,
     render() {
       return h(pages.success)
     }
@@ -82,6 +81,9 @@ export const renderSuccess = (): void => {
     wormhole: instance.config.globalProperties.$wormhole
   })
 
+  // install router instance
+  instance.use(router)
+
   // mount App
   instance.mount('#owncloud')
   applications.forEach((application) => application.mounted(instance))
diff --git a/packages/web-runtime/src/layouts/Application.vue b/packages/web-runtime/src/layouts/Application.vue
index bfc10c05898..258a8a4187b 100644
--- a/packages/web-runtime/src/layouts/Application.vue
+++ b/packages/web-runtime/src/layouts/Application.vue
@@ -59,8 +59,8 @@ export default defineComponent({
     watch(
       useRoute(),
       (route) => {
-        if (route.matched.length) {
-          route.matched.forEach((match) => {
+        if (unref(route).matched.length) {
+          unref(route).matched.forEach((match) => {
             const keys = Object.keys(match.components).filter((key) => key !== 'default')
             if (keys.length) {
               console.warn(
diff --git a/packages/web-runtime/src/pages/oidcCallback.vue b/packages/web-runtime/src/pages/oidcCallback.vue
index fb798d86aa9..ab29971bdee 100644
--- a/packages/web-runtime/src/pages/oidcCallback.vue
+++ b/packages/web-runtime/src/pages/oidcCallback.vue
@@ -17,8 +17,9 @@
 
 <script lang="ts">
 import { computed, defineComponent, onMounted, ref, unref } from 'vue'
-import { useRoute, useStore } from 'web-pkg'
+import { useStore } from 'web-pkg'
 import { authService } from 'web-runtime/src/services/auth'
+import { useRoute } from 'vue-router'
 
 export default defineComponent({
   name: 'OidcCallbackPage',
@@ -36,7 +37,7 @@ export default defineComponent({
 
     const route = useRoute()
     onMounted(() => {
-      if (unref(route).query.error) {
+      if (route.query.error) {
         error.value = true
         console.warn(
           `OAuth error: ${unref(route).query.error} - ${unref(route).query.error_description}`
diff --git a/packages/web-runtime/src/router/helpers.ts b/packages/web-runtime/src/router/helpers.ts
index e010208bbca..091f007f91e 100644
--- a/packages/web-runtime/src/router/helpers.ts
+++ b/packages/web-runtime/src/router/helpers.ts
@@ -1,11 +1,13 @@
 import { base, router } from './index'
-import Router, { Route, RouteRecordPublic } from 'vue-router'
+import { Route, RouteRecordPublic } from 'vue-router'
 import {
   authContextValues,
   contextQueryToFileContextProps,
   LocationParams,
   WebRouteMeta
 } from 'web-pkg/src/composables'
+import { unref } from 'vue'
+import { MaybeRef } from 'web-pkg/src'
 
 export const buildUrl = (pathname) => {
   const isHistoryMode = !!base
@@ -64,8 +66,11 @@ export const isUserContext = (router: Router, to: Route): boolean => {
  * @param to {Route}
  * @returns {boolean}
  */
-export const isPublicLinkContext = (router: Router, to: Route): boolean => {
-  if (to.params.driveAliasAndItem?.startsWith('public/')) {
+export const isPublicLinkContext = (router: Router, to: MaybeRef<Route>): boolean => {
+  console.log('router', router, 'to', unref(to))
+  const tmp = unref(to).params?.driveAliasAndItem
+  const driveAliasAndItem = Array.isArray(tmp) ? tmp.join('/') : tmp
+  if (driveAliasAndItem && driveAliasAndItem.startsWith('public/')) {
     return true
   }
 
@@ -103,11 +108,13 @@ export const extractPublicLinkToken = (to: Route): string => {
  * @param params {LocationParams}
  */
 const extractPublicLinkTokenFromRouteParams = (params: LocationParams): string => {
-  if (Object.prototype.hasOwnProperty.call(params, 'driveAliasAndItem')) {
-    if (!params.driveAliasAndItem.startsWith('public/')) {
+  const tmp = params?.driveAliasAndItem
+  const driveAliasAndItem = Array.isArray(tmp) ? tmp.join('/') : tmp
+  if (driveAliasAndItem) {
+    if (!driveAliasAndItem.startsWith('public/')) {
       return ''
     }
-    return params.driveAliasAndItem.split('/')[1]
+    return driveAliasAndItem.split('/')[1]
   }
   return (params.item || params.filePath || params.token || '').split('/')[0]
 }
diff --git a/packages/web-runtime/src/router/index.ts b/packages/web-runtime/src/router/index.ts
index 5a9b27997c9..7cdef5375cc 100644
--- a/packages/web-runtime/src/router/index.ts
+++ b/packages/web-runtime/src/router/index.ts
@@ -8,7 +8,7 @@ import ResolvePublicLinkPage from '../pages/resolvePublicLink.vue'
 import ResolvePrivateLinkPage from '../pages/resolvePrivateLink.vue'
 import { setupAuthGuard } from './setupAuthGuard'
 import { patchRouter } from './patchCleanPath'
-import VueRouter from 'vue-router'
+import { createRouter as _createRouter, createWebHashHistory, createWebHistory, RouterOptions } from 'vue-router'
 
 export * from './helpers'
 
@@ -17,8 +17,8 @@ function $gettext(msg) {
   return msg
 }
 
-export const createRouter = (options?: any) => {
-  ;(window as any).__HACK__router = new VueRouter(options)
+export const createRouter = (options?: RouterOptions) => {
+  ;(window as any).__HACK__router = _createRouter(options)
   return (window as any).__HACK__router
 }
 
@@ -36,10 +36,7 @@ export const router = patchRouter(
         addQueryPrefix: true
       })
     },
-    ...(base && {
-      mode: 'history',
-      base: new URL(base.href).pathname
-    }),
+    history: base && createWebHistory(new URL(base.href).pathname) || createWebHashHistory(),
     routes: [
       {
         path: '/login',
diff --git a/packages/web-runtime/src/router/patchCleanPath.ts b/packages/web-runtime/src/router/patchCleanPath.ts
index a7995fcd7da..ecfd4a1ff64 100644
--- a/packages/web-runtime/src/router/patchCleanPath.ts
+++ b/packages/web-runtime/src/router/patchCleanPath.ts
@@ -1,4 +1,4 @@
-import Router from 'vue-router'
+import { Router } from 'vue-router'
 import get from 'lodash-es/get'
 
 // type: patch
@@ -8,26 +8,26 @@ import get from 'lodash-es/get'
 // to apply the patch to a route add meta.patchCleanPath = true to it
 // to patch needs to be enabled on a route level, to do so add meta.patchCleanPath = true property to the route
 export const patchRouter = (router: Router) => {
-  const bindMatcher = router.match.bind(router)
-  const cleanPath = (route) =>
-    [
-      ['%2F', '/'],
-      ['//', '/']
-    ].reduce((path, rule) => path.replaceAll(rule[0], rule[1]), route || '')
+  // const bindMatcher = router.match.bind(router)
+  // const cleanPath = (route) =>
+  //   [
+  //     ['%2F', '/'],
+  //     ['//', '/']
+  //   ].reduce((path, rule) => path.replaceAll(rule[0], rule[1]), route || '')
 
-  router.match = (raw, current, redirectFrom) => {
-    const bindMatch = bindMatcher(raw, current, redirectFrom)
+  // router.match = (raw, current, redirectFrom) => {
+  //   const bindMatch = bindMatcher(raw, current, redirectFrom)
 
-    if (!get(bindMatch, 'meta.patchCleanPath', false)) {
-      return bindMatch
-    }
+  //   if (!get(bindMatch, 'meta.patchCleanPath', false)) {
+  //     return bindMatch
+  //   }
 
-    return {
-      ...bindMatch,
-      path: cleanPath(bindMatch.path),
-      fullPath: cleanPath(bindMatch.fullPath)
-    }
-  }
+  //   return {
+  //     ...bindMatch,
+  //     path: cleanPath(bindMatch.path),
+  //     fullPath: cleanPath(bindMatch.fullPath)
+  //   }
+  // }
 
   return router
 }
diff --git a/packages/web-runtime/src/services/auth/authService.ts b/packages/web-runtime/src/services/auth/authService.ts
index 64c917b40e9..b5eff734832 100644
--- a/packages/web-runtime/src/services/auth/authService.ts
+++ b/packages/web-runtime/src/services/auth/authService.ts
@@ -3,14 +3,16 @@ import { PublicLinkManager } from './publicLinkManager'
 import { Store } from 'vuex'
 import { ClientService } from 'web-pkg/src/services'
 import { ConfigurationManager } from 'web-pkg/src/configuration'
-import VueRouter, { Route } from 'vue-router'
+import { Route } from 'vue-router'
 import { extractPublicLinkToken, isPublicLinkContext, isUserContext } from '../../router'
+import { Router } from 'web-pkg/src/types/router'
+import { unref } from 'vue'
 
 export class AuthService {
   private clientService: ClientService
   private configurationManager: ConfigurationManager
   private store: Store<any>
-  private router: VueRouter
+  private router: Router
   private userManager: UserManager
   private publicLinkManager: PublicLinkManager
 
@@ -18,7 +20,7 @@ export class AuthService {
     configurationManager: ConfigurationManager,
     clientService: ClientService,
     store: Store<any>,
-    router: VueRouter
+    router: Router
   ): void {
     this.configurationManager = configurationManager
     this.clientService = clientService
@@ -152,7 +154,7 @@ export class AuthService {
     // craft a url that the parser in oidc-client-ts can handle… this is required for oauth2 logins
     const url =
       '/?' +
-      new URLSearchParams(this.router.currentRoute.query as Record<string, string>).toString()
+      new URLSearchParams(unref(this.router.currentRoute).query as Record<string, string>).toString()
 
     try {
       await this.userManager.signinRedirectCallback(url)
diff --git a/packages/web-test-helpers/package.json b/packages/web-test-helpers/package.json
index b2c86eb8b32..385c5204e50 100644
--- a/packages/web-test-helpers/package.json
+++ b/packages/web-test-helpers/package.json
@@ -5,7 +5,7 @@
   "peerDependencies": {
     "axios": "0.27.2",
     "vue-gettext": "2.1.12",
-    "vue-router": "3.6.5",
+    "vue-router": "4.1.6",
     "vuex": "4.1.0"
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e615b77668d..f19882b3b41 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -475,7 +475,7 @@ importers:
       uuid: ^9.0.0
       vue-concurrency: 4.0.0
       vue-gettext: 2.1.12
-      vue-router: 3.6.5
+      vue-router: 4.1.6
       vuex: 4.1.0
       web-app-files: workspace:*
       web-app-search: workspace:*
@@ -495,10 +495,10 @@ importers:
       sanitize-html: 2.7.0
       semver: 7.3.8
       uuid: 9.0.0
-      vue-concurrency: 4.0.0
+      vue-concurrency: 4.0.0_vue@3.2.45
       vue-gettext: 2.1.12_6c2crj3kpnhb2sofrku4e7jhce
-      vue-router: 3.6.5
-      vuex: 4.1.0
+      vue-router: 4.1.6_vue@3.2.45
+      vuex: 4.1.0_vue@3.2.45
       web-app-files: 'link:'
       web-app-search: link:../web-app-search
       web-client: link:../web-client
@@ -506,7 +506,7 @@ importers:
       web-runtime: link:../web-runtime
     devDependencies:
       '@jest/globals': 29.3.1
-      '@vueuse/core': 9.8.2
+      '@vueuse/core': 9.8.2_vue@3.2.45
 
   packages/web-app-pdf-viewer:
     specifiers:
@@ -590,7 +590,7 @@ importers:
       luxon: ^2.4.0
       qs: ^6.10.3
       uuid: ^9.0.0
-      vue-router: 3.6.5
+      vue-router: 4.1.6
       vuex: 4.1.0
       web-client: npm:@ownclouders/web-client
       web-pkg: npm:@ownclouders/web-pkg
@@ -601,8 +601,8 @@ importers:
       luxon: 2.4.0
       qs: 6.10.3
       uuid: 9.0.0
-      vue-router: 3.6.5
-      vuex: 4.1.0
+      vue-router: 4.1.6_vue@3.2.45
+      vuex: 4.1.0_vue@3.2.45
       web-client: link:../web-client
       web-pkg: 'link:'
 
@@ -649,7 +649,7 @@ importers:
       vue-gettext: 2.1.12
       vue-inline-svg: 3.1.0
       vue-meta: ^2.2.2
-      vue-router: 3.6.5
+      vue-router: 4.1.6
       vue-select: 4.0.0-beta.6
       vuex: 4.1.0
       vuex-router-sync: ^5.0.0
@@ -698,10 +698,10 @@ importers:
       vue-gettext: 2.1.12_6c2crj3kpnhb2sofrku4e7jhce
       vue-inline-svg: 3.1.0_vue@3.2.45
       vue-meta: 2.4.0
-      vue-router: 3.6.5_vue@3.2.45
+      vue-router: 4.1.6_vue@3.2.45
       vue-select: 4.0.0-beta.6_vue@3.2.45
       vuex: 4.1.0_vue@3.2.45
-      vuex-router-sync: 5.0.0_6x7cybbl2jmitybnyifyjha3eu
+      vuex-router-sync: 5.0.0_mhkwdqbz43jpnlolybzfmh5sqi
       web-client: link:../web-client
       web-pkg: link:../web-pkg
       web-runtime: 'link:'
@@ -717,13 +717,13 @@ importers:
     specifiers:
       axios: 0.27.2
       vue-gettext: 2.1.12
-      vue-router: 3.6.5
+      vue-router: 4.1.6
       vuex: 4.1.0
     dependencies:
       axios: 0.27.2
       vue-gettext: 2.1.12_6c2crj3kpnhb2sofrku4e7jhce
-      vue-router: 3.6.5
-      vuex: 4.1.0
+      vue-router: 4.1.6_vue@3.2.45
+      vuex: 4.1.0_vue@3.2.45
 
   tests/acceptance:
     specifiers:
@@ -6541,13 +6541,13 @@ packages:
       - supports-color
     dev: true
 
-  /@vueuse/core/9.8.2:
+  /@vueuse/core/9.8.2_vue@3.2.45:
     resolution: {integrity: sha512-aWiCmcYIpPt7xjuqYiceODEMHchDYthrJ4AqI+FXPZrR23PZOqdiktbUVyQl2kGlR3H4i9UJ/uimQrwhz9UouQ==}
     dependencies:
       '@types/web-bluetooth': 0.0.16
       '@vueuse/metadata': 9.8.2
-      '@vueuse/shared': 9.8.2
-      vue-demi: 0.13.11
+      '@vueuse/shared': 9.8.2_vue@3.2.45
+      vue-demi: 0.13.11_vue@3.2.45
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
@@ -6557,10 +6557,10 @@ packages:
     resolution: {integrity: sha512-N4E/BKS+9VsUeD4WLVRU1J2kCOLh+iikBcMtipFcTyL204132vDYHs27zLAVabJYGnhC0dIVGdhg9pbOZiY2TQ==}
     dev: true
 
-  /@vueuse/shared/9.8.2:
+  /@vueuse/shared/9.8.2_vue@3.2.45:
     resolution: {integrity: sha512-ACjrPQzowd5dnabNJt9EoGVobco9/ENiA5qP53vjiuxndlJYuc/UegwhXC7KdQbPX4F45a50+45K3g1wNqOzmA==}
     dependencies:
-      vue-demi: 0.13.11
+      vue-demi: 0.13.11_vue@3.2.45
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
@@ -22042,14 +22042,6 @@ packages:
     resolution: {integrity: sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==}
     engines: {node: '>=0.10.0'}
 
-  /vue-concurrency/4.0.0:
-    resolution: {integrity: sha512-YOLrHang8w15bMOpftw6iPsoqlZT/u5zsblnT+CrVvc2HZ0eP76hjj77sgepHxB6FRcN3dlFXDNBMQ6iZzpiNw==}
-    peerDependencies:
-      vue: ^3.2.20 || ^2.7.0
-    dependencies:
-      caf: 15.0.1
-    dev: false
-
   /vue-concurrency/4.0.0_vue@3.2.45:
     resolution: {integrity: sha512-YOLrHang8w15bMOpftw6iPsoqlZT/u5zsblnT+CrVvc2HZ0eP76hjj77sgepHxB6FRcN3dlFXDNBMQ6iZzpiNw==}
     peerDependencies:
@@ -22059,19 +22051,6 @@ packages:
       vue: 3.2.45
     dev: false
 
-  /vue-demi/0.13.11:
-    resolution: {integrity: sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==}
-    engines: {node: '>=12'}
-    hasBin: true
-    requiresBuild: true
-    peerDependencies:
-      '@vue/composition-api': ^1.0.0-rc.1
-      vue: ^3.0.0-0 || ^2.6.0
-    peerDependenciesMeta:
-      '@vue/composition-api':
-        optional: true
-    dev: true
-
   /vue-demi/0.13.11_vue@3.2.45:
     resolution: {integrity: sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==}
     engines: {node: '>=12'}
@@ -22085,7 +22064,6 @@ packages:
         optional: true
     dependencies:
       vue: 3.2.45
-    dev: false
 
   /vue-docgen-api/4.56.0_vue@3.2.45:
     resolution: {integrity: sha512-ab/Scb0DCjm4YVLf+AFa/R7XMFl8TVwUsvh26fFT5iaURih1m2hdd5Y8NveA7NQDcycpWavkFZj9eVbQdp2VGQ==}
@@ -22307,17 +22285,12 @@ packages:
       deepmerge: 4.2.2
     dev: false
 
-  /vue-router/3.6.5:
-    resolution: {integrity: sha512-VYXZQLtjuvKxxcshuRAwjHnciqZVoXAjTjcqBTz4rKc8qih9g9pI3hbDjmqXaHdgL3v8pV6P8Z335XvHzESxLQ==}
+  /vue-router/4.1.6_vue@3.2.45:
+    resolution: {integrity: sha512-DYWYwsG6xNPmLq/FmZn8Ip+qrhFEzA14EI12MsMgVxvHFDYvlr4NXpVF5hrRH1wVcDP8fGi5F4rxuJSl8/r+EQ==}
     peerDependencies:
-      vue: ^2
-    dev: false
-
-  /vue-router/3.6.5_vue@3.2.45:
-    resolution: {integrity: sha512-VYXZQLtjuvKxxcshuRAwjHnciqZVoXAjTjcqBTz4rKc8qih9g9pI3hbDjmqXaHdgL3v8pV6P8Z335XvHzESxLQ==}
-    peerDependencies:
-      vue: ^2
+      vue: ^3.2.0
     dependencies:
+      '@vue/devtools-api': 6.4.5
       vue: 3.2.45
     dev: false
 
@@ -22467,24 +22440,16 @@ packages:
       '@vue/server-renderer': 3.2.45_vue@3.2.45
       '@vue/shared': 3.2.45
 
-  /vuex-router-sync/5.0.0_6x7cybbl2jmitybnyifyjha3eu:
+  /vuex-router-sync/5.0.0_mhkwdqbz43jpnlolybzfmh5sqi:
     resolution: {integrity: sha512-Mry2sO4kiAG64714X1CFpTA/shUH1DmkZ26DFDtwoM/yyx6OtMrc+MxrU+7vvbNLO9LSpgwkiJ8W+rlmRtsM+w==}
     peerDependencies:
       vue-router: ^3.0.0
       vuex: ^3.0.0
     dependencies:
-      vue-router: 3.6.5_vue@3.2.45
+      vue-router: 4.1.6_vue@3.2.45
       vuex: 4.1.0_vue@3.2.45
     dev: false
 
-  /vuex/4.1.0:
-    resolution: {integrity: sha512-hmV6UerDrPcgbSy9ORAtNXDr9M4wlNP4pEFKye4ujJF8oqgFFuxDCdOLS3eNoRTtq5O3hoBDh9Doj1bQMYHRbQ==}
-    peerDependencies:
-      vue: ^3.2.0
-    dependencies:
-      '@vue/devtools-api': 6.4.5
-    dev: false
-
   /vuex/4.1.0_vue@3.2.45:
     resolution: {integrity: sha512-hmV6UerDrPcgbSy9ORAtNXDr9M4wlNP4pEFKye4ujJF8oqgFFuxDCdOLS3eNoRTtq5O3hoBDh9Doj1bQMYHRbQ==}
     peerDependencies: