Components

Nuxt Kit 提供了一系列工具，帮助你处理组件。你可以全局或局部注册组件，也可以添加要被扫描的目录。

组件是 Nuxt 应用的构建基石。它们是可复用的 Vue 实例，可用于创建用户界面。在 Nuxt 中，来自 components 目录的组件默认会被自动导入。然而，如果你需要从其他目录导入组件，或希望按需有选择地导入它们，@nuxt/kit 提供了 addComponentsDir 和 addComponent 方法。这些工具允许你自定义组件配置，以更好地满足你的需求。

观看 Vue School 关于注入组件的视频。 :

`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`	以组件路径作为组件名前缀。
`prefetch`	`boolean`	`false`	这些属性（prefetch/preload）在生产环境中用于配置带有 Lazy 前缀的组件如何被 webpack 通过 magic comments 处理。详见 webpack 文档。
`preload`	`boolean`	`false`	这些属性（prefetch/preload）在生产环境中用于配置带有 Lazy 前缀的组件如何被 webpack 通过 magic comments 处理。详见 webpack 文档。
`isAsync`	`boolean`	`false`	该标志表明组件应被异步加载（作为单独的 chunk），无论是否使用了 Lazy 前缀。
`extendComponent`	`(component: Component) => Promise<Component \| void> \| (Component \| void)`	`false`	一个会为目录中每个被找到的组件调用的函数。它接收一个组件对象，应返回一个组件对象或解析为组件对象的 promise。
`global`	`boolean`	`false`	如果启用，将组件注册为全局可用。
`island`	`boolean`	`false`	如果启用，将组件注册为 island。你可以在 `<NuxtIsland/>` 组件描述中阅读更多关于 island 的内容。
`watch`	`boolean`	`false`	监视指定路径的变化，包括文件的添加和删除。
`extensions`	`string[]`	`false`	Nuxt 构建器支持的扩展名。
`transpile`	`'auto' \| boolean`	`false`	使用 build.transpile 转换指定路径。如果设为 `'auto'`，当路径中包含 `node_modules/` 时会将 `transpile` 设为 `true`。

opts

属性	类型	必填	描述
`prepend`	`boolean`	`false`	如果设为 `true`，该目录会用 `unshift()` 而非 `push()` 加到数组开头。

`addComponent`

注册一个要被自动导入的组件。

用法

import { addComponent, createResolver, defineNuxtModule } from '@nuxt/kit'

export default defineNuxtModule({
  meta: {
    name: '@nuxt/image',
    configKey: 'image',
  },
  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`	组件路径。
`declarationPath`	`string`	`false`	组件声明文件的路径。它用于生成组件的类型模板；如果未提供，则改用 `filePath`。
`pascalName`	`string`	`false`	Pascal 命名的组件名。如果未提供，会从组件名生成。
`kebabName`	`string`	`false`	Kebab 命名的组件名。如果未提供，会从组件名生成。
`export`	`string`	`false`	指定具名导出或默认导出。如果未提供，会设为 `'default'`。
`shortPath`	`string`	`false`	组件的短路径。如果未提供，会从组件路径生成。
`chunkName`	`string`	`false`	组件的 chunk 名称。如果未提供，会从组件名生成。
`prefetch`	`boolean`	`false`	这些属性（prefetch/preload）在生产环境中用于配置带有 Lazy 前缀的组件如何被 webpack 通过 magic comments 处理。详见 webpack 文档。
`preload`	`boolean`	`false`	这些属性（prefetch/preload）在生产环境中用于配置带有 Lazy 前缀的组件如何被 webpack 通过 magic comments 处理。详见 webpack 文档。
`global`	`boolean`	`false`	如果启用，将组件注册为全局可用。
`island`	`boolean`	`false`	如果启用，将组件注册为 island。你可以在 `<NuxtIsland/>` 组件描述中阅读更多关于 island 的内容。
`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',
    })
  },
})