组件

源文件
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 包含以下属性的对象

属性类型必需描述
pathstringtrue包含组件的目录的路径（绝对或相对）。您可以使用 Nuxt 别名（~ 或 @）来引用项目内的目录，或直接使用类似于 require 的 npm 包路径。
patternstring | string[]false应用于指定路径的接受模式。
ignorestring[]false应用于指定路径的忽略模式。
prefixstringfalse将此字符串作为前缀添加到所有匹配的组件。
pathPrefixbooleanfalse通过其路径为组件名称添加前缀。
prefetchbooleanfalse这些属性（prefetch/preload）在生产环境中用于配置 webpack 通过其魔术注释如何处理带有 Lazy 前缀的组件。了解更多信息请参阅webpack 文档
preloadbooleanfalse这些属性（prefetch/preload）在生产环境中用于配置 webpack 通过其魔术注释如何处理带有 Lazy 前缀的组件。了解更多信息请参阅webpack 文档
isAsyncbooleanfalse此标志指示组件应异步加载（使用单独的块），无论是否使用 Lazy 前缀。
extendComponent(component: Component) => Promise<Component | void> | (Component | void)false一个函数，将对在目录中找到的每个组件调用。它接受一个组件对象，并应返回一个组件对象或解析为组件对象的 Promise。
globalbooleanfalse如果启用，则将组件注册为全局可用。
islandbooleanfalse如果启用，则将组件注册为岛屿。您可以阅读有关岛屿的更多信息，请参阅 <NuxtIsland/> 组件描述。
watchbooleanfalse监视指定路径的变化，包括文件的添加和删除。
extensionsstring[]falseNuxt 构建器支持的扩展。
transpile'auto' | booleanfalse使用 build.transpile 转译指定的路径。如果设置为 'auto'，如果路径中包含 node_modules/，它将设置 transpile: true。

opts

属性类型必需描述
prependbooleanfalse如果设置为 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: 包含以下属性的对象

属性类型必需描述
namestringtrue组件名称。
filePathstringtrue组件的路径。
declarationPathstringfalse组件声明文件的路径。它用于生成组件的类型模板；如果未提供，则使用 filePath 代替。
pascalNamestringfalse帕斯卡命名法（Pascal case）的组件名称。如果未提供，将从组件名称生成。
kebabNamestringfalseKebab 命名法的组件名称。如果未提供，将从组件名称生成。
exportstringfalse指定命名导出或默认导出。如果未提供，则设置为 'default'。
shortPathstringfalse组件的短路径。如果未提供，将从组件路径生成。
chunkNamestringfalse组件的块名称。如果未提供，将从组件名称生成。
prefetchbooleanfalse这些属性（prefetch/preload）在生产环境中用于配置 webpack 通过其魔术注释如何处理带有 Lazy 前缀的组件。了解更多信息请参阅webpack 文档
preloadbooleanfalse这些属性（prefetch/preload）在生产环境中用于配置 webpack 通过其魔术注释如何处理带有 Lazy 前缀的组件。了解更多信息请参阅webpack 文档
globalbooleanfalse如果启用，则将组件注册为全局可用。
islandbooleanfalse如果启用，则将组件注册为岛屿。您可以阅读有关岛屿的更多信息，请参阅 <NuxtIsland/> 组件描述。
模式'client' | 'server' | 'all'false此选项指示组件应在客户端、服务器还是两者上渲染。默认情况下，它将在客户端和服务器上渲染。
prioritynumberfalse组件的优先级，如果多个组件名称相同，则使用优先级最高的组件。

示例

如果你想从 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',
    })
  },
})