启用自动发现
从 v2.13 起，Nuxt 可以自动导入模板中使用的组件。要启用此功能，请在配置文件中设置 components: true：
nuxt.config.js
export default {
components: true
}
详情请查看如何配置组件自动发现 。
使用组件
一旦在 components 目录中创建了组件，无需导入即可在整个应用中使用。
| components/
--| TheHeader.vue
--| TheFooter.vue
layouts/default.vue
<template>
<div>
<TheHeader />
<Nuxt />
<TheFooter />
</div>
</template>
组件名称
如果组件位于如下嵌套目录中：
| components/
--| base/
----| foo/
------| Button.vue
组件名称将基于其自身的路径目录和文件名。因此，该组件为：
<BaseFooButton />
为了清晰起见，建议组件文件名与其名称保持一致。（即在上面的示例中，可以将
Button.vue 重命名为 BaseFooButton.vue。）如果想使用不包含在组件名称中的自定义目录结构，可以显式指定这些目录：
| components/
--| base/
----| foo/
------| Button.vue
nuxt.config.js
components: {
dirs: [
'~/components',
'~/components/base'
]
}
这样在模板中可以使用 FooButton 代替 BaseFooButton。
pages/index.vue
<FooButton />
关于组件和目录的命名，请参考 Vue.js 风格指南 。
动态导入
要动态导入组件（也称为组件懒加载），只需在组件名称前添加 Lazy 前缀即可。
layouts/default.vue
<template>
<div>
<TheHeader />
<Nuxt />
<LazyTheFooter />
</div>
</template>
当组件并非总是需要时，这特别有用。使用 Lazy 前缀可以将组件代码的加载延迟到适当时机，有助于优化 JavaScript 打包体积。
pages/index.vue
<template>
<div>
<h1>Mountains</h1>
<LazyMountainsList v-if="show" />
<button v-if="!show" @click="show = true">Show List</button>
</div>
</template>
<script>
export default {
data() {
return {
show: false
}
}
}
</script>
速查表
Edit this page on GitHub
Updated at Tue, Apr 14, 2026