revert: remove unplugin-vue-router

package.json

@@ -21,7 +21,7 @@
     "@vueuse/core": "^10.2.1",
     "@vueuse/head": "^1.1.26",
     "nprogress": "^0.2.0",
-    "rollup": "^3.26.3",
+    "rollup": "^3.27.0",
     "vite-plugin-vuetify": "^1.0.2",
     "vue": "^3.3.4",
     "vue-demi": "^0.14.5",
@@ -43,7 +43,7 @@
     "critters": "^0.0.16",
     "cross-env": "^7.0.3",
     "cypress": "^12.17.2",
-    "eslint": "^8.45.0",
+    "eslint": "^8.46.0",
     "eslint-plugin-cypress": "^2.13.3",
     "https-localhost": "^4.7.1",
     "markdown-it-link-attributes": "^4.0.1",
@@ -56,9 +56,9 @@
     "unplugin-auto-import": "^0.16.6",
     "unplugin-vue-components": "^0.25.1",
     "unplugin-vue-macros": "^2.4.0",
-    "unplugin-vue-router": "^0.6.4",
     "vite": "^4.4.7",
     "vite-plugin-inspect": "^0.7.33",
+    "vite-plugin-pages": "^0.31.0",
     "vite-plugin-vue-component-preview": "^1.1.6",
     "vite-plugin-vue-inspector": "^3.5.0",
     "vite-plugin-vue-markdown": "^0.23.7",

src/auto-imports.d.ts

@@ -36,8 +36,6 @@ declare global {
   const debouncedWatch: typeof import('@vueuse/core')['debouncedWatch']
   const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
   const defineComponent: typeof import('vue')['defineComponent']
-  const defineLoader: typeof import('vue-router/auto')['defineLoader']
-  const definePage: typeof import('unplugin-vue-router/runtime')['_definePage']
   const eagerComputed: typeof import('@vueuse/core')['eagerComputed']
   const effectScope: typeof import('vue')['effectScope']
   const extendRef: typeof import('@vueuse/core')['extendRef']
@@ -56,8 +54,8 @@ declare global {
   const nextTick: typeof import('vue')['nextTick']
   const onActivated: typeof import('vue')['onActivated']
   const onBeforeMount: typeof import('vue')['onBeforeMount']
-  const onBeforeRouteLeave: typeof import('vue-router/auto')['onBeforeRouteLeave']
+  const onBeforeRouteLeave: typeof import('vue-router')['onBeforeRouteLeave']
-  const onBeforeRouteUpdate: typeof import('vue-router/auto')['onBeforeRouteUpdate']
+  const onBeforeRouteUpdate: typeof import('vue-router')['onBeforeRouteUpdate']
   const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
   const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
   const onClickOutside: typeof import('@vueuse/core')['onClickOutside']
@@ -226,8 +224,8 @@ declare global {
   const useRafFn: typeof import('@vueuse/core')['useRafFn']
   const useRefHistory: typeof import('@vueuse/core')['useRefHistory']
   const useResizeObserver: typeof import('@vueuse/core')['useResizeObserver']
-  const useRoute: typeof import('vue-router/auto')['useRoute']
+  const useRoute: typeof import('vue-router')['useRoute']
-  const useRouter: typeof import('vue-router/auto')['useRouter']
+  const useRouter: typeof import('vue-router')['useRouter']
   const useScreenOrientation: typeof import('@vueuse/core')['useScreenOrientation']
   const useScreenSafeArea: typeof import('@vueuse/core')['useScreenSafeArea']
   const useScriptTag: typeof import('@vueuse/core')['useScriptTag']
@@ -334,8 +332,6 @@ declare module 'vue' {
     readonly debouncedWatch: UnwrapRef<typeof import('@vueuse/core')['debouncedWatch']>
     readonly defineAsyncComponent: UnwrapRef<typeof import('vue')['defineAsyncComponent']>
     readonly defineComponent: UnwrapRef<typeof import('vue')['defineComponent']>
-    readonly defineLoader: UnwrapRef<typeof import('vue-router/auto')['defineLoader']>
-    readonly definePage: UnwrapRef<typeof import('unplugin-vue-router/runtime')['_definePage']>
     readonly eagerComputed: UnwrapRef<typeof import('@vueuse/core')['eagerComputed']>
     readonly effectScope: UnwrapRef<typeof import('vue')['effectScope']>
     readonly extendRef: UnwrapRef<typeof import('@vueuse/core')['extendRef']>
@@ -354,8 +350,8 @@ declare module 'vue' {
     readonly nextTick: UnwrapRef<typeof import('vue')['nextTick']>
     readonly onActivated: UnwrapRef<typeof import('vue')['onActivated']>
     readonly onBeforeMount: UnwrapRef<typeof import('vue')['onBeforeMount']>
-    readonly onBeforeRouteLeave: UnwrapRef<typeof import('vue-router/auto')['onBeforeRouteLeave']>
+    readonly onBeforeRouteLeave: UnwrapRef<typeof import('vue-router')['onBeforeRouteLeave']>
-    readonly onBeforeRouteUpdate: UnwrapRef<typeof import('vue-router/auto')['onBeforeRouteUpdate']>
+    readonly onBeforeRouteUpdate: UnwrapRef<typeof import('vue-router')['onBeforeRouteUpdate']>
     readonly onBeforeUnmount: UnwrapRef<typeof import('vue')['onBeforeUnmount']>
     readonly onBeforeUpdate: UnwrapRef<typeof import('vue')['onBeforeUpdate']>
     readonly onClickOutside: UnwrapRef<typeof import('@vueuse/core')['onClickOutside']>
@@ -488,6 +484,7 @@ declare module 'vue' {
     readonly useIntervalFn: UnwrapRef<typeof import('@vueuse/core')['useIntervalFn']>
     readonly useKeyModifier: UnwrapRef<typeof import('@vueuse/core')['useKeyModifier']>
     readonly useLastChanged: UnwrapRef<typeof import('@vueuse/core')['useLastChanged']>
+    readonly useLink: UnwrapRef<typeof import('vue-router')['useLink']>
     readonly useLocalStorage: UnwrapRef<typeof import('@vueuse/core')['useLocalStorage']>
     readonly useMagicKeys: UnwrapRef<typeof import('@vueuse/core')['useMagicKeys']>
     readonly useManualRefHistory: UnwrapRef<typeof import('@vueuse/core')['useManualRefHistory']>
@@ -523,8 +520,8 @@ declare module 'vue' {
     readonly useRafFn: UnwrapRef<typeof import('@vueuse/core')['useRafFn']>
     readonly useRefHistory: UnwrapRef<typeof import('@vueuse/core')['useRefHistory']>
     readonly useResizeObserver: UnwrapRef<typeof import('@vueuse/core')['useResizeObserver']>
-    readonly useRoute: UnwrapRef<typeof import('vue-router/auto')['useRoute']>
+    readonly useRoute: UnwrapRef<typeof import('vue-router')['useRoute']>
-    readonly useRouter: UnwrapRef<typeof import('vue-router/auto')['useRouter']>
+    readonly useRouter: UnwrapRef<typeof import('vue-router')['useRouter']>
     readonly useScreenOrientation: UnwrapRef<typeof import('@vueuse/core')['useScreenOrientation']>
     readonly useScreenSafeArea: UnwrapRef<typeof import('@vueuse/core')['useScreenSafeArea']>
     readonly useScriptTag: UnwrapRef<typeof import('@vueuse/core')['useScriptTag']>
@@ -625,8 +622,6 @@ declare module '@vue/runtime-core' {
     readonly debouncedWatch: UnwrapRef<typeof import('@vueuse/core')['debouncedWatch']>
     readonly defineAsyncComponent: UnwrapRef<typeof import('vue')['defineAsyncComponent']>
     readonly defineComponent: UnwrapRef<typeof import('vue')['defineComponent']>
-    readonly defineLoader: UnwrapRef<typeof import('vue-router/auto')['defineLoader']>
-    readonly definePage: UnwrapRef<typeof import('unplugin-vue-router/runtime')['_definePage']>
     readonly eagerComputed: UnwrapRef<typeof import('@vueuse/core')['eagerComputed']>
     readonly effectScope: UnwrapRef<typeof import('vue')['effectScope']>
     readonly extendRef: UnwrapRef<typeof import('@vueuse/core')['extendRef']>
@@ -645,8 +640,8 @@ declare module '@vue/runtime-core' {
     readonly nextTick: UnwrapRef<typeof import('vue')['nextTick']>
     readonly onActivated: UnwrapRef<typeof import('vue')['onActivated']>
     readonly onBeforeMount: UnwrapRef<typeof import('vue')['onBeforeMount']>
-    readonly onBeforeRouteLeave: UnwrapRef<typeof import('vue-router/auto')['onBeforeRouteLeave']>
+    readonly onBeforeRouteLeave: UnwrapRef<typeof import('vue-router')['onBeforeRouteLeave']>
-    readonly onBeforeRouteUpdate: UnwrapRef<typeof import('vue-router/auto')['onBeforeRouteUpdate']>
+    readonly onBeforeRouteUpdate: UnwrapRef<typeof import('vue-router')['onBeforeRouteUpdate']>
     readonly onBeforeUnmount: UnwrapRef<typeof import('vue')['onBeforeUnmount']>
     readonly onBeforeUpdate: UnwrapRef<typeof import('vue')['onBeforeUpdate']>
     readonly onClickOutside: UnwrapRef<typeof import('@vueuse/core')['onClickOutside']>
@@ -779,6 +774,7 @@ declare module '@vue/runtime-core' {
     readonly useIntervalFn: UnwrapRef<typeof import('@vueuse/core')['useIntervalFn']>
     readonly useKeyModifier: UnwrapRef<typeof import('@vueuse/core')['useKeyModifier']>
     readonly useLastChanged: UnwrapRef<typeof import('@vueuse/core')['useLastChanged']>
+    readonly useLink: UnwrapRef<typeof import('vue-router')['useLink']>
     readonly useLocalStorage: UnwrapRef<typeof import('@vueuse/core')['useLocalStorage']>
     readonly useMagicKeys: UnwrapRef<typeof import('@vueuse/core')['useMagicKeys']>
     readonly useManualRefHistory: UnwrapRef<typeof import('@vueuse/core')['useManualRefHistory']>
@@ -814,8 +810,8 @@ declare module '@vue/runtime-core' {
     readonly useRafFn: UnwrapRef<typeof import('@vueuse/core')['useRafFn']>
     readonly useRefHistory: UnwrapRef<typeof import('@vueuse/core')['useRefHistory']>
     readonly useResizeObserver: UnwrapRef<typeof import('@vueuse/core')['useResizeObserver']>
-    readonly useRoute: UnwrapRef<typeof import('vue-router/auto')['useRoute']>
+    readonly useRoute: UnwrapRef<typeof import('vue-router')['useRoute']>
-    readonly useRouter: UnwrapRef<typeof import('vue-router/auto')['useRouter']>
+    readonly useRouter: UnwrapRef<typeof import('vue-router')['useRouter']>
     readonly useScreenOrientation: UnwrapRef<typeof import('@vueuse/core')['useScreenOrientation']>
     readonly useScreenSafeArea: UnwrapRef<typeof import('@vueuse/core')['useScreenSafeArea']>
     readonly useScriptTag: UnwrapRef<typeof import('@vueuse/core')['useScriptTag']>

src/main.ts

@@ -1,19 +1,21 @@
 import { ViteSSG } from 'vite-ssg'
 import { setupLayouts } from 'virtual:meta-layouts'
 
-import { routes } from 'vue-router/auto/routes'
 import App from './App.vue'
 import type { UserModule } from './types'
 import vuetify from './plugins/vuetify'
+import generatedRoutes from '~pages'
 
 import '@unocss/reset/tailwind.css'
 import './styles/main.css'
 import 'uno.css'
 
+const routes = setupLayouts(generatedRoutes)
+
 // https://github.com/antfu/vite-ssg
 export const createApp = ViteSSG(
   App,
-  { routes: setupLayouts(routes), base: import.meta.env.BASE_URL },
+  { routes, base: import.meta.env.BASE_URL },
   (ctx) => {
     // install all modules under `modules/`
     Object.values(import.meta.glob<{ install: UserModule }>('./modules/*.ts', { eager: true }))

src/typed-router.d.ts

@@ -1,147 +0,0 @@
-/* eslint-disable */
-/* prettier-ignore */
-// @ts-nocheck
-// Generated by unplugin-vue-router. ‼️ DO NOT MODIFY THIS FILE ‼️
-// It's recommended to commit this file.
-// Make sure to add this file to your tsconfig.json file as an "includes" or "files" entry.
-
-/// <reference types="unplugin-vue-router/client" />
-
-import type {
-  // type safe route locations
-  RouteLocationTypedList,
-  RouteLocationResolvedTypedList,
-  RouteLocationNormalizedTypedList,
-  RouteLocationNormalizedLoadedTypedList,
-  RouteLocationAsString,
-  RouteLocationAsRelativeTypedList,
-  RouteLocationAsPathTypedList,
-
-  // helper types
-  // route definitions
-  RouteRecordInfo,
-  ParamValue,
-  ParamValueOneOrMore,
-  ParamValueZeroOrMore,
-  ParamValueZeroOrOne,
-
-  // vue-router extensions
-  _RouterTyped,
-  RouterLinkTyped,
-  RouterLinkPropsTyped,
-  NavigationGuard,
-  UseLinkFnTyped,
-
-  // data fetching
-  _DataLoader,
-  _DefineLoaderOptions,
-} from 'unplugin-vue-router/types'
-
-declare module 'vue-router/auto/routes' {
-  export interface RouteNamedMap {
-    '/': RouteRecordInfo<'/', '/', Record<never, never>, Record<never, never>>,
-    '/[...all]': RouteRecordInfo<'/[...all]', '/:all(.*)', { all: ParamValue<true> }, { all: ParamValue<false> }>,
-    '/about': RouteRecordInfo<'/about', '/about', Record<never, never>, Record<never, never>>,
-    '/events': RouteRecordInfo<'/events', '/events', Record<never, never>, Record<never, never>>,
-    '/posts/': RouteRecordInfo<'/posts/', '/posts', Record<never, never>, Record<never, never>>,
-    '/posts/contribute': RouteRecordInfo<'/posts/contribute', '/posts/contribute', Record<never, never>, Record<never, never>>,
-    '/teachers/': RouteRecordInfo<'/teachers/', '/teachers', Record<never, never>, Record<never, never>>,
-  }
-}
-
-declare module 'vue-router/auto' {
-  import type { RouteNamedMap } from 'vue-router/auto/routes'
-
-  export type RouterTyped = _RouterTyped<RouteNamedMap>
-
-  /**
-   * Type safe version of `RouteLocationNormalized` (the type of `to` and `from` in navigation guards).
-   * Allows passing the name of the route to be passed as a generic.
-   */
-  export type RouteLocationNormalized<Name extends keyof RouteNamedMap = keyof RouteNamedMap> = RouteLocationNormalizedTypedList<RouteNamedMap>[Name]
-
-  /**
-   * Type safe version of `RouteLocationNormalizedLoaded` (the return type of `useRoute()`).
-   * Allows passing the name of the route to be passed as a generic.
-   */
-  export type RouteLocationNormalizedLoaded<Name extends keyof RouteNamedMap = keyof RouteNamedMap> = RouteLocationNormalizedLoadedTypedList<RouteNamedMap>[Name]
-
-  /**
-   * Type safe version of `RouteLocationResolved` (the returned route of `router.resolve()`).
-   * Allows passing the name of the route to be passed as a generic.
-   */
-  export type RouteLocationResolved<Name extends keyof RouteNamedMap = keyof RouteNamedMap> = RouteLocationResolvedTypedList<RouteNamedMap>[Name]
-
-  /**
-   * Type safe version of `RouteLocation` . Allows passing the name of the route to be passed as a generic.
-   */
-  export type RouteLocation<Name extends keyof RouteNamedMap = keyof RouteNamedMap> = RouteLocationTypedList<RouteNamedMap>[Name]
-
-  /**
-   * Type safe version of `RouteLocationRaw` . Allows passing the name of the route to be passed as a generic.
-   */
-  export type RouteLocationRaw<Name extends keyof RouteNamedMap = keyof RouteNamedMap> =
-    | RouteLocationAsString<RouteNamedMap>
-    | RouteLocationAsRelativeTypedList<RouteNamedMap>[Name]
-    | RouteLocationAsPathTypedList<RouteNamedMap>[Name]
-
-  /**
-   * Generate a type safe params for a route location. Requires the name of the route to be passed as a generic.
-   */
-  export type RouteParams<Name extends keyof RouteNamedMap> = RouteNamedMap[Name]['params']
-  /**
-   * Generate a type safe raw params for a route location. Requires the name of the route to be passed as a generic.
-   */
-  export type RouteParamsRaw<Name extends keyof RouteNamedMap> = RouteNamedMap[Name]['paramsRaw']
-
-  export function useRouter(): RouterTyped
-  export function useRoute<Name extends keyof RouteNamedMap = keyof RouteNamedMap>(name?: Name): RouteLocationNormalizedLoadedTypedList<RouteNamedMap>[Name]
-
-  export const useLink: UseLinkFnTyped<RouteNamedMap>
-
-  export function onBeforeRouteLeave(guard: NavigationGuard<RouteNamedMap>): void
-  export function onBeforeRouteUpdate(guard: NavigationGuard<RouteNamedMap>): void
-
-  export const RouterLink: RouterLinkTyped<RouteNamedMap>
-  export const RouterLinkProps: RouterLinkPropsTyped<RouteNamedMap>
-
-  // Experimental Data Fetching
-
-  export function defineLoader<
-    P extends Promise<any>,
-    Name extends keyof RouteNamedMap = keyof RouteNamedMap,
-    isLazy extends boolean = false,
-  >(
-    name: Name,
-    loader: (route: RouteLocationNormalizedLoaded<Name>) => P,
-    options?: _DefineLoaderOptions<isLazy>,
-  ): _DataLoader<Awaited<P>, isLazy>
-  export function defineLoader<
-    P extends Promise<any>,
-    isLazy extends boolean = false,
-  >(
-    loader: (route: RouteLocationNormalizedLoaded) => P,
-    options?: _DefineLoaderOptions<isLazy>,
-  ): _DataLoader<Awaited<P>, isLazy>
-
-  export {
-    _definePage as definePage,
-    _HasDataLoaderMeta as HasDataLoaderMeta,
-    _setupDataFetchingGuard as setupDataFetchingGuard,
-    _stopDataFetchingScope as stopDataFetchingScope,
-  } from 'unplugin-vue-router/runtime'
-}
-
-declare module 'vue-router' {
-  import type { RouteNamedMap } from 'vue-router/auto/routes'
-
-  export interface TypesConfig {
-    beforeRouteUpdate: NavigationGuard<RouteNamedMap>
-    beforeRouteLeave: NavigationGuard<RouteNamedMap>
-
-    $route: RouteLocationNormalizedLoadedTypedList<RouteNamedMap>[keyof RouteNamedMap]
-    $router: _RouterTyped<RouteNamedMap>
-
-    RouterLink: RouterLinkTyped<RouteNamedMap>
-  }
-}

tsconfig.json

@@ -20,6 +20,7 @@
       "vue/ref-macros",
       "vite-plugin-vue-component-preview/client",
       // "vite-plugin-vue-layouts/client",
+      "vite-plugin-pages/client",
       "unplugin-vue-macros/macros-global",
       "vite-plugin-vue-meta-layouts/client.d.ts"
     ],

vite.config.ts

@@ -1,14 +1,13 @@
 import path from 'node:path'
 import { defineConfig } from 'vite'
 import Vue from '@vitejs/plugin-vue'
+import Pages from 'vite-plugin-pages'
 import generateSitemap from 'vite-ssg-sitemap'
 
 // import Layouts from 'vite-plugin-vue-layouts'
 import MetaLayouts from 'vite-plugin-vue-meta-layouts'
 import Components from 'unplugin-vue-components/vite'
-import VueRouter from 'unplugin-vue-router/vite'
 import AutoImport from 'unplugin-auto-import/vite'
-import { VueRouterAutoImports } from 'unplugin-vue-router'
 import Markdown from 'vite-plugin-vue-markdown'
 import VueI18n from '@intlify/unplugin-vue-i18n/vite'
 import Inspect from 'vite-plugin-inspect'
@@ -37,6 +36,15 @@ export default defineConfig({
       },
     }),
 
+    // https://github.com/hannoeru/vite-plugin-pages
+    Pages({
+      extensions: ['vue', 'md'],
+      dirs: [
+        { dir: 'src/pages', baseRoute: '' },
+        { dir: 'src/posts', baseRoute: 'posts' },
+      ],
+    }),
+
     // https://github.com/JohnCampionJr/vite-plugin-vue-layouts
     MetaLayouts(),
 
@@ -44,11 +52,11 @@ export default defineConfig({
     AutoImport({
       imports: [
         'vue',
+        'vue-router',
         'vue-i18n',
         'vue/macros',
         '@vueuse/head',
         '@vueuse/core',
-        VueRouterAutoImports,
       ],
       dts: 'src/auto-imports.d.ts',
       dirs: ['src/composables'],
@@ -108,15 +116,6 @@ export default defineConfig({
     }),
 
     vuetify({ autoImport: true }),
-
-    VueRouter({
-      extensions: ['.vue', '.md'],
-      dts: 'src/typed-router.d.ts',
-      routesFolder: [
-        'src/pages',
-        { src: 'src/posts', path: 'posts/' },
-      ],
-    }),
   ],
 
   // https://github.com/vitest-dev/vitest