如何在Nuxt中注册子文件夹组件？Nuxt.config配置咨询

问题回顾 #

你的组件目录结构：

/components
  /sections
    /ImageGrid
      ImageGrid.vue
    /ContactSection
      ContactSection.vue

使用<component is="ImageGrid" />时触发错误：

[Vue warn]: Unknown custom element: <ImageGrid> - did you register the component correctly?

正确的Nuxt配置 #

在nuxt.config.ts（或.js）里，按以下方式配置components项：

方式一：显式配置递归目录 #

export default defineNuxtConfig({
  components: [
    // 可选：保留components根目录的自动导入
    '~/components',
    {
      path: '~/components/sections',
      pathPrefix: false, // 关键：不添加路径前缀，直接用组件文件名注册
      extensions: ['vue']
    }
  ]
})

方式二：简洁递归匹配 #

export default defineNuxtConfig({
  components: [
    '~/components',
    '~/components/sections/**' // ** 递归匹配所有子目录下的组件
  ]
})

原配置无效的原因 #

• 你之前写的{ path: '~/components/sections', extensions: ['vue'] }：只会导入sections目录下直接存放的.vue文件，不会读取子文件夹（比如ImageGrid内部的组件）。
• { path: '~/components/sections/**/*', extensions: ['vue'] }：路径格式错误，**已经包含了所有子目录和文件，额外加/*会导致匹配规则失效。

额外注意 #

• 确保每个Vue组件的name字段和文件名完全一致（比如ImageGrid.vue的name设为ImageGrid），动态组件的is属性必须和这个名称对应。
• 如果你用的是Nuxt 2，需先安装@nuxt/components模块，然后在配置中写：

export default {
  components: true,
  components: {
    dirs: ['~/components/sections/**']
  }
}

内容的提问来源于stack exchange，提问作者Justin van Dijk