diff --git a/packages/nuxt/src/pages/module.ts b/packages/nuxt/src/pages/module.ts index 32b38b2857..b571dd5b14 100644 --- a/packages/nuxt/src/pages/module.ts +++ b/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 || [])] diff --git a/packages/nuxt/src/pages/runtime/plugins/prefetch.client.ts b/packages/nuxt/src/pages/runtime/plugins/prefetch.client.ts new file mode 100644 index 0000000000..637ae4454a --- /dev/null +++ b/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]() + } + }) +}) diff --git a/packages/nuxt/src/pages/runtime/router.ts b/packages/nuxt/src/pages/runtime/plugins/router.ts similarity index 99% rename from packages/nuxt/src/pages/runtime/router.ts rename to packages/nuxt/src/pages/runtime/plugins/router.ts index 989849a452..396945b7ab 100644 --- a/packages/nuxt/src/pages/runtime/router.ts +++ b/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'