pref(router): add unplugin-vue-router

package.json

@@ -16,56 +16,56 @@
     "up": "taze major -I"
   },
   "dependencies": {
-    "@unocss/preset-typography": "^0.53.3",
+    "@unocss/preset-typography": "^0.53.6",
-    "@unocss/reset": "^0.53.3",
+    "@unocss/reset": "^0.53.6",
-    "@vueuse/core": "^10.2.0",
+    "@vueuse/core": "^10.2.1",
     "@vueuse/head": "^1.1.26",
     "nprogress": "^0.2.0",
-    "rollup": "^3.2.0",
+    "rollup": "^3.26.3",
     "vite-plugin-vuetify": "^1.0.2",
     "vue": "^3.3.4",
     "vue-demi": "^0.14.5",
-    "vue-i18n": "^9.3.0-beta.19",
+    "vue-i18n": "9.3.0-beta.14-77e850b",
-    "vue-router": "^4.2.2",
+    "vue-router": "^4.2.4",
-    "vuetify": "^3.3.5"
+    "vuetify": "^3.3.10"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^0.39.5",
+    "@antfu/eslint-config": "^0.39.8",
     "@iconify-json/carbon": "^1.1.18",
-    "@iconify-json/simple-icons": "^1.1.57",
+    "@iconify-json/simple-icons": "^1.1.62",
     "@intlify/unplugin-vue-i18n": "^0.11.0",
     "@mdi/font": "^7.2.96",
     "@types/markdown-it-link-attributes": "^3.0.1",
     "@types/nprogress": "^0.2.0",
     "@vitejs/plugin-vue": "^4.2.3",
-    "@vue-macros/volar": "^0.11.0",
+    "@vue-macros/volar": "^0.11.2",
-    "@vue/test-utils": "^2.4.0",
+    "@vue/test-utils": "^2.4.1",
     "critters": "^0.0.16",
     "cross-env": "^7.0.3",
-    "cypress": "^12.15.0",
+    "cypress": "^12.17.2",
-    "eslint": "^8.43.0",
+    "eslint": "^8.45.0",
     "eslint-plugin-cypress": "^2.13.3",
     "https-localhost": "^4.7.1",
     "markdown-it-link-attributes": "^4.0.1",
     "markdown-it-shiki": "^0.9.0",
-    "pnpm": "^7.33.2",
+    "pnpm": "^7.33.5",
-    "shiki": "^0.14.2",
+    "shiki": "^0.14.3",
-    "taze": "^0.10.2",
+    "taze": "^0.10.3",
-    "typescript": "^5.1.3",
+    "typescript": "^5.1.6",
-    "unocss": "^0.53.3",
+    "unocss": "^0.53.6",
-    "unplugin-auto-import": "^0.16.4",
+    "unplugin-auto-import": "^0.16.6",
     "unplugin-vue-components": "^0.25.1",
-    "unplugin-vue-macros": "^2.3.0",
+    "unplugin-vue-macros": "^2.4.0",
-    "vite": "^4.3.9",
+    "unplugin-vue-router": "^0.6.4",
-    "vite-plugin-inspect": "^0.7.28",
+    "vite": "^4.4.7",
-    "vite-plugin-pages": "^0.31.0",
+    "vite-plugin-inspect": "^0.7.33",
     "vite-plugin-vue-component-preview": "^1.1.6",
-    "vite-plugin-vue-inspector": "^3.4.2",
+    "vite-plugin-vue-inspector": "^3.5.0",
-    "vite-plugin-vue-markdown": "^0.23.5",
+    "vite-plugin-vue-markdown": "^0.23.7",
     "vite-plugin-vue-meta-layouts": "^0.2.2",
     "vite-ssg": "^0.22.2",
     "vite-ssg-sitemap": "^0.5.1",
-    "vitest": "^0.32.2",
+    "vitest": "^0.32.4",
-    "vue-tsc": "^1.8.1"
+    "vue-tsc": "^1.8.8"
   }
 }

src/auto-imports.d.ts

@@ -1,6 +1,7 @@
 /* eslint-disable */
 /* prettier-ignore */
 // @ts-nocheck
+// noinspection JSUnusedGlobalSymbols
 // Generated by unplugin-auto-import
 export {}
 declare global {
@@ -35,6 +36,8 @@ 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']
@@ -53,8 +56,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')['onBeforeRouteLeave']
+  const onBeforeRouteLeave: typeof import('vue-router/auto')['onBeforeRouteLeave']
-  const onBeforeRouteUpdate: typeof import('vue-router')['onBeforeRouteUpdate']
+  const onBeforeRouteUpdate: typeof import('vue-router/auto')['onBeforeRouteUpdate']
   const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
   const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
   const onClickOutside: typeof import('@vueuse/core')['onClickOutside']
@@ -223,8 +226,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')['useRoute']
+  const useRoute: typeof import('vue-router/auto')['useRoute']
-  const useRouter: typeof import('vue-router')['useRouter']
+  const useRouter: typeof import('vue-router/auto')['useRouter']
   const useScreenOrientation: typeof import('@vueuse/core')['useScreenOrientation']
   const useScreenSafeArea: typeof import('@vueuse/core')['useScreenSafeArea']
   const useScriptTag: typeof import('@vueuse/core')['useScriptTag']
@@ -331,6 +334,8 @@ 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']>
@@ -349,8 +354,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')['onBeforeRouteLeave']>
+    readonly onBeforeRouteLeave: UnwrapRef<typeof import('vue-router/auto')['onBeforeRouteLeave']>
-    readonly onBeforeRouteUpdate: UnwrapRef<typeof import('vue-router')['onBeforeRouteUpdate']>
+    readonly onBeforeRouteUpdate: UnwrapRef<typeof import('vue-router/auto')['onBeforeRouteUpdate']>
     readonly onBeforeUnmount: UnwrapRef<typeof import('vue')['onBeforeUnmount']>
     readonly onBeforeUpdate: UnwrapRef<typeof import('vue')['onBeforeUpdate']>
     readonly onClickOutside: UnwrapRef<typeof import('@vueuse/core')['onClickOutside']>
@@ -483,7 +488,6 @@ 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']>
@@ -519,8 +523,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')['useRoute']>
+    readonly useRoute: UnwrapRef<typeof import('vue-router/auto')['useRoute']>
-    readonly useRouter: UnwrapRef<typeof import('vue-router')['useRouter']>
+    readonly useRouter: UnwrapRef<typeof import('vue-router/auto')['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']>
@@ -621,6 +625,8 @@ 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']>
@@ -639,8 +645,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')['onBeforeRouteLeave']>
+    readonly onBeforeRouteLeave: UnwrapRef<typeof import('vue-router/auto')['onBeforeRouteLeave']>
-    readonly onBeforeRouteUpdate: UnwrapRef<typeof import('vue-router')['onBeforeRouteUpdate']>
+    readonly onBeforeRouteUpdate: UnwrapRef<typeof import('vue-router/auto')['onBeforeRouteUpdate']>
     readonly onBeforeUnmount: UnwrapRef<typeof import('vue')['onBeforeUnmount']>
     readonly onBeforeUpdate: UnwrapRef<typeof import('vue')['onBeforeUpdate']>
     readonly onClickOutside: UnwrapRef<typeof import('@vueuse/core')['onClickOutside']>
@@ -773,7 +779,6 @@ 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']>
@@ -809,8 +814,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')['useRoute']>
+    readonly useRoute: UnwrapRef<typeof import('vue-router/auto')['useRoute']>
-    readonly useRouter: UnwrapRef<typeof import('vue-router')['useRouter']>
+    readonly useRouter: UnwrapRef<typeof import('vue-router/auto')['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

@@ -4,18 +4,16 @@ import { setupLayouts } from 'virtual:meta-layouts'
 import App from './App.vue'
 import type { UserModule } from './types'
 import vuetify from './plugins/vuetify'
-import generatedRoutes from '~pages'
+import { routes } from 'vue-router/auto/routes'
 
 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, base: import.meta.env.BASE_URL },
+  { routes: setupLayouts(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

@@ -0,0 +1,148 @@
+/* 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>>,
+    '/posts/test': RouteRecordInfo<'/posts/test', '/posts/test', 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>
+  }
+}

vite.config.ts

@@ -1,13 +1,14 @@
 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'
@@ -36,15 +37,6 @@ 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(),
 
@@ -52,11 +44,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'],
@@ -116,6 +108,15 @@ 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