From 02b57d49db45f80a9a5a821e79f2f7aa23d3c38e Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Sun, 17 Nov 2024 17:06:03 -0500
Subject: [PATCH] refactor(nuxt): define layouts as async vue components
 (#29957)

---
 packages/nuxt/src/app/components/nuxt-layout.ts | 8 ++------
 packages/nuxt/src/core/templates.ts             | 3 ++-
 2 files changed, 4 insertions(+), 7 deletions(-)

diff --git a/packages/nuxt/src/app/components/nuxt-layout.ts b/packages/nuxt/src/app/components/nuxt-layout.ts
index e7af6597fc..7472235a3e 100644
--- a/packages/nuxt/src/app/components/nuxt-layout.ts
+++ b/packages/nuxt/src/app/components/nuxt-layout.ts
@@ -16,7 +16,6 @@ import layouts from '#build/layouts'
 // @ts-expect-error virtual file
 import { appLayoutTransition as defaultLayoutTransition } from '#build/nuxt.config.mjs'
 
-// TODO: revert back to defineAsyncComponent when https://github.com/vuejs/core/issues/6638 is resolved
 const LayoutLoader = defineComponent({
   name: 'LayoutLoader',
   inheritAttrs: false,
@@ -24,13 +23,10 @@ const LayoutLoader = defineComponent({
     name: String,
     layoutProps: Object,
   },
-  async setup (props, context) {
+  setup (props, context) {
     // This is a deliberate hack - this component must always be called with an explicit key to ensure
     // that setup reruns when the name changes.
-
-    const LayoutComponent = await layouts[props.name]().then((r: any) => r.default || r)
-
-    return () => h(LayoutComponent, props.layoutProps, context.slots)
+    return () => h(layouts[props.name], props.layoutProps, context.slots)
   },
 })
 
diff --git a/packages/nuxt/src/core/templates.ts b/packages/nuxt/src/core/templates.ts
index a21352deba..d4fe5166f8 100644
--- a/packages/nuxt/src/core/templates.ts
+++ b/packages/nuxt/src/core/templates.ts
@@ -285,9 +285,10 @@ export const layoutTemplate: NuxtTemplate = {
   filename: 'layouts.mjs',
   getContents ({ app }) {
     const layoutsObject = genObjectFromRawEntries(Object.values(app.layouts).map(({ name, file }) => {
-      return [name, genDynamicImport(file)]
+      return [name, `defineAsyncComponent(${genDynamicImport(file)})`]
     }))
     return [
+      `import { defineAsyncComponent } from 'vue'`,
       `export default ${layoutsObject}`,
     ].join('\n')
   },