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></lazyheavylist>→ 自动转为<clientonly><heavylist></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 维护）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
