From 96f54004920fe1612f0c33d7e918fefb84917b22 Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Mon, 16 Oct 2023 11:38:15 +0100
Subject: [PATCH] fix(nuxt): move layout resolution to build time

---
 .../nuxt/src/app/components/nuxt-layout.ts    | 41 +------------------
 packages/nuxt/src/core/app.ts                 |  4 +-
 packages/nuxt/src/core/utils/names.ts         | 16 ++------
 3 files changed, 7 insertions(+), 54 deletions(-)

diff --git a/packages/nuxt/src/app/components/nuxt-layout.ts b/packages/nuxt/src/app/components/nuxt-layout.ts
index 985addc767..2b19a8d6d5 100644
--- a/packages/nuxt/src/app/components/nuxt-layout.ts
+++ b/packages/nuxt/src/app/components/nuxt-layout.ts
@@ -47,46 +47,7 @@ export default defineComponent({
     const injectedRoute = inject(PageRouteSymbol)
     const route = injectedRoute === useRoute() ? useVueRouterRoute() : injectedRoute
 
-    const layout = computed(() => {
-      const layoutName = unref(props.name) ?? route.meta.layout as string ?? 'default'
-
-      if (typeof layoutName === 'string') {
-        const layoutPath = layoutName.replace(/-/g, '/')
-
-        // Check if layout exists for example `desktop-default` will translate to `layouts/desktop/default`
-        if (layoutPath in layouts) {
-          return layoutPath
-        }
-
-        // Check if layout exists for example `desktop` or `desktop-index` will translate to ` `layouts/desktop/index`
-        if ((layoutPath + '/index') in layouts) {
-          return layoutPath + '/index'
-        }
-
-        // If the directory inside layouts has has a dash in the name such as `desktop-base` we need to check for that
-        if (layoutName.includes('-')) {
-          const layoutPath = layoutName.replace(/-/g, '/')
-
-          // Check if layout exists for example `desktop-base`  will translate to `layouts/desktop/base`
-          if (layoutPath in layouts) {
-            return layoutPath
-          }
-
-          // Check if layout exists for example `desktop-base` will translate to `layouts/desktop-base/base`
-          const layoutPathLast = layoutName.split('-').pop()
-          if (layoutName + '/' + layoutPathLast in layouts) {
-            return layoutName + '/' + layoutPathLast
-          }
-
-          // Check if layout exists for example `desktop-base` will translate to `layouts/desktop-base/index`
-          if (layoutName + '/index' in layouts) {
-            return layoutName + '/index'
-          }
-        }
-      }
-
-      return layoutName
-    })
+    const layout = computed(() => unref(props.name) ?? route.meta.layout as string ?? 'default')
 
     const layoutRef = ref()
     context.expose({ layoutRef })
diff --git a/packages/nuxt/src/core/app.ts b/packages/nuxt/src/core/app.ts
index 736e9c5a4d..0fbe555090 100644
--- a/packages/nuxt/src/core/app.ts
+++ b/packages/nuxt/src/core/app.ts
@@ -110,9 +110,9 @@ export async function resolveApp (nuxt: Nuxt, app: NuxtApp) {
   app.layouts = {}
   for (const config of nuxt.options._layers.map(layer => layer.config)) {
     const layoutDir = (config.rootDir === nuxt.options.rootDir ? nuxt.options : config).dir?.layouts || 'layouts'
-    const layoutFiles = await resolveFiles(config.srcDir, `${layoutDir}/*{${nuxt.options.extensions.join(',')}}`)
+    const layoutFiles = await resolveFiles(config.srcDir, `${layoutDir}/**/*{${nuxt.options.extensions.join(',')}}`)
     for (const file of layoutFiles) {
-      const name = getNameFromPathLocal(file, config.srcDir + '/layouts')
+      const name = getNameFromPathLocal(file, resolve(config.srcDir, layoutDir))
       app.layouts[name] = app.layouts[name] || { name, file }
     }
   }
diff --git a/packages/nuxt/src/core/utils/names.ts b/packages/nuxt/src/core/utils/names.ts
index b020fd1ee6..81621cece5 100644
--- a/packages/nuxt/src/core/utils/names.ts
+++ b/packages/nuxt/src/core/utils/names.ts
@@ -1,5 +1,6 @@
 import { basename, extname } from 'pathe'
 import { kebabCase } from 'scule'
+import { withTrailingSlash } from 'ufo'
 
 export function getNameFromPath (path: string) {
   return kebabCase(basename(path).replace(extname(path), '')).replace(/["']/g, '')
@@ -9,16 +10,7 @@ export function hasSuffix (path: string, suffix: string) {
   return basename(path).replace(extname(path), '').endsWith(suffix)
 }
 
-export function getNameFromPathLocal (path: string, src: string) {
-  const sourcePath = path
-    .replace(src + '/', '')
-    .split('/')
-    .slice(0, -1)
-    // .map(e => snakeCase(e))
-    .join('/')
-  return (
-    sourcePath +
-    (sourcePath ? '/' : '') +
-    kebabCase(basename(path).replace(extname(path), '')).replace(/["']/g, '')
-  )
+export function getNameFromPathLocal (path: string, localDir: string) {
+  const file = path.replace(withTrailingSlash(localDir), '')
+  return getNameFromPath(file.replace(/[\\/]+/g, '-').replace(/\/index\.\w+$/, ''))
 }