components 属性
Nuxt v2.13 及以上版本可以使用 @nuxt/components 模块扫描并自动导入组件。
@nuxt/components 添加到 nuxt.config 的 buildModules 中即可。-
类型:
Boolean或Array -
默认值:
false
设置为 true 或对象选项时，Nuxt 会引入 @nuxt/components ，在 pages、layouts（及其他组件）中使用组件时会自动导入。
配置
export default {
// 这会自动从 `~/components` 加载组件
components: true
}
设置 components: true 时，默认包含 ~/components 目录。
但可以通过添加要扫描的目录来自定义自动发现行为：
export default {
components: [
// 等同于 { path: '~/components' }
'~/components',
{ path: '~/components/other', extensions: ['vue'] }
]
}
path
每个条目可以是字符串或对象。字符串值是 { path } 的简写。
path
- 必填
-
类型:
String
包含组件的目录路径（绝对或相对）。
可以使用 Nuxt 别名（~ 或 @）引用项目内的目录，或直接使用 npm 包路径（与在项目中使用 require 类似）。
extensions
-
类型:
Array<string> -
默认值:
-
Nuxt 构建器（
builder.supportedExtensions）支持的扩展名 -
默认支持
['vue', 'js']，或根据环境支持['vue', 'js', 'ts', 'tsx']
-
Nuxt 构建器（
示例： 支持多文件组件结构
如果想将 SFC 拆分为 .js、.vue、.css，可以只扫描 .vue 文件：
| components
---| componentC
------| componentC.vue
------| componentC.js
------| componentC.scss
// nuxt.config.js
export default {
components: [{ path: '~/components', extensions: ['vue'] }]
}
pattern
-
类型:
string（glob 模式 ） -
默认值:
**/*.${extensions.join(',')}
在指定的 path 中，只包含匹配此模式的文件。
ignore
-
类型:
Array -
元素:
string（glob 模式 ） -
默认值:
[]
排除指定 path 内文件的模式
prefix
-
类型:
String -
默认值:
''（无前缀）
所有匹配组件的前缀
以下示例为 awesome/ 目录中的组件名称添加 awesome- / Awesome 前缀：
// nuxt.config.js
export default {
components: [
'~/components',
{ path: '~/components/awesome/', prefix: 'awesome' }
]
}
| components/
---| awesome/
------| Button.vue
---| Button.vue
<template>
<div>
<AwesomeButton>Click on me 🤘</AwesomeButton>
<button>Click on me</button>
</div>
</template>
pathPrefix
-
类型:
Boolean -
默认值:
true
在组件名称前添加其路径。
watch
-
类型:
Boolean -
默认值:
true
监听指定 path 的变化，如文件的添加和删除。
transpile
-
类型:
Boolean -
默认值:
'auto'
使用 build.transpile 转译指定 path。默认（'auto'）：如果 path 中包含 node_modules/，则设置 transpile: true。
level
-
类型:
Number -
默认值:
0
level 用于允许覆盖两个不同目录中同名的组件。这对于希望用户能够覆盖其组件的库作者或自定义主题作者很有用。
export default {
components: [
'~/components', // 默认 level 为 0
{ path: 'my-theme/components', level: 1 }
]
}
~/components 中的组件会覆盖 my-theme/components 中同名的组件。值越小优先级越高。
高级
覆盖组件
可以使用 level 选项覆盖组件，这对模块和主题作者非常有用。
考虑以下结构：
| node_modules/
---| my-theme/
------| components/
---------| Header.vue
| components/
---| Header.vue
在 nuxt.config 中定义：
components: [
'~/components', // 默认 level 为 0
{ path: 'node_modules/my-theme/components', level: 1 }
]
components/Header.vue 会覆盖主题组件，因为较低的 level 优先。
库作者
创建带有 tree-shaking 和组件自动注册功能的 Vue 组件库变得非常简单 ✨
此模块暴露了一个名为 components:dirs 的钩子，可以轻松扩展目录列表，无需在 Nuxt 模块中进行用户配置。
想象以下目录结构：
| node_modules/
---| awesome-ui/
------| components/
---------| Alert.vue
---------| Button.vue
------| nuxt.js
| pages/
---| index.vue
| nuxt.config.js
然后在 awesome-ui/nuxt.js 中使用 components:dir 钩子：
import { join } from 'path'
export default function () {
this.nuxt.hook('components:dirs', dirs => {
// 将 ./components 目录添加到列表中
dirs.push({
path: join(__dirname, 'components'),
prefix: 'awesome'
})
})
}
就这样！现在在你的项目中，可以在 nuxt.config.js 中将 ui 库作为 Nuxt 模块导入：
export default {
buildModules: ['@nuxt/components', 'awesome-ui/nuxt']
}
然后直接在 pages/index.vue 中使用模块的组件（带 awesome- 前缀）：
<template>
<div>
My <AwesomeButton>UI button</AwesomeButton>!
<awesome-alert>Here's an alert!</awesome-alert>
</div>
</template>
这样只会在使用时自动导入组件，并在 node_modules/awesome-ui/components/ 中更新组件时支持 HMR。
下一步：将创建的 awesome-ui 模块发布到 npm 并与其他 Nuxters 分享 ✨