组件

Nuxt Kit 提供了一组实用程序来帮助你使用组件。你可以全局或本地注册组件，还可以添加要扫描组件的目录。

组件是 Nuxt 应用的构建块。它们是可重用的 Vue 实例，可用于创建用户界面。在 Nuxt 中，组件目录中的组件默认会被自动导入。但是，如果你需要从其他目录导入组件，或者希望根据需要选择性地导入它们，@nuxt/kit 提供了 addComponentsDir 和 addComponent 方法。这些实用程序允许你自定义组件配置，以更好地满足你的需求。

¥Components are the building blocks of your Nuxt application. They are reusable Vue instances that can be used to create a user interface. In Nuxt, components from the components directory are automatically imported by default. However, if you need to import components from an alternative directory or wish to selectively import them as needed, @nuxt/kit provides the addComponentsDir and addComponent methods. These utils allow you to customize the component configuration to better suit your needs.

观看 Vue School 的视频，了解如何注入组件。¥Watch Vue School video about injecting components.

`addComponentsDir`

注册一个目录，用于扫描组件，并且仅在使用时导入。请记住，在你指定 global: true 选项之前，这不会全局注册组件。

¥Register a directory to be scanned for components and imported only when used. Keep in mind, that this does not register components globally, until you specify global: true option.

用法

¥Usage

export default defineNuxtModule({
  meta: {
    name: '@nuxt/ui',
    configKey: 'ui',
  },
  setup() {
    addComponentsDir({
      path: resolve('./runtime/components'),
      prefix: 'U',
      pathPrefix: false
    })
  }
})

类型

¥Type

function addComponentsDir (dir: ComponentsDir, opts: { prepend?: boolean } = {}): void

参数

¥Parameters

dir 具有以下属性的对象：

¥dir An object with the following properties:

属性	类型	必需	描述
`path`	`string`	`true`	包含组件的目录的路径（绝对路径或相对路径）。你可以使用 Nuxt 别名（~ 或 @）引用项目内的目录，或者直接使用类似于 require 的 npm 包路径。
`pattern`	`string \| string[]` lang="ts"}	`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`	此标志表示无论是否使用 Lazy 前缀，组件都应异步加载（使用单独的块）。
`extendComponent`	`(component: Component) => Promise<Component \| void> \| (Component \| void)` lang="ts"}	`false`	一个函数，用于在目录中找到每个组件时调用。它接受一个组件对象，并返回一个组件对象或一个解析为组件对象的 Promise。
`global`	`boolean`	`false`	如果启用，则将组件注册为全局可用。
`island`	`boolean`	`false`	如果启用，则将组件注册为孤岛。你可以在 `<NuxtIsland/>` 组件描述中阅读有关 islands 的更多信息。
`watch`	`boolean`	`false`	查看指定路径的更改，包括文件的添加和删除。
`extensions`	`string[]`	`false`	Nuxt 构建器支持的扩展。
`transpile`	`'auto' \| boolean` lang="ts"}	`false`	使用 build.transpile 转译指定路径。如果设置为 `'auto'`，当 `node_modules/` 位于路径中时，它将设置 `transpile: true`。

opts

属性	类型	必需	描述
`prepend`	`boolean`	`false`	如果设置为 `true`，则目录将使用 `unshift()` 而不是 `push()` 添加到数组的前面。

`addComponent`

注册要自动导入的组件。

¥Register a component to be automatically imported.

用法

¥Usage

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'),
    })
  },
})

类型

¥Type

function addComponent (options: AddComponentOptions): void

参数

¥Parameters

options：具有以下属性的对象：

¥options: An object with the following properties:

属性	类型	必需	描述
`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）在生产环境中用于配置 webpack 如何通过其魔法注释处理带有 Lazy 前缀的组件。了解更多关于 webpack 文档的信息
`preload`	`boolean`	`false`	这些属性（prefetch/preload）在生产环境中用于配置 webpack 如何通过其魔法注释处理带有 Lazy 前缀的组件。了解更多关于 webpack 文档的信息
`global`	`boolean`	`false`	如果启用，则将组件注册为全局可用。
`island`	`boolean`	`false`	如果启用，则将组件注册为孤岛。你可以在 `<NuxtIsland/>` 组件描述中阅读有关 islands 的更多信息。
`mode`	`'client' \| 'server' \| 'all'` lang="ts"}	`false`	此选项指示组件应在客户端、服务器还是两者上渲染。默认情况下，它会在客户端和服务器上渲染。
`priority`	`number`	`false`	组件的优先级，如果多个组件同名，则将使用优先级最高的组件。

自动导入

Nuxt Kit 提供了一组实用程序来帮助你使用自动导入。这些函数允许你注册自己的实用程序、可组合函数和 Vue API。

上下文

Nuxt Kit 提供了一组实用程序来帮助你使用上下文。