fix: use virtual modules for @vue-router

package.json

@@ -51,7 +51,6 @@
   },
   "files": [
     "dist",
-    "@vue-router",
     "*.d.ts"
   ],
   "scripts": {

playground/src/routes/[name].vue

@@ -1,25 +1,28 @@
 <script lang="ts" setup>
-import { useRoute, useRouter, onBeforeRouteLeave, onBeforeRouteUpdate } from '@vue-router'
+import {
+  useRoute,
+  useRouter,
+  onBeforeRouteLeave,
+  onBeforeRouteUpdate,
+} from '@vue-router'
 import type { RouterTyped } from '@vue-router'
 
-
 const router = useRouter()
 if (router.currentRoute.value.name === '/[name]') {
   router.currentRoute.value.params.name
   // @ts-expect-error: does not exist
   router.currentRoute.value.params.id
 }
 
-onBeforeRouteUpdate(to => {
+onBeforeRouteUpdate((to) => {
   if (to.name === '/articles/[id]' && to.params.id === '2') {
     to.params.id
   }
 })
 
-
-router.resolve({ path: ''})
+router.resolve({ path: '' })
 router.resolve({ path: '/articles/:id' })
-router.resolve({name: '/[name]', params: {name: 2}}).params.name
+router.resolve({ name: '/[name]', params: { name: 2 } }).params.name
 const routeLocation = router.resolve('/articles/id')
 if (routeLocation.name === '/[name]') {
   routeLocation.params.name
@@ -34,7 +37,7 @@ if (route.name == '/articles/[id]') {
 useRoute('/multiple-[a]-[b]-params').params
 useRoute<'/[name]'>().params.name
 // @ts-expect-error: /about doesn't have params
-useRoute<'/about'>('/about').params.never}
+useRoute<'/about'>('/about').params.never
 </script>
 
 <template>

src/core/context.ts

@@ -152,6 +152,22 @@ declare module 'vue' {
 `
   }
 
+  function generateVueRouterProxy() {
+    return `
+import { routes } from '@vue-router/routes'
+import { createRouter as _createRouter } from 'vue-router'
+
+export * from 'vue-router'
+
+export function createRouter(options) {
+  return _createRouter({
+    routes,
+    ...options,
+  })
+}
+`
+  }
+
   let lastDTS: string | undefined
   async function _writeConfigFiles() {
     console.log('writing')
@@ -172,10 +188,17 @@ declare module 'vue' {
 
   setupWatcher()
 
+  function stopWatcher() {
+    serverWatcher.close()
+  }
+
   return {
     scanPages,
     writeConfigFiles,
 
+    stopWatcher,
+
     generateRoutes,
+    generateVueRouterProxy,
   }
 }

src/core/moduleConstants.ts

@@ -1,6 +1,4 @@
 export const MODULE_VUE_ROUTER = '@vue-router'
-// the id is used internally and cannot contain slashes
-export const MODULE_ROUTES_ID = `${MODULE_VUE_ROUTER}~routes`
 // the path is used by the user and having slashes is just more natural
 export const MODULE_ROUTES_PATH = `${MODULE_VUE_ROUTER}/routes`
 

src/index.ts

@@ -1,7 +1,7 @@
 import { createUnplugin } from 'unplugin'
 import { createRoutesContext } from './core/context'
 import {
-  MODULE_ROUTES_ID,
+  MODULE_ROUTES_PATH,
   MODULE_VUE_ROUTER,
   VIRTUAL_PREFIX,
 } from './core/moduleConstants'
@@ -30,13 +30,14 @@ export default createUnplugin<Options>((opt) => {
     enforce: 'pre',
 
     resolveId(id) {
-      if (id === MODULE_ROUTES_ID) {
+      if (id === MODULE_ROUTES_PATH) {
         // virtual module
         return asVirtualId(id)
       }
       // NOTE: it wasn't possible to override or add new exports to vue-router
+      // so we need to override it with a different package name
       if (id === MODULE_VUE_ROUTER) {
-        return 'unplugin-vue-router/@vue-router/index.js'
+        return asVirtualId(id)
       }
       return null
     },
@@ -45,12 +46,22 @@ export default createUnplugin<Options>((opt) => {
       return ctx.scanPages()
     },
 
+    buildEnd() {
+      ctx.stopWatcher()
+    },
+
     load(id) {
       const resolvedId = getVirtualId(id)
-      if (resolvedId === MODULE_ROUTES_ID) {
+      if (resolvedId === MODULE_ROUTES_PATH) {
         return ctx.generateRoutes()
       }
 
+      // we need to use a virtual module so that vite resolves the @vue-router/routes
+      // dependency correctly
+      if (resolvedId === MODULE_VUE_ROUTER) {
+        return ctx.generateVueRouterProxy()
+      }
+
       // fallback
       return null
     },