feat: migrate to unplugin-vue-router for file-based routing

package.json

@@ -53,12 +53,13 @@
     "unocss": "^66.5.0",
     "unocss-preset-theme": "^0.14.1",
     "unplugin-icons": "^22.2.0",
+    "unplugin-vue-router": "^0.17.1",
     "vite": "^6.0.0",
     "vite-plugin-dts": "~4.5.0",
     "vite-ssg": "^28.1.0",
     "vitest": "^3.0.0",
     "vue-i18n": "^11.1.12",
-    "vue-router": "^4.5.1",
+    "vue-router": "^4.6.3",
     "vue-tsc": "^2.2.8"
   }
 }

src/main.ts

@@ -1,7 +1,7 @@
 import { ViteSSG } from 'vite-ssg'
+import { routes } from 'vue-router/auto-routes'
 import App from '@/App.vue'
 import { setupModules } from '@/modules'
-import { routes } from '@/routes'
 import 'virtual:uno.css'
 
 export const createApp = ViteSSG(

src/pages/[lang]/about-us/index.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <div>
+    About us page
+  </div>
+</template>
+
+<style scoped>
+
+</style>

src/pages/[lang]/index.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <h1 class="text-primary-500">
+    Here is home page
+  </h1>
+  <router-link :to="`/${$route.params.lang}/about-us`">
+    Go to about us page
+  </router-link>
+</template>

src/pages/index.vue

@@ -1,5 +1,20 @@
+<script setup lang="ts">
+import { onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+import index from './[lang]/index.vue'
+
+const router = useRouter()
+
+onMounted(() => {
+  // Detect user's preferred language or use default
+  const userLang = navigator.language?.split('-')[0] || 'zh' // e.g., 'en' from 'en-US'
+  const supportedLangs = ['en', 'zh']
+  const lang = supportedLangs.includes(userLang) ? userLang : 'zh' // default to zh
+
+  router.replace(`/${lang}`)
+})
+</script>
+
 <template>
-  <h1 class="text-primary-500">
-    Here is home page
-  </h1>
+  <index />
 </template>

tsconfig.app.json

@@ -3,7 +3,7 @@
   "compilerOptions": {
     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
     "paths": { "@/*": ["./src/*"] },
-    "types": ["vite/client", "unplugin-icons/types/vue"],
+    "types": ["vite/client", "unplugin-icons/types/vue", "unplugin-vue-router/client"],
 
     /* Linting */
     "strict": true,
@@ -13,5 +13,5 @@
     "erasableSyntaxOnly": true,
     "noUncheckedSideEffectImports": true
   },
-  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
+  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue", "typed-router.d.ts"]
 }

tsconfig.node.json

@@ -6,7 +6,7 @@
     "moduleDetection": "force",
     "module": "ESNext",
     "moduleResolution": "bundler",
-    "types": ["node"],
+    "types": ["node", "vite-ssg"],
     "allowImportingTsExtensions": true,
     "strict": true,
     "noFallthroughCasesInSwitch": true,

typed-router.d.ts

@@ -0,0 +1,90 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// noinspection ES6UnusedImports
+// 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.
+
+declare module 'vue-router/auto-resolver' {
+  export type ParamParserCustom = never
+}
+
+declare module 'vue-router/auto-routes' {
+  import type {
+    RouteRecordInfo,
+    ParamValue,
+    ParamValueOneOrMore,
+    ParamValueZeroOrMore,
+    ParamValueZeroOrOne,
+  } from 'vue-router'
+
+  /**
+   * Route name map generated by unplugin-vue-router
+   */
+  export interface RouteNamedMap {
+    '/': RouteRecordInfo<
+      '/',
+      '/',
+      Record<never, never>,
+      Record<never, never>,
+      | never
+    >,
+    '/[lang]/': RouteRecordInfo<
+      '/[lang]/',
+      '/:lang',
+      { lang: ParamValue<true> },
+      { lang: ParamValue<false> },
+      | never
+    >,
+    '/[lang]/about-us/': RouteRecordInfo<
+      '/[lang]/about-us/',
+      '/:lang/about-us',
+      { lang: ParamValue<true> },
+      { lang: ParamValue<false> },
+      | never
+    >,
+  }
+
+  /**
+   * Route file to route info map by unplugin-vue-router.
+   * Used by the \`sfc-typed-router\` Volar plugin to automatically type \`useRoute()\`.
+   *
+   * Each key is a file path relative to the project root with 2 properties:
+   * - routes: union of route names of the possible routes when in this page (passed to useRoute<...>())
+   * - views: names of nested views (can be passed to <RouterView name="...">)
+   *
+   * @internal
+   */
+  export interface _RouteFileInfoMap {
+    'src/pages/index.vue': {
+      routes:
+        | '/'
+      views:
+        | never
+    }
+    'src/pages/[lang]/index.vue': {
+      routes:
+        | '/[lang]/'
+      views:
+        | never
+    }
+    'src/pages/[lang]/about-us/index.vue': {
+      routes:
+        | '/[lang]/about-us/'
+      views:
+        | never
+    }
+  }
+
+  /**
+   * Get a union of possible route names in a certain route component file.
+   * Used by the \`sfc-typed-router\` Volar plugin to automatically type \`useRoute()\`.
+   *
+   * @internal
+   */
+  export type _RouteNamesForFilePath<FilePath extends string> =
+    _RouteFileInfoMap extends Record<FilePath, infer Info>
+      ? Info['routes']
+      : keyof RouteNamedMap
+}

vite.config.ts

@@ -3,6 +3,7 @@ import Vue from '@vitejs/plugin-vue'
 import UnoCss from 'unocss/vite'
 import { FileSystemIconLoader } from 'unplugin-icons/loaders'
 import Icons from 'unplugin-icons/vite'
+import VueRouter from 'unplugin-vue-router/vite'
 import { defineConfig } from 'vite'
 
 export default defineConfig(() => ({
@@ -15,6 +16,7 @@ export default defineConfig(() => ({
     host: 'localhost',
   },
   plugins: [
+    VueRouter(),
     Vue(),
     UnoCss(),
     Icons({
@@ -39,5 +41,18 @@ export default defineConfig(() => ({
   ssgOptions: {
     dirStyle: 'nested' as const,
     formatting: 'minify' as const,
+    includedRoutes(paths) {
+      // Generate routes for each language
+      const languages = ['en', 'zh']
+
+      return paths.flatMap((path) => {
+        // For dynamic routes with :lang parameter, generate one version per language
+        if (path.includes(':lang')) {
+          return languages.map((lang) => path.replace(/:lang/g, lang))
+        }
+        // For static routes, return as-is
+        return path
+      })
+    },
   },
 }))