Nuxt3自定义模块下嵌套目录组件无法自动导入如何配置

我在Nuxt项目中使用自定义模块化结构，不采用框架默认目录组织形式，目录结构参考下图：

当前存在配置问题：无法实现Card这类嵌套文件夹内组件的自动导入。目前components根目录下的PlanChoiceCard.vue可以正常自动导入，但Card这类嵌套目录下的NestedComponent.vue无法被自动识别导入。

现有配置 #

项目nuxt.config.js配置 #

import { defineNuxtConfig } from "nuxt";

export default defineNuxtConfig({
  ssr: true,
  ignore: ["node_modules/**/*"],
  plugins: ["~/plugins/vue-i18n.client.ts"],
  runtimeConfig: {
    public: {
      myapp: {
        version: "1.7.8.2",
      },
    },
  },
  modules: ["./modules/Plans"],
  build: {
    postcss: {
      postcssOptions: {
        plugins: {
          tailwindcss: {},
          autoprefixer: {},
        },
      },
    },
  },
  css: ["~/assets/css/tailwind.css"],
});

Plans自定义模块配置 #

import path from "path";
import { defineNuxtModule } from "@nuxt/kit";

export default defineNuxtModule({
  defaults: {},
  hooks: {
    // 路由注册
    "pages:extend"(pages) {
      pages.push({
        name: "user",
        path: "/",
        file: path.resolve(__dirname, "./views/PlanChoices.vue"),
      });
    },

    // 组件目录注册
    "components:dirs"(dirs) {
      dirs.push({
        path: path.resolve(__dirname, "./components"),
      });
    },

    // 组合式函数目录注册
    // "autoImports:dirs"(dirs) {
    //  dirs.push(path.resolve(__dirname, "./composables"));
    // },
  },
  async setup(moduleOptions, nuxt) {
    // 模块逻辑
  },
});

解决方法 #

问题原因是自定义注册组件目录时，默认不会递归扫描子目录，只需要在注册组件目录时开启递归扫描配置即可。
修改Plans模块里的components:dirs钩子逻辑：

// COMPONENTS
"components:dirs"(dirs) {
  dirs.push({
    path: path.resolve(__dirname, "./components"),
    // 开启子目录递归扫描
    recursive: true,
    // 不需要目录前缀的话加下面这行，嵌套组件直接用文件名引用，比如<NestedComponent />
    pathPrefix: false,
  });
}

如果需要按目录层级自动给组件加前缀（比如Card目录下的NestedComponent引用名为CardNestedComponent），删掉pathPrefix: false配置即可。

修改配置后必须重启Nuxt开发服务，清空自动导入缓存后配置才会生效。

内容的提问来源于stack exchange，提问作者Adri HM