Nuxt3中layouts嵌套文件夹内布局提示无效如何解决

Nuxt 3.0.0 rc4 版本确实未支持 layouts 目录下嵌套文件夹的自动识别注册，这是该迭代版本的功能缺失，不属于配置或写法错误。

• Nuxt 2 已通过对应PR合入嵌套布局支持，框架扫描布局文件时会递归遍历layouts下所有子目录，自动将文件相对路径拼接为布局名，因此layouts/mobile/custom.vue可直接通过mobile/custom名称调用。
• Nuxt 3 rc4 版本的布局扫描逻辑仅处理layouts根目录下的一级.vue文件，不会递归读取子目录内的文件。将布局放到嵌套目录时，构建流程根本没有注册该布局，调用时自然会抛出Invalid layout 'mobile/custom' selected错误。
• 该阶段的官方文档未提及嵌套布局支持，相关能力是在后续rc迭代及正式版中才补全的。

可根据项目需求二选一：

1. 平铺布局文件：放弃嵌套目录结构，将所有布局直接放在layouts根目录，通过文件名前缀区分场景，比如将layouts/mobile/custom.vue重命名为layouts/mobile-custom.vue，调用时使用<NuxtLayout name="mobile-custom">即可正常运行，无需修改布局内部代码。
2. 手动注册布局：如果需要保留嵌套目录结构，可以在项目配置文件中手动指定子目录下的布局映射，示例配置：

// nuxt.config.ts
export default defineNuxtConfig({
  layouts: {
    'mobile/custom': './layouts/mobile/custom.vue'
  }
})

配置完成后即可正常通过name="mobile/custom"调用对应嵌套布局。

注：升级到后续更新的Nuxt3正式版本后，框架已恢复递归扫描layouts子目录的能力，可直接使用嵌套目录写法，无需额外手动注册。

内容的提问来源于stack exchange，提问作者Danny Andres