posva · zhangmo8 · Aug 22, 2024 · Aug 26, 2024 · Aug 22, 2024 · Aug 26, 2024
diff --git a/examples/webpack/README.md b/examples/webpack/README.md
@@ -0,0 +1 @@
+# uplugin-vue-router-webpack-example
diff --git a/examples/webpack/env.d.ts b/examples/webpack/env.d.ts
@@ -0,0 +1 @@
+/// <reference types="unplugin-vue-router/client" />
diff --git a/examples/webpack/package.json b/examples/webpack/package.json
@@ -0,0 +1,27 @@
+{
+  "name": "webpack",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "preview": "npm run build && serve -s dist"
+  },
+  "dependencies": {
+    "vue": "^3.3.4",
+    "vue-loader": "^17.4.2",
+    "vue-router": "^4.2.2"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-router": "^5.0.8",
+    "@vue/cli-plugin-typescript": "^5.0.8",
+    "typescript": "^5.5.4",
+    "unplugin-vue-router": "workspace:*"
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead",
+    "not ie 11"
+  ]
+}
diff --git a/examples/webpack/public/index.html b/examples/webpack/public/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <title><%= htmlWebpackPlugin.options.title %></title>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>
diff --git a/examples/webpack/shims-vue.d.ts b/examples/webpack/shims-vue.d.ts
@@ -0,0 +1,6 @@
+/* eslint-disable */
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}
diff --git a/examples/webpack/src/App.vue b/examples/webpack/src/App.vue
@@ -0,0 +1,18 @@
+<script lang="ts" setup>
+import { useRoute } from 'vue-router'
+
+const route = useRoute()
+</script>
+
+<template>
+  <header>
+    <div class="wrapper">
+      <mark>current page name is: {{ route.name }}</mark>
+      <nav>
+        <RouterLink to="/">Home</RouterLink>
+        <RouterLink to="/demo">Demo</RouterLink>
+      </nav>
+    </div>
+  </header>
+  <router-view></router-view>
+</template>
diff --git a/examples/webpack/src/main.ts b/examples/webpack/src/main.ts
@@ -0,0 +1,13 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+import { createWebHistory, createRouter } from 'vue-router'
+import { routes } from 'vue-router/auto-routes'
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes,
+})
+
+const app = createApp(App)
+app.use(router)
+app.mount('#app')
diff --git a/examples/webpack/src/pages/about.vue b/examples/webpack/src/pages/about.vue
@@ -0,0 +1,3 @@
+<template>
+  <main>About</main>
+</template>
diff --git a/examples/webpack/src/pages/demo/index.vue b/examples/webpack/src/pages/demo/index.vue
@@ -0,0 +1,3 @@
+<template>
+  <main>Demo</main>
+</template>
diff --git a/examples/webpack/src/pages/detail/[id].vue b/examples/webpack/src/pages/detail/[id].vue
@@ -0,0 +1,25 @@
+<script lang="ts">
+import { definePage } from 'unplugin-vue-router/runtime'
+import { useRoute } from 'vue-router/auto'
+
+export default {
+  setup() {
+    const route = useRoute()
+
+    definePage({
+      meta: {
+        iu: true,
+      },
+    })
+
+    console.log(route.meta)
+    return {
+      route,
+    }
+  },
+}
+</script>
+
+<template>
+  <main>Detail {{ route.params.id }}</main>
+</template>
diff --git a/examples/webpack/src/pages/index.vue b/examples/webpack/src/pages/index.vue
@@ -0,0 +1,9 @@
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+const msg = ref('hello world')
+</script>
+
+<template>
+  <main>Home {{ msg }}</main>
+</template>
diff --git a/examples/webpack/tsconfig.json b/examples/webpack/tsconfig.json
@@ -0,0 +1,15 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
+  "include": [
+    "./env.d.ts",
+    "shims-vue.d.ts",
+    "src/**/*",
+    "src/**/*.vue",
+    "./typed-router.d.ts"
+  ],
+  "moduleFileExtensions": ["ts", "js", "vue", "json"],
+  "compilerOptions": {
+    "moduleResolution": "Bundler",
+    "baseUrl": "../../"
+  }
+}
diff --git a/examples/webpack/typed-router.d.ts b/examples/webpack/typed-router.d.ts
@@ -0,0 +1,26 @@
+/* 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.
+
+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>>,
+    '/about': RouteRecordInfo<'/about', '/about', Record<never, never>, Record<never, never>>,
+    '/demo/': RouteRecordInfo<'/demo/', '/demo', Record<never, never>, Record<never, never>>,
+    '/detail/[id]': RouteRecordInfo<'/detail/[id]', '/detail/:id', { id: ParamValue<true> }, { id: ParamValue<false> }>,
+  }
+}
diff --git a/examples/webpack/vue.config.js b/examples/webpack/vue.config.js
@@ -0,0 +1,22 @@
+import { defineConfig } from '@vue/cli-service'
+import routerPlugin from 'unplugin-vue-router/webpack'
+
+export default defineConfig({
+  lintOnSave: false,
+  configureWebpack: {
+    plugins: [
+      routerPlugin({
+        routesFolder: './src/pages',
+      }),
+    ],
+    devServer: {
+      allowedHosts: 'all',
+    },
+    output: {
+      libraryTarget: 'module',
+    },
+    experiments: {
+      outputModule: true,
+    },
+  },
+})