refactor(vue-router): remove vue-router/auto usage

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

.vscode/settings.json

@@ -29,7 +29,7 @@
     "typescript"
   ],
   "eslint.format.enable": true,
-  "eslint.experimental.useFlatConfig": true,
+  "eslint.useFlatConfig": true,
   "eslint.workingDirectories": [
     {
       "mode": "auto"
@@ -50,6 +50,5 @@
     "connectionId": "jellyfin-vue",
     "projectKey": "jellyfin_jellyfin-vue"
   },
-  "typescript.preferences.autoImportFileExcludePatterns": ["vue-router$"],
   "typescript.tsserver.experimental.enableProjectDiagnostics": true
 }

frontend/package.json

@@ -16,7 +16,7 @@
     "lint-fix": "eslint . --fix --max-warnings=0 --cache --cache-location ../node_modules/.cache/eslint",
     "eslint-inspect": "eslint-config-inspector",
     "prod": "npm run build && npm run serve",
-    "typecheck": "vue-tsc --incremental",
+    "typecheck": "vue-tsc",
     "clean": "git clean -fxd"
   },
   "dependencies": {

frontend/src/App.vue

@@ -36,7 +36,7 @@
  * TODO: Remove j-transition classes from this file once https://github.com/vuejs/core/issues/5148 is fixed
  */
 import { shallowRef, type Component as VueComponent, onMounted } from 'vue';
-import type { RouteMeta } from 'vue-router/auto';
+import type { RouteMeta } from 'vue-router';
 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 { shallowRef, unref } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useRouter } from 'vue-router/auto';
+import { useRouter } from 'vue-router';
 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, shallowRef } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useRouter } from 'vue-router/auto';
+import { useRouter } from 'vue-router';
 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/auto';
+import { useRouter } from 'vue-router';
 import { remote } from '@/plugins/remote';
 import type { ServerInfo } from '@/plugins/remote/auth';
 

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/auto';
+import { useRoute, useRouter } from 'vue-router';
 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/auto';
+import { useRoute } from 'vue-router';
 import { windowScroll, isConnectedToServer } from '@/store';
 import { clientSettings } from '@/store/client-settings';
 import { remote } from '@/plugins/remote';

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

@@ -51,7 +51,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/auto';
+import { useRouter } from 'vue-router';
 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/auto';
+import { useRoute, useRouter } from 'vue-router';
 
 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/auto';
+import { useRoute } from 'vue-router';
 
 const route = useRoute();
 const opacity = computed(() => route.meta.layout.backdrop.opacity ?? 0.25);

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/auto';
+import { useRoute } from 'vue-router';
 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/auto';
+import { useRoute } from 'vue-router';
 import type { RouteNamedMap } from 'vue-router/auto-routes';
 import type { getLibraryIcon } from '@/utils/items';
 

frontend/src/main.ts

@@ -32,9 +32,7 @@ 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
+ * in components. At this stage, we're sure plugins are instantiated.
  */
 for (const route of routes) {
   router.addRoute(route);

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

@@ -152,7 +152,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/auto';
+import { useRoute } from 'vue-router';
 import { msToTicks } from '@/utils/time';
 import { defaultSortOrder as sortBy } from '@/utils/items';
 import { getBlurhash } from '@/utils/images';

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

@@ -53,7 +53,7 @@ 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/auto';
+import { useRoute } from 'vue-router';
 import { isStr } from '@/utils/validation';
 import { useResponsiveClasses } from '@/composables/use-responsive-classes';
 import { useBaseItem } from '@/composables/apis';

frontend/src/pages/index.vue

@@ -40,7 +40,7 @@ meta:
 import type { BaseItemDto } from '@jellyfin/sdk/lib/generated-client';
 import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useRoute } from 'vue-router/auto';
+import { useRoute } from 'vue-router';
 import { isNil } from '@/utils/validation';
 import { CardShapes, fetchIndexPage, getShapeFromCollectionType } from '@/utils/items';
 

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

@@ -304,7 +304,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/auto';
+import { useRoute } from 'vue-router';
 import { getItemDetailsLink, getMediaStreams } from '@/utils/items';
 import { getBlurhash } from '@/utils/images';
 import { getItemizedSelect } from '@/utils/forms';

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

@@ -72,7 +72,7 @@ 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/auto';
+import { useRoute } from 'vue-router';
 import { apiStore } from '@/store/api';
 import { methodsAsObject, useBaseItem } from '@/composables/apis';
 import type { Filters } from '@/components/Buttons/FilterButton.vue';

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

@@ -106,7 +106,7 @@
 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/auto';
+import { useRoute } from 'vue-router';
 import { getItemDetailsLink } from '@/utils/items';
 import { getBlurhash } from '@/utils/images';
 import { useBaseItem } from '@/composables/apis';

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

@@ -174,7 +174,7 @@ 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/auto';
+import { useRoute } from 'vue-router';
 import { defaultSortOrder as sortBy } from '@/utils/items';
 import { getBlurhash } from '@/utils/images';
 import { useDateFns } from '@/composables/use-datefns';

frontend/src/pages/playback/music.vue

@@ -108,7 +108,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/auto';
+import { useRoute } from 'vue-router';
 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/auto';
+import { useRoute } from 'vue-router';
 import { apiStore } from '@/store/api';
 import { useResponsiveClasses } from '@/composables/use-responsive-classes';
 import { useBaseItem } from '@/composables/apis';

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

@@ -186,7 +186,7 @@ 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/auto';
+import { useRoute } from 'vue-router';
 import { getItemDetailsLink } from '@/utils/items';
 import { getBlurhash } from '@/utils/images';
 import { useBaseItem } from '@/composables/apis';

frontend/src/pages/server/add.vue

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

frontend/src/pages/server/login.vue

@@ -98,7 +98,7 @@ meta:
 import type { UserDto } from '@jellyfin/sdk/lib/generated-client';
 import { ref, shallowRef, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useRoute, useRouter } from 'vue-router/auto';
+import { useRoute, useRouter } from 'vue-router';
 import { watchImmediate } from '@vueuse/core';
 import { remote } from '@/plugins/remote';
 import { getJSONConfig } from '@/utils/external-config';

frontend/src/pages/server/select.vue

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

frontend/src/pages/settings/index.vue

@@ -140,7 +140,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/auto';
+import { useRoute, type RouteLocationRaw } from 'vue-router';
 import { remote } from '@/plugins/remote';
 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/auto';
+import { useRoute } from 'vue-router';
 import { useTheme } from 'vuetify';
 import { remote } from '@/plugins/remote';
 import { useDateFns } from '@/composables/use-datefns';

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

@@ -319,7 +319,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/auto';
+import { useRoute, useRouter } from 'vue-router';
 import { remote } from '@/plugins/remote';
 import { useSnackbar } from '@/composables/use-snackbar';
 import { useConfirmDialog } from '@/composables/use-confirm-dialog';

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/auto';
+import { useRouter } from 'vue-router';
 import { remote } from '@/plugins/remote';
 
 const { t } = useI18n();

frontend/src/pages/wizard.vue

@@ -91,7 +91,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/auto';
+import { useRouter } from 'vue-router';
 import { useSnackbar } from '@/composables/use-snackbar';
 import { remote } from '@/plugins/remote';
 

frontend/src/plugins/router/index.ts

@@ -5,7 +5,6 @@ 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';
@@ -26,7 +25,7 @@ export const router = createRouter({
   scrollBehavior(_to, _from, savedPosition) {
     return savedPosition ?? { top: 0 };
   }
-}) as _RouterTyped<RouteNamedMap>;
+});
 
 /**
  * Middleware pipeline: The order IS IMPORTANT (meta handling should always go last)

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

@@ -1,4 +1,4 @@
-import type { RouteLocationNormalized, RouteLocationRaw } from 'vue-router/auto';
+import type { RouteLocationNormalized, RouteLocationRaw } from 'vue-router';
 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/auto';
+} from 'vue-router';
 import { effectScope } from 'vue';
 import { watchImmediate } from '@vueuse/core';
 import { remote } from '@/plugins/remote';

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

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

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

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

frontend/tsconfig.json

@@ -17,6 +17,7 @@
     "experimentalDecorators": true,
     "removeComments": true,
     "verbatimModuleSyntax": true,
+    "incremental": true,
     "tsBuildInfoFile": "../node_modules/.cache/tsconfig.tsbuildinfo",
     "baseUrl": ".",
     "paths": {

frontend/types/global/routes.d.ts

@@ -12,7 +12,7 @@ declare module 'vue-router/auto-routes' {
     ParamValueOneOrMore,
     ParamValueZeroOrMore,
     ParamValueZeroOrOne,
-  } from 'unplugin-vue-router/types'
+  } from 'vue-router'
 
   /**
    * Route name map generated by unplugin-vue-router