fix(types): vue router types

Signed-off-by: Fernando Fernández <ferferga@hotmail.com>

frontend/src/App.vue

@@ -37,7 +37,7 @@
 <script setup lang="ts">
 import { whenever } from '@vueuse/core';
 import { ref, type Component as VueComponent } from 'vue';
-import type { RouteMeta } from 'vue-router';
+import type { RouteMeta } from 'vue-router/auto';
 import DefaultLayout from '@/layouts/default.vue';
 import FullPageLayout from '@/layouts/fullpage.vue';
 import ServerLayout from '@/layouts/server.vue';

frontend/src/components/Forms/AddServerForm.vue

@@ -46,7 +46,7 @@
 <script setup lang="ts">
 import { ref, unref } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useRouter } from 'vue-router';
+import { useRouter } from 'vue-router/auto';
 import { remote } from '@/plugins/remote';
 import { getJSONConfig } from '@/utils/external-config';
 

frontend/src/components/Forms/LoginForm.vue

@@ -72,7 +72,7 @@ import IconEye from 'virtual:icons/mdi/eye';
 import IconEyeOff from 'virtual:icons/mdi/eye-off';
 import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useRouter } from 'vue-router';
+import { useRouter } from 'vue-router/auto';
 import { fetchIndexPage } from '@/utils/items';
 import { remote } from '@/plugins/remote';
 import { getJSONConfig } from '@/utils/external-config';

frontend/src/components/Item/Card/ServerCard.vue

@@ -42,7 +42,7 @@
 
 <script setup lang="ts">
 import { ref } from 'vue';
-import { useRouter } from 'vue-router';
+import { useRouter } from 'vue-router/auto';
 import { remote } from '@/plugins/remote';
 import type { ServerInfo } from '@/plugins/remote/auth/types';
 

frontend/src/components/Item/ItemMenu.vue

@@ -73,7 +73,7 @@ import IMdiReplay from 'virtual:icons/mdi/replay';
 import IMdiShuffle from 'virtual:icons/mdi/shuffle';
 import { computed, getCurrentInstance, onMounted, shallowRef, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useRoute, useRouter } from 'vue-router';
+import { useRoute, useRouter } from 'vue-router/auto';
 import { isStr } from '@/utils/validation';
 import {
   canIdentify,

frontend/src/components/Layout/AppBar/AppBar.vue

@@ -60,7 +60,7 @@
 
 <script setup lang="ts">
 import { computed, inject, type Ref } from 'vue';
-import { useRoute } from 'vue-router';
+import { useRoute } from 'vue-router/auto';
 import { network, windowScroll } from '@/store';
 import { clientSettings } from '@/store/client-settings';
 

frontend/src/components/Layout/AppBar/Buttons/UserButton.vue

@@ -53,7 +53,7 @@ import IMdiLogout from 'virtual:icons/mdi/logout';
 import IMdiPencil from 'virtual:icons/mdi/pencil';
 import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useRouter } from 'vue-router';
+import { useRouter } from 'vue-router/auto';
 import { remote } from '@/plugins/remote';
 
 interface MenuItem {

frontend/src/components/Layout/AppBar/SearchField.vue

@@ -13,7 +13,7 @@
 <script setup lang="ts">
 import IMdiMagnify from 'virtual:icons/mdi/magnify';
 import { computed } from 'vue';
-import { useRoute, useRouter } from 'vue-router';
+import { useRoute, useRouter } from 'vue-router/auto';
 
 const route = useRoute();
 const router = useRouter();

frontend/src/components/Layout/Backdrop.vue

@@ -15,7 +15,7 @@
 
 <script setup lang="ts">
 import { computed } from 'vue';
-import { useRoute } from 'vue-router';
+import { useRoute } from 'vue-router/auto';
 
 const route = useRoute();
 const blurhash = computed(() => route.meta.backdrop?.blurhash);

frontend/src/components/Layout/Carousel/Item/ItemsCarousel.vue

@@ -61,7 +61,7 @@
 <script setup lang="ts">
 import { BaseItemKind, ImageType, type BaseItemDto } from '@jellyfin/sdk/lib/generated-client';
 import { SwiperSlide } from 'swiper/vue';
-import { useRoute } from 'vue-router';
+import { useRoute } from 'vue-router/auto';
 import { useResponsiveClasses } from '@/composables/use-responsive-classes';
 import { apiStore } from '@/store/api';
 import { getBlurhash } from '@/utils/images';

frontend/src/components/Layout/Navigation/NavigationDrawer.vue

@@ -40,7 +40,7 @@
 import IMdiHome from 'virtual:icons/mdi/home';
 import { computed, inject, type Ref } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useRoute } from 'vue-router';
+import { useRoute } from 'vue-router/auto';
 import type { RouteNamedMap } from 'vue-router/auto-routes';
 import type { getLibraryIcon } from '@/utils/items';
 

frontend/src/components/TransitionView.vue

@@ -9,7 +9,7 @@
 </template>
 
 <script setup lang="ts">
-import { useRoute, type RouteMeta } from 'vue-router';
+import { useRoute, type RouteMeta } from 'vue-router/auto';
 import { prefersNoMotion } from '@/store';
 
 const route = useRoute();

frontend/src/main.ts

@@ -38,6 +38,8 @@ const app = createApp(Root);
 /**
  * We add routes at this point instead of in the router plugin to avoid circular references
  * in components. At this stage, we're sure plugins are initiated.
+ *
+ * TODO: Track https://github.com/posva/unplugin-vue-router/pull/157 for proper fix
  */
 for (const route of routes) {
   router.addRoute(route);

frontend/src/pages/artist/[itemId].vue

@@ -154,7 +154,7 @@ import { getItemsApi } from '@jellyfin/sdk/lib/utils/api/items-api';
 import { getLibraryApi } from '@jellyfin/sdk/lib/utils/api/library-api';
 import { getUserLibraryApi } from '@jellyfin/sdk/lib/utils/api/user-library-api';
 import { computed, ref } from 'vue';
-import { useRoute } from 'vue-router';
+import { useRoute } from 'vue-router/auto';
 import { msToTicks } from '@/utils/time';
 import { defaultSortOrder as sortBy } from '@/utils/items';
 import { getBlurhash } from '@/utils/images';
@@ -164,7 +164,7 @@ import { useBaseItem } from '@/composables/apis';
 const SINGLE_MAX_LENGTH_MS = 600_000;
 const EP_MAX_LENGTH_MS = 1_800_000;
 
-const route = useRoute<'/artist/[itemId]'>();
+const route = useRoute('/artist/[itemId]');
 
 const activeTab = ref(0);
 

frontend/src/pages/genre/[itemId].vue

@@ -55,12 +55,12 @@ import {
 import { getItemsApi } from '@jellyfin/sdk/lib/utils/api/items-api';
 import { getUserLibraryApi } from '@jellyfin/sdk/lib/utils/api/user-library-api';
 import { computed } from 'vue';
-import { useRoute } from 'vue-router';
+import { useRoute } from 'vue-router/auto';
 import { isStr } from '@/utils/validation';
 import { useResponsiveClasses } from '@/composables/use-responsive-classes';
 import { useBaseItem } from '@/composables/apis';
 
-const route = useRoute<'/genre/[itemId]'>();
+const route = useRoute('/genre/[itemId]');
 
 const { itemId } = route.params;
 

frontend/src/pages/index.vue

@@ -35,7 +35,7 @@ const excludeViewTypes = new Set([
 import type { BaseItemDto } from '@jellyfin/sdk/lib/generated-client';
 import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useRoute } from 'vue-router';
+import { useRoute } from 'vue-router/auto';
 import { isNil } from '@/utils/validation';
 import { CardShapes, fetchIndexPage, getShapeFromCollectionType } from '@/utils/items';
 

frontend/src/pages/item/[itemId].vue

@@ -306,14 +306,14 @@ import { getItemsApi } from '@jellyfin/sdk/lib/utils/api/items-api';
 import { getLibraryApi } from '@jellyfin/sdk/lib/utils/api/library-api';
 import { getUserLibraryApi } from '@jellyfin/sdk/lib/utils/api/user-library-api';
 import { computed, ref } from 'vue';
-import { useRoute } from 'vue-router';
+import { useRoute } from 'vue-router/auto';
 import { getItemDetailsLink, getMediaStreams } from '@/utils/items';
 import { getBlurhash } from '@/utils/images';
 import { sanitizeHtml } from '@/utils/html';
 import { getItemizedSelect } from '@/utils/forms';
 import { useBaseItem } from '@/composables/apis';
 
-const route = useRoute<'/genre/[itemId]'>();
+const route = useRoute('/genre/[itemId]');
 
 const { data: item } = await useBaseItem(getUserLibraryApi, 'getItem')(() => ({
   itemId: route.params.itemId

frontend/src/pages/library/[itemId].vue

@@ -72,13 +72,13 @@ import { getPersonsApi } from '@jellyfin/sdk/lib/utils/api/persons-api';
 import { getStudiosApi } from '@jellyfin/sdk/lib/utils/api/studios-api';
 import { computed, onBeforeMount, ref, shallowRef } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useRoute } from 'vue-router';
+import { useRoute } from 'vue-router/auto';
 import { apiStore } from '@/store/api';
 import { methodsAsObject, useBaseItem } from '@/composables/apis';
 import type { Filters } from '@/components/Buttons/FilterButton.vue';
 
 const { t } = useI18n();
-const route = useRoute<'/library/[itemId]'>();
+const route = useRoute('/library/[itemId]');
 
 const lazyLoadLimit = 50;
 const COLLECTION_TYPES_MAPPINGS: { [key: string]: BaseItemKind } = {

frontend/src/pages/musicalbum/[itemId].vue

@@ -106,12 +106,12 @@
 import { ImageType } from '@jellyfin/sdk/lib/generated-client';
 import { getLibraryApi } from '@jellyfin/sdk/lib/utils/api/library-api';
 import { getUserLibraryApi } from '@jellyfin/sdk/lib/utils/api/user-library-api';
-import { useRoute } from 'vue-router';
+import { useRoute } from 'vue-router/auto';
 import { getItemDetailsLink } from '@/utils/items';
 import { getBlurhash } from '@/utils/images';
 import { useBaseItem } from '@/composables/apis';
 
-const route = useRoute<'/musicalbum/[itemId]'>();
+const route = useRoute('/musicalbum/[itemId]');
 
 const { data: item } = await useBaseItem(getUserLibraryApi, 'getItem')(() => ({
   itemId: route.params.itemId

frontend/src/pages/person/[itemId].vue

@@ -176,14 +176,14 @@ import { getLibraryApi } from '@jellyfin/sdk/lib/utils/api/library-api';
 import { getUserLibraryApi } from '@jellyfin/sdk/lib/utils/api/user-library-api';
 import { format } from 'date-fns';
 import { computed, ref } from 'vue';
-import { useRoute } from 'vue-router';
+import { useRoute } from 'vue-router/auto';
 import { defaultSortOrder as sortBy } from '@/utils/items';
 import { getBlurhash } from '@/utils/images';
 import { sanitizeHtml } from '@/utils/html';
 import { useDateFns } from '@/composables/use-datefns';
 import { useBaseItem } from '@/composables/apis';
 
-const route = useRoute<'/person/[itemId]'>();
+const route = useRoute('/person/[itemId]');
 
 const activeTab = ref(4);
 

frontend/src/pages/playback/music.vue

@@ -107,7 +107,7 @@ import 'swiper/css/virtual';
 import { A11y, EffectCoverflow, Virtual } from 'swiper/modules';
 import { Swiper, SwiperSlide } from 'swiper/vue';
 import { computed, ref, shallowRef, watchEffect } from 'vue';
-import { useRoute } from 'vue-router';
+import { useRoute } from 'vue-router/auto';
 import { playbackGuard } from '@/plugins/router/middlewares/playback';
 import { playbackManager } from '@/store/playback-manager';
 import { isNil } from '@/utils/validation';

frontend/src/pages/search.vue

@@ -83,7 +83,7 @@ import { getItemsApi } from '@jellyfin/sdk/lib/utils/api/items-api';
 import { getPersonsApi } from '@jellyfin/sdk/lib/utils/api/persons-api';
 import { refDebounced } from '@vueuse/core';
 import { computed, shallowRef } from 'vue';
-import { useRoute } from 'vue-router';
+import { useRoute } from 'vue-router/auto';
 import { apiStore } from '@/store/api';
 import { useResponsiveClasses } from '@/composables/use-responsive-classes';
 import { useBaseItem } from '@/composables/apis';

frontend/src/pages/series/[itemId].vue

@@ -188,13 +188,13 @@ import {
 import { getLibraryApi } from '@jellyfin/sdk/lib/utils/api/library-api';
 import { getUserLibraryApi } from '@jellyfin/sdk/lib/utils/api/user-library-api';
 import { computed } from 'vue';
-import { useRoute } from 'vue-router';
+import { useRoute } from 'vue-router/auto';
 import { getItemDetailsLink } from '@/utils/items';
 import { getBlurhash } from '@/utils/images';
 import { sanitizeHtml } from '@/utils/html';
 import { useBaseItem } from '@/composables/apis';
 
-const route = useRoute<'/series/[itemId]'>();
+const route = useRoute('/series/[itemId]');
 
 const { data: item } = await useBaseItem(getUserLibraryApi, 'getItem')(() => ({
   itemId: route.params.itemId

frontend/src/pages/server/add.vue

@@ -23,7 +23,7 @@ meta:
 
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n';
-import { useRoute } from 'vue-router';
+import { useRoute } from 'vue-router/auto';
 
 const { t } = useI18n();
 const route = useRoute();

frontend/src/pages/server/login.vue

@@ -101,7 +101,7 @@ import { getUserApi } from '@jellyfin/sdk/lib/utils/api/user-api';
 import { isEmpty } from 'lodash-es';
 import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useRoute, useRouter } from 'vue-router';
+import { useRoute, useRouter } from 'vue-router/auto';
 import { remote } from '@/plugins/remote';
 import { getJSONConfig } from '@/utils/external-config';
 

frontend/src/pages/server/select.vue

@@ -39,7 +39,7 @@ meta:
 <script setup lang="ts">
 import { v4 } from 'uuid';
 import { useI18n } from 'vue-i18n';
-import { useRoute } from 'vue-router';
+import { useRoute } from 'vue-router/auto';
 
 const { t } = useI18n();
 const route = useRoute();

frontend/src/pages/settings/index.vue

@@ -149,7 +149,7 @@ import IMdiTelevisionClassic from 'virtual:icons/mdi/television-classic';
 import IMdiTextBox from 'virtual:icons/mdi/text-box';
 import { computed, type Component } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useRoute, type RouteLocationRaw } from 'vue-router';
+import { useRoute, type RouteLocationRaw } from 'vue-router/auto';
 import { remote } from '@/plugins/remote';
 import { useApi } from '@/composables/apis';
 import { version as clientVersion } from '@/../package.json';

frontend/src/pages/settings/logs-and-activity.vue

@@ -105,7 +105,7 @@ import IMdiLogout from 'virtual:icons/mdi/logout';
 import IMdiPlay from 'virtual:icons/mdi/play';
 import IMdiStop from 'virtual:icons/mdi/stop';
 import { useI18n } from 'vue-i18n';
-import { useRoute } from 'vue-router';
+import { useRoute } from 'vue-router/auto';
 import { useTheme } from 'vuetify';
 import { remote } from '@/plugins/remote';
 import { useDateFns } from '@/composables/use-datefns';

frontend/src/pages/settings/users/[id].vue

@@ -318,7 +318,7 @@ import { getLocalizationApi } from '@jellyfin/sdk/lib/utils/api/localization-api
 import { getUserApi } from '@jellyfin/sdk/lib/utils/api/user-api';
 import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useRoute, useRouter } from 'vue-router';
+import { useRoute, useRouter } from 'vue-router/auto';
 import { remote } from '@/plugins/remote';
 import { useSnackbar } from '@/composables/use-snackbar';
 import { useConfirmDialog } from '@/composables/use-confirm-dialog';
@@ -336,7 +336,7 @@ interface CurrentUser {
 }
 
 const { t } = useI18n();
-const route = useRoute<'/settings/users/[id]'>();
+const route = useRoute('/settings/users/[id]');
 const router = useRouter();
 
 const loading = ref<boolean>(false);

frontend/src/pages/settings/users/new.vue

@@ -86,7 +86,7 @@ import { getLibraryApi } from '@jellyfin/sdk/lib/utils/api/library-api';
 import { getUserApi } from '@jellyfin/sdk/lib/utils/api/user-api';
 import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useRouter } from 'vue-router';
+import { useRouter } from 'vue-router/auto';
 import { remote } from '@/plugins/remote';
 
 const { t } = useI18n();

frontend/src/pages/wizard.vue

@@ -90,7 +90,7 @@ meta:
 import { getStartupApi } from '@jellyfin/sdk/lib/utils/api/startup-api';
 import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useRouter } from 'vue-router';
+import { useRouter } from 'vue-router/auto';
 import { useSnackbar } from '@/composables/use-snackbar';
 import { remote } from '@/plugins/remote';
 

frontend/src/plugins/router/index.ts

@@ -5,6 +5,7 @@ import {
   createWebHashHistory,
   createWebHistory
 } from 'vue-router';
+import type { RouteNamedMap, _RouterTyped } from 'unplugin-vue-router/types';
 import { remote } from '../remote';
 import { adminGuard } from './middlewares/admin-pages';
 import { loginGuard } from './middlewares/login';
@@ -25,7 +26,9 @@ export const router = createRouter({
   scrollBehavior(_to, _from, savedPosition) {
     return savedPosition ?? { top: 0 };
   }
-});
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-expect-error - Wait for upstream fix for https://github.com/posva/unplugin-vue-router/pull/157
+}) as _RouterTyped<RouteNamedMap>;
 
 /**
  * Middleware pipeline: The order IS IMPORTANT (meta handling should always go first)

frontend/src/plugins/router/middlewares/admin-pages.ts

@@ -1,4 +1,4 @@
-import type { RouteLocationNormalized, RouteLocationRaw } from 'vue-router';
+import type { RouteLocationNormalized, RouteLocationRaw } from 'vue-router/auto';
 import { useSnackbar } from '@/composables/use-snackbar';
 import { i18n } from '@/plugins/i18n';
 import { remote } from '@/plugins/remote';

frontend/src/plugins/router/middlewares/login.ts

@@ -2,7 +2,7 @@ import type {
   RouteLocationNormalized,
   RouteLocationPathRaw,
   RouteLocationRaw
-} from 'vue-router';
+} from 'vue-router/auto';
 import { effectScope, watch } from 'vue';
 import { remote } from '@/plugins/remote';
 import { isNil } from '@/utils/validation';

frontend/src/plugins/router/middlewares/meta.ts

@@ -4,7 +4,7 @@ import type {
   RouteLocationNormalized,
   RouteLocationRaw,
   RouteMeta
-} from 'vue-router';
+} from 'vue-router/auto';
 
 const defaultMeta: RouteMeta = {
   layout: 'default',

frontend/src/plugins/router/middlewares/playback.ts

@@ -1,4 +1,4 @@
-import type { RouteLocationRaw } from 'vue-router';
+import type { RouteLocationRaw } from 'vue-router/auto';
 import { playbackManager } from '@/store/playback-manager';
 import { isNil } from '@/utils/validation';
 

frontend/src/plugins/router/middlewares/validate.ts

@@ -1,4 +1,4 @@
-import type { RouteLocationNormalized, RouteLocationRaw } from 'vue-router';
+import type { RouteLocationNormalized, RouteLocationRaw } from 'vue-router/auto';
 import { useSnackbar } from '@/composables/use-snackbar';
 import { i18n } from '@/plugins/i18n';
 import { isStr } from '@/utils/validation';

frontend/tsconfig.json

@@ -23,6 +23,7 @@
       "axios",
       "@intlify/unplugin-vue-i18n/messages",
       "unplugin-icons/types/vue",
+      "unplugin-vue-router/client",
       "vite/client",
       "vuetify",
       "vue"