组件
Nuxt Kit 提供了一组工具,帮助你处理组件。你可以全局或局部注册组件,还可以添加目录以扫描组件。
组件是你的 Nuxt 应用的构建模块。它们是可复用的 Vue 实例,用于创建用户界面。在 Nuxt 中,components
目录下的组件默认会被自动导入。但是如果你需要从其他目录导入组件,或者希望按需选择性导入,@nuxt/kit
提供了 addComponentsDir
和 addComponent
方法。这些工具允许你自定义组件配置,更好地满足你的需求。
addComponentsDir
注册一个目录,用于扫描组件,并且仅在使用时导入。请注意,这不会全局注册组件,除非你指定了 global: true
选项。
用法
export default defineNuxtModule({
meta: {
name: '@nuxt/ui',
configKey: 'ui',
},
setup() {
addComponentsDir({
path: resolve('./runtime/components'),
prefix: 'U',
pathPrefix: false
})
}
})
类型
function addComponentsDir (dir: ComponentsDir, opts: { prepend?: boolean } = {}): void
参数
dir
一个包含以下属性的对象:
属性 | 类型 | 必需 | 描述 |
---|---|---|---|
path | string | true | 组件所在目录的路径(绝对或相对)。你可以使用 Nuxt 别名(~ 或 @)指向项目内目录,也可以直接使用类似 require 的 npm 包路径。 |
pattern | string | string[] | false | 匹配模式,用于扫描指定路径。 |
ignore | string[] | false | 忽略模式,用于排除特定路径。 |
prefix | string | false | 为所有匹配的组件添加前缀。 |
pathPrefix | boolean | false | 是否用组件路径作为前缀。 |
enabled | boolean | false | 如果设置为 true ,则忽略扫描此目录。 |
prefetch | boolean | false | 这些属性(prefetch/preload)用于生产环境,通过 webpack 的魔法注释配置带有 Lazy 前缀的组件的处理。了解更多请见 webpack 文档。 |
preload | boolean | false | 这些属性(prefetch/preload)用于生产环境,通过 webpack 的魔法注释配置带有 Lazy 前缀的组件的处理。了解更多请见 webpack 文档。 |
isAsync | boolean | false | 标志组件是否应该异步加载(生成独立 chunk),无论是否使用 Lazy 前缀。 |
extendComponent | (component: Component) => Promise<Component | void> | (Component | void) | false | 对目录中每个找到的组件调用的函数。它接收一个组件对象,并应返回组件对象或一个解析为组件对象的 Promise。 |
global | boolean | false | 如果启用,则注册组件为全局可用。 |
island | boolean | false | 如果启用,则以岛屿组件注册。你可以在<NuxtIsland/> 组件描述中了解更多岛屿内容。 |
watch | boolean | false | 监听指定路径的变化,包括文件新增和删除。 |
extensions | string[] | false | Nuxt 构建器支持的文件扩展名。 |
transpile | 'auto' | boolean | false | 使用 build.transpile 转译指定路径。如果设置为 'auto' ,当路径中包含 node_modules/ 时会自动设置为 true 。 |
opts
属性 | 类型 | 必需 | 描述 |
---|---|---|---|
prepend | boolean | false | 如果设置为 true ,目录将通过 unshift() 添加到数组前端,否则使用 push() 添加到末尾。 |
addComponent
注册一个组件,使其可以被自动导入。
用法
import { defineNuxtModule, createResolver, addComponent } from '@nuxt/kit'
export default defineNuxtModule({
meta: {
name: '@nuxt/image',
configKey: 'image',
},
async setup() {
const resolver = createResolver(import.meta.url)
addComponent({
name: 'NuxtImg',
filePath: resolver.resolve('./runtime/components/NuxtImg.vue'),
})
addComponent({
name: 'NuxtPicture',
filePath: resolver.resolve('./runtime/components/NuxtPicture.vue'),
})
},
})
类型
function addComponent (options: AddComponentOptions): void
参数
options
:一个包含以下属性的对象:
属性 | 类型 | 必需 | 描述 |
---|---|---|---|
name | string | true | 组件名。 |
filePath | string | true | 组件路径。 |
pascalName | string | false | Pascal 命名规范的组件名。如果未提供,则从组件名生成。 |
kebabName | string | false | Kebab 命名规范的组件名。如果未提供,则从组件名生成。 |
export | string | false | 指定命名导出或默认导出。如果未提供,默认为 'default' 。 |
shortPath | string | false | 组件的短路径。如果未提供,将从组件路径生成。 |
chunkName | string | false | 组件的 chunk 名称。如果未提供,将从组件名生成。 |
prefetch | boolean | false | 这些属性(prefetch/preload)用于生产环境,通过 webpack 的魔法注释配置带有 Lazy 前缀的组件的处理。了解更多请见 webpack 文档。 |
preload | boolean | false | 这些属性(prefetch/preload)用于生产环境,通过 webpack 的魔法注释配置带有 Lazy 前缀的组件的处理。了解更多请见 webpack 文档。 |
global | boolean | false | 如果启用,则注册组件为全局可用。 |
island | boolean | false | 如果启用,则以岛屿方式注册组件。你可以在 <NuxtIsland/> 组件描述中了解更多岛屿内容。 |
mode | 'client' | 'server' | 'all' | false | 指示组件应在哪端渲染:客户端、服务端或两者都有。默认是两端都渲染。 |
priority | number | false | 组件优先级。如果多个组件同名,会使用优先级最高的那个。 |
示例
如果你想要自动导入一个来自 npm 包的组件,而该组件是命名导出(非默认导出),可以使用 export
选项来指定它。
import { addComponent, defineNuxtModule } from '@nuxt/kit'
export default defineNuxtModule({
setup () {
// import { MyComponent as MyAutoImportedComponent } from 'my-npm-package'
addComponent({
name: 'MyAutoImportedComponent',
export: 'MyComponent',
filePath: 'my-npm-package',
})
},
})