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

packages/nuxt/src/app/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/core/nuxt.ts

@@ -196,6 +196,9 @@ async function initNuxt (nuxt: Nuxt) {
     addPlugin(resolve(nuxt.options.appDir, 'plugins/debug'))
   }
 
+  // Add prefetching support for middleware & layouts
+  addPlugin(resolve(nuxt.options.appDir, 'plugins/prefetch.client'))
+
   for (const m of modulesToInstall) {
     if (Array.isArray(m)) {
       await installModule(m[0], m[1])