组件

Nuxt Kit 提供了一套实用工具来帮助您处理组件。您可以全局或局部注册组件，也可以添加要扫描的组件目录。

组件是您 Nuxt 应用程序的构建块。它们是可重用的 Vue 实例，可用于创建用户界面。在 Nuxt 中，来自组件目录的组件默认会自动导入。然而，如果您需要从其他目录导入组件或希望根据需要选择性导入组件，@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`	按路径为组件名称添加前缀。
`enabled`	`boolean`	`false`	如果设置为 `true`，则忽略扫描该目录。
`prefetch`	`boolean`	`false`	这些属性（prefetch/preload）用于生产环境中配置带有 Lazy 前缀的组件如何通过 webpack 的魔术注释处理。详细了解请参阅 webpack 文档
`preload`	`boolean`	`false`	这些属性（prefetch/preload）用于生产环境中配置带有 Lazy 前缀的组件如何通过 webpack 的魔术注释处理。详细了解请参阅 webpack 文档
`isAsync`	`boolean`	`false`	此标志表示，组件是否应该异步加载（使用单独的块），无论是否使用 Lazy 前缀。
`extendComponent`	`(component: Component) => Promise<Component \| void> \| (Component \| void)`	`false`	一个将在目录中找到的每个组件上调用的函数。它接受一个组件对象并应返回一个组件对象或一个解析为组件对象的承诺。
`global`	`boolean`	`false`	如果启用，将组件注册为全局可用。
`island`	`boolean`	`false`	如果启用，将组件注册为孤立组件。您可以在 `<NuxtIsland/>` 组件描述中了解更多关于孤立组件的信息。
`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 { 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`	组件的块名称。如果未提供，将根据组件名称生成。
`prefetch`	`boolean`	`false`	这些属性（prefetch/preload）用于生产环境中配置带有 Lazy 前缀的组件如何通过 webpack 的魔术注释处理。详细了解请参阅 webpack 文档
`preload`	`boolean`	`false`	这些属性（prefetch/preload）用于生产环境中配置带有 Lazy 前缀的组件如何通过 webpack 的魔术注释处理。详细了解请参阅 webpack 文档
`global`	`boolean`	`false`	如果启用，将组件注册为全局可用。
`island`	`boolean`	`false`	如果启用，将组件注册为孤立组件。您可以在 `<NuxtIsland/>` 组件描述中了解更多关于孤立组件的信息。
`mode`	`'client' \| 'server' \| 'all'`	`false`	此选项指示组件应在客户端、服务器或两者上渲染。默认情况下，它将在客户端和服务器上渲染。
`priority`	`number`	`false`	组件的优先级，如果多个组件具有相同的名称，则优先级最高的那个将被使用。

报告问题或者在 GitHub 上编辑此页面

自动导入

Nuxt Kit 提供了一系列实用工具，帮助您使用自动导入。这些函数允许您注册自己的工具、组合函数和 Vue API。

上下文

Nuxt Kit 提供了一组工具，帮助您处理上下文。