packages/nuxt/src/app/composables/payload.ts

@@ -56,12 +56,10 @@ function _getPayloadURL (url: string, opts: LoadPayloadOptions = {}) {
 
 async function _importPayload (payloadURL: string) {
   if (import.meta.server) { return null }
-  const payloadPromise = renderJsonPayloads
-    ? fetch(payloadURL).then(res => res.text().then(parsePayload))
-    : import(/* webpackIgnore: true */ /* @vite-ignore */ payloadURL).then(r => r.default || r)
-
   try {
-    return await payloadPromise
+    return renderJsonPayloads
+      ? parsePayload(await fetch(payloadURL).then(res => res.text()))
+      : await import(/* webpackIgnore: true */ /* @vite-ignore */ payloadURL).then(r => r.default || r)
   } catch (err) {
     console.warn('[nuxt] Cannot load payload ', payloadURL, err)
   }

packages/nuxt/src/app/composables/router.ts

@@ -7,6 +7,7 @@ import { hasProtocol, isScriptProtocol, joinURL, parseURL, withQuery } from 'ufo
 import { useNuxtApp, useRuntimeConfig } from '../nuxt'
 import type { NuxtError } from './error'
 import { createError, showError } from './error'
+import { useState } from './state'
 
 import type { PageMeta } from '#app'
 import { PageRouteSymbol } from '#app/components/injections'
@@ -221,14 +222,14 @@ export const abortNavigation = (err?: string | Partial<NuxtError>) => {
 }
 
 export const setPageLayout = (layout: unknown extends PageMeta['layout'] ? string : PageMeta['layout']) => {
-  const nuxtApp = useNuxtApp()
   if (import.meta.server) {
-    if (import.meta.dev && getCurrentInstance() && nuxtApp.payload.state._layout !== layout) {
+    if (import.meta.dev && getCurrentInstance() && useState('_layout').value !== layout) {
       console.warn('[warn] [nuxt] `setPageLayout` should not be called to change the layout on the server within a component as this will cause hydration errors.')
     }
-    nuxtApp.payload.state._layout = layout
+    useState('_layout').value = layout
   }
-  if (import.meta.dev && nuxtApp.isHydrating && nuxtApp.payload.serverRendered && nuxtApp.payload.state._layout !== layout) {
+  const nuxtApp = useNuxtApp()
+  if (import.meta.dev && nuxtApp.isHydrating && nuxtApp.payload.serverRendered && useState('_layout').value !== layout) {
     console.warn('[warn] [nuxt] `setPageLayout` should not be called to change the layout during hydration as this will cause hydration errors.')
   }
   const inMiddleware = isProcessingMiddleware()

packages/nuxt/src/app/plugins/router.ts

@@ -4,6 +4,7 @@ import { createError } from 'h3'
 import { defineNuxtPlugin, useRuntimeConfig } from '../nuxt'
 import { clearError, showError } from '../composables/error'
 import { navigateTo } from '../composables/router'
+import { useState } from '../composables/state'
 
 // @ts-expect-error virtual file
 import { globalMiddleware } from '#build/middleware'
@@ -225,12 +226,12 @@ export default defineNuxtPlugin<{ route: Route, router: Router }>({
       named: {}
     }
 
-    const initialLayout = nuxtApp.payload.state._layout
+    const initialLayout = useState('_layout')
     nuxtApp.hooks.hookOnce('app:created', async () => {
       router.beforeEach(async (to, from) => {
         to.meta = reactive(to.meta || {})
-        if (nuxtApp.isHydrating && initialLayout && !isReadonly(to.meta.layout)) {
-          to.meta.layout = initialLayout
+        if (nuxtApp.isHydrating && initialLayout.value && !isReadonly(to.meta.layout)) {
+          to.meta.layout = initialLayout.value
         }
         nuxtApp._processingMiddleware = true
 

packages/nuxt/src/core/app.ts

@@ -125,11 +125,11 @@ async function resolveApp (nuxt: Nuxt, app: NuxtApp) {
     }))
   }
 
-  // Resolve plugins, first extended layers and then base
+  // Resolve plugins
   app.plugins = [
     ...nuxt.options.plugins.map(normalizePlugin)
   ]
-  for (const config of nuxt.options._layers.map(layer => layer.config).reverse()) {
+  for (const config of nuxt.options._layers.map(layer => layer.config)) {
     app.plugins.push(...[
       ...(config.plugins || []),
       ...config.srcDir

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

@@ -14,6 +14,7 @@ import { isEqual, withoutBase } from 'ufo'
 import type { PageMeta, Plugin, RouteMiddleware } from '../../../app/index'
 import { defineNuxtPlugin, useRuntimeConfig } from '#app/nuxt'
 import { clearError, showError, useError } from '#app/composables/error'
+import { useState } from '#app/composables/state'
 import { navigateTo } from '#app/composables/router'
 
 // @ts-expect-error virtual file
@@ -133,11 +134,11 @@ const plugin: Plugin<{ router: Router }> = defineNuxtPlugin({
       await nuxtApp.runWithContext(() => showError(error))
     }
 
-    const initialLayout = nuxtApp.payload.state._layout
+    const initialLayout = useState('_layout')
     router.beforeEach(async (to, from) => {
       to.meta = reactive(to.meta)
-      if (nuxtApp.isHydrating && initialLayout && !isReadonly(to.meta.layout)) {
-        to.meta.layout = initialLayout as Exclude<PageMeta['layout'], Ref | false>
+      if (nuxtApp.isHydrating && initialLayout.value && !isReadonly(to.meta.layout)) {
+        to.meta.layout = initialLayout.value as Exclude<PageMeta['layout'], Ref | false>
       }
       nuxtApp._processingMiddleware = true
 

test/basic.test.ts

@@ -983,11 +983,6 @@ describe('extends support', () => {
       const html = await $fetch('/foo')
       expect(html).toContain('Plugin | foo: String generated from foo plugin!')
     })
-
-    it('respects plugin ordering within layers', async () => {
-      const html = await $fetch('/plugins/ordering')
-      expect(html).toContain('catchall at plugins')
-    })
   })
 
   describe('server', () => {

test/bundle.test.ts

@@ -19,7 +19,7 @@ describe.skipIf(process.env.SKIP_BUNDLE_SIZE === 'true' || process.env.ECOSYSTEM
   for (const outputDir of ['.output', '.output-inline']) {
     it('default client bundle size', async () => {
       const clientStats = await analyzeSizes('**/*.js', join(rootDir, outputDir, 'public'))
-      expect.soft(roundToKilobytes(clientStats.totalBytes)).toMatchInlineSnapshot('"95.5k"')
+      expect.soft(roundToKilobytes(clientStats.totalBytes)).toMatchInlineSnapshot('"97.0k"')
       expect(clientStats.files.map(f => f.replace(/\..*\.js/, '.js'))).toMatchInlineSnapshot(`
         [
           "_nuxt/entry.js",
@@ -32,7 +32,7 @@ describe.skipIf(process.env.SKIP_BUNDLE_SIZE === 'true' || process.env.ECOSYSTEM
     const serverDir = join(rootDir, '.output/server')
 
     const serverStats = await analyzeSizes(['**/*.mjs', '!node_modules'], serverDir)
-    expect.soft(roundToKilobytes(serverStats.totalBytes)).toMatchInlineSnapshot('"299k"')
+    expect.soft(roundToKilobytes(serverStats.totalBytes)).toMatchInlineSnapshot('"300k"')
 
     const modules = await analyzeSizes('node_modules/**/*', serverDir)
     expect.soft(roundToKilobytes(modules.totalBytes)).toMatchInlineSnapshot('"1822k"')
@@ -71,7 +71,7 @@ describe.skipIf(process.env.SKIP_BUNDLE_SIZE === 'true' || process.env.ECOSYSTEM
     const serverDir = join(rootDir, '.output-inline/server')
 
     const serverStats = await analyzeSizes(['**/*.mjs', '!node_modules'], serverDir)
-    expect.soft(roundToKilobytes(serverStats.totalBytes)).toMatchInlineSnapshot('"605k"')
+    expect.soft(roundToKilobytes(serverStats.totalBytes)).toMatchInlineSnapshot('"606k"')
 
     const modules = await analyzeSizes('node_modules/**/*', serverDir)
     expect.soft(roundToKilobytes(modules.totalBytes)).toMatchInlineSnapshot('"70.6k"')

test/fixtures/basic/extends/bar/plugins/09.layer-plugin-pre.ts

@@ -1,3 +0,0 @@
-export default defineNuxtPlugin((nuxtApp) => {
-  nuxtApp.provide('layerPluginPre', 'layer-plugin')
-})

test/fixtures/basic/extends/bar/plugins/11.layer-plugin-post.ts

@@ -1,3 +0,0 @@
-export default defineNuxtPlugin((nuxtApp) => {
-  nuxtApp.provide('layerPluginPost', 'layer-plugin')
-})

test/fixtures/basic/plugins/10.layer-ordering.ts

@@ -1,10 +0,0 @@
-export default defineNuxtPlugin((nuxtApp) => {
-  if (useRoute().path === '/plugins/ordering') {
-    if (!nuxtApp.$layerPluginPre) {
-      throw createError('layer plugin failed to run before end project plugin')
-    }
-    if (!nuxtApp.$layerPluginPost) {
-      throw createError('layer plugin failed to run before end project plugin')
-    }
-  }
-})