fix(nuxt): add #vue-router alias for backwards compat (#27896)

packages/nuxt/src/core/nuxt.ts

@@ -1,6 +1,6 @@
 import { existsSync } from 'node:fs'
 import { rm } from 'node:fs/promises'
-import { dirname, join, normalize, relative, resolve } from 'pathe'
+import { join, normalize, relative, resolve } from 'pathe'
 import { createDebugger, createHooks } from 'hookable'
 import ignore from 'ignore'
 import type { LoadNuxtOptions } from '@nuxt/kit'
@@ -8,7 +8,7 @@ import { addBuildPlugin, addComponent, addPlugin, addRouteMiddleware, addServerP
 import { resolvePath as _resolvePath } from 'mlly'
 import type { Nuxt, NuxtHooks, NuxtModule, NuxtOptions } from 'nuxt/schema'
 import type { PackageJson } from 'pkg-types'
-import { readPackageJSON, resolvePackageJSON } from 'pkg-types'
+import { readPackageJSON } from 'pkg-types'
 import { hash } from 'ohash'
 import consola from 'consola'
 import { colorize } from 'consola/utils'
@@ -30,6 +30,7 @@ import importsModule from '../imports/module'
 import { distDir, pkgDir } from '../dirs'
 import { version } from '../../package.json'
 import { scriptsStubsPreset } from '../imports/presets'
+import { resolveTypePath } from './utils/types'
 import { ImportProtectionPlugin, nuxtImportProtections } from './plugins/import-protection'
 import type { UnctxTransformPluginOptions } from './plugins/unctx'
 import { UnctxTransformPlugin } from './plugins/unctx'
@@ -170,29 +171,16 @@ async function initNuxt (nuxt: Nuxt) {
     // ignore packages that exist in `package.json` as these can be resolved by TypeScript
     if (dependencies.has(_pkg) && !(_pkg in nightlies)) { return [] }
 
-    async function resolveTypePath (path: string) {
-      try {
-        const r = await _resolvePath(path, { url: nuxt.options.modulesDir, conditions: ['types', 'import', 'require'] })
-        if (subpath) {
-          return r.replace(/(?:\.d)?\.[mc]?[jt]s$/, '')
-        }
-        const rootPath = await resolvePackageJSON(r)
-        return dirname(rootPath)
-      } catch {
-        return null
-      }
-    }
-
     // deduplicate types for nightly releases
     if (_pkg in nightlies) {
       const nightly = nightlies[_pkg as keyof typeof nightlies]
-      const path = await resolveTypePath(nightly + subpath)
+      const path = await resolveTypePath(nightly + subpath, subpath, nuxt.options.modulesDir)
       if (path) {
         return [[pkg, [path]], [nightly + subpath, [path]]]
       }
     }
 
-    const path = await resolveTypePath(_pkg + subpath)
+    const path = await resolveTypePath(_pkg + subpath, subpath, nuxt.options.modulesDir)
     if (path) {
       return [[pkg, [path]]]
     }

packages/nuxt/src/core/utils/types.ts

@@ -0,0 +1,17 @@
+import { resolvePackageJSON } from 'pkg-types'
+import { resolvePath as _resolvePath } from 'mlly'
+import { dirname } from 'pathe'
+import { tryUseNuxt } from '@nuxt/kit'
+
+export async function resolveTypePath (path: string, subpath: string, searchPaths = tryUseNuxt()?.options.modulesDir) {
+  try {
+    const r = await _resolvePath(path, { url: searchPaths, conditions: ['types', 'import', 'require'] })
+    if (subpath) {
+      return r.replace(/(?:\.d)?\.[mc]?[jt]s$/, '')
+    }
+    const rootPath = await resolvePackageJSON(r)
+    return dirname(rootPath)
+  } catch {
+    return null
+  }
+}

packages/nuxt/src/pages/module.ts

@@ -11,6 +11,7 @@ import type { EditableTreeNode, Options as TypedRouterOptions } from 'unplugin-v
 import type { NitroRouteConfig } from 'nitropack'
 import { defu } from 'defu'
 import { distDir } from '../dirs'
+import { resolveTypePath } from '../core/utils/types'
 import { normalizeRoutes, resolvePagesRoutes, resolveRoutePaths } from './utils'
 import { extractRouteRules, getMappedPages } from './route-rules'
 import type { PageMetaPluginOptions } from './plugins/page-meta'
@@ -28,6 +29,15 @@ export default defineNuxtModule({
       layer => resolve(layer.config.srcDir, (layer.config.rootDir === nuxt.options.rootDir ? nuxt.options : layer.config).dir?.pages || 'pages'),
     )
 
+    nuxt.options.alias['#vue-router'] = 'vue-router'
+    const routerPath = await resolveTypePath('vue-router', '', nuxt.options.modulesDir) || 'vue-router'
+    nuxt.hook('prepare:types', ({ tsConfig }) => {
+      tsConfig.compilerOptions ||= {}
+      tsConfig.compilerOptions.paths ||= {}
+      tsConfig.compilerOptions.paths['#vue-router'] = [routerPath]
+      delete tsConfig.compilerOptions.paths['#vue-router/*']
+    })
+
     async function resolveRouterOptions () {
       const context = {
         files: [] as Array<{ path: string, optional?: boolean }>,