Nuxt 3 默认支持组件自动注册，无需 import 或手动注册；路径映射规则为分段首字母大写+文件名，可配置 pathPrefix 控制是否包含路径前缀；支持 Lazy 前缀实现懒加载；可通过 addComponentsDir 扩展自定义目录。

Nuxt 3 默认就支持组件的自动注册，只要把组件放在 components 目录下，无需 import、无需手动注册，就能直接在模板中使用。

自动注册的规则和路径映射

Nuxt 会根据文件路径自动生成组件名，默认采用路径分段首字母大写 + 文件名的方式拼接。例如：

• components/base/Button.vue → ``
• components/ui/Modal.vue → ``
• components/SUI/SInput.vue → ``（若开启 pathPrefix: true）
• components/SUI/SInput.vue → ``（若配置 pathPrefix: false）

如何关闭路径前缀，只用文件名注册

在 nuxt.config.ts 中调整 components 配置即可：

export default defineNuxtConfig({
  components: [
    {
      path: '~/components',
      pathPrefix: false
    }
  ]
})

这样 components/base/Button.vue 就注册为 ``，更简洁，也更贴近手写习惯。

立即学习“前端免费学习笔记（深入）”；

Vue Composition Analyzer

分析 Vue 3 Composition API 使用情况——审计响应式模式、可组合函数设计、ref 与 reactive 的选择、计算属性、watcher 使用及组件……

下载

支持异步加载的懒加载组件

只需在组件标签名前加 Lazy 前缀，Nuxt 就会自动按需异步加载：

• <LazyHeavyList /> → 自动转为 <ClientOnly><HeavyList /></ClientOnly> 并做 code-splitting
• 适用于体积大、非首屏必需的组件，比如图表、富文本编辑器等

扩展自定义组件目录

如果项目有特殊结构（比如把业务组件放在 components/business），可用 addComponentsDir 扩展：

// plugins/components.ts
export default defineNuxtPlugin((nuxtApp) => {
  addComponentsDir({
    path: '~/components/business',
    pathPrefix: false,
    extensions: ['vue']
  })
})

之后 components/business/OrderCard.vue 就能直接写作 ``。

不需要额外插件或 webpack 配置，Nuxt 在构建期就完成扫描和注册，类型提示也自动生效（components.d.ts 由 Nuxt 维护）。