feat(nuxt): prefetch middleware/layouts + await layout loading (#10155)

Author: atinux

packages/nuxt/src/pages/module.ts

@@ -140,8 +140,11 @@ export default defineNuxtModule({
     addVitePlugin(PageMetaPlugin.vite(pageMetaOptions))
     addWebpackPlugin(PageMetaPlugin.webpack(pageMetaOptions))
 
+    // Add prefetching support for middleware & layouts
+    addPlugin(resolve(runtimeDir, 'plugins/prefetch.client'))
+
     // Add router plugin
-    addPlugin(resolve(runtimeDir, 'router'))
+    addPlugin(resolve(runtimeDir, 'plugins/router'))
 
     const getSources = (pages: NuxtPage[]): string[] => pages.flatMap(p =>
       [relative(nuxt.options.srcDir, p.file), ...getSources(p.children || [])]

packages/nuxt/src/pages/runtime/plugins/prefetch.client.ts

@@ -0,0 +1,40 @@
+import { hasProtocol } from 'ufo'
+import { defineNuxtPlugin, useNuxtApp, useRouter } from '#app'
+// @ts-ignore
+import layouts from '#build/layouts'
+// @ts-ignore
+import { namedMiddleware } from '#build/middleware'
+
+export default defineNuxtPlugin(() => {
+  const nuxtApp = useNuxtApp()
+  const router = useRouter()
+
+  // Force layout prefetch on route changes
+  nuxtApp.hooks.hook('app:mounted', () => {
+    router.beforeEach(async (to) => {
+      const layout = to?.meta?.layout
+      if (layout && typeof layouts[layout] === 'function') {
+        await layouts[layout]()
+      }
+    })
+  })
+  // Prefetch layouts & middleware
+  nuxtApp.hooks.hook('link:prefetch', (url) => {
+    if (hasProtocol(url)) { return }
+    const route = router.resolve(url)
+    if (!route) { return }
+    const layout = route?.meta?.layout
+    let middleware = Array.isArray(route?.meta?.middleware) ? route?.meta?.middleware : [route?.meta?.middleware]
+    middleware = middleware.filter(m => typeof m === 'string')
+
+    for (const name of middleware) {
+      if (typeof namedMiddleware[name] === 'function') {
+        namedMiddleware[name]()
+      }
+    }
+
+    if (layout && typeof layouts[layout] === 'function') {
+      layouts[layout]()
+    }
+  })
+})

packages/nuxt/src/pages/runtime/router.ts renamed to packages/nuxt/src/pages/runtime/plugins/router.ts

@@ -11,7 +11,7 @@ import {
 } from 'vue-router'
 import { createError } from 'h3'
 import { withoutBase, isEqual } from 'ufo'
-import type NuxtPage from './page'
+import type NuxtPage from '../page'
 import { callWithNuxt, defineNuxtPlugin, useRuntimeConfig, showError, clearError, navigateTo, useError, useState } from '#app'
 // @ts-ignore
 import _routes from '#build/routes'