自动导入

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

Nuxt 自动导入帮助函数、组合函数和 Vue API,使你可以在整个应用中使用它们,无需显式导入。基于目录结构,每个 Nuxt 应用也可以为自己的组合函数和插件使用自动导入。

使用 Nuxt Kit 你还可以添加自己的自动导入。addImportsaddImportsDir 允许你向 Nuxt 应用添加导入。addImportsSources 允许你从第三方包添加列出的导入到 Nuxt 应用。

这些工具由 unimport 提供支持,它是 Nuxt 中使用的底层自动导入机制。

这些函数专为注册自己的工具、组合函数和 Vue API 设计。对于页面、组件和插件,请参考特定章节:页面组件插件
观看 Vue School 关于 Nuxt Kit 自动导入实用工具的视频。

addImports

向 Nuxt 应用添加导入。这样你的导入在 Nuxt 应用中即可用,无需手动导入。

用法

import { defineNuxtModule, addImports } from "@nuxt/kit";

export default defineNuxtModule({
  setup(options, nuxt) {
    const names = [
      "useStoryblok",
      "useStoryblokApi",
      "useStoryblokBridge",
      "renderRichText",
      "RichTextSchema"
    ];

    names.forEach((name) =>
      addImports({ name, as: name, from: "@storyblok/vue" })
    );
  }
})

类型

function addImports (imports: Import | Import[]): void

参数

imports:一个对象或对象数组,包含以下属性:

属性类型必填描述
namestringtrue需要被检测的导入名称。
fromstringtrue导入的模块标识符。
prioritynumberfalse导入的优先级;如果多个导入具有相同名称,则使用优先级最高的。
disabledbooleanfalse是否禁用此导入。
metaRecord<string, any>false导入的元数据。
typebooleanfalse是否为纯类型导入。
typeFromstringfalse生成类型声明时使用的 from 值。
asstringfalse以此名称导入。

addImportsDir

向 Nuxt 应用从目录添加导入。它会自动导入目录中的所有文件,使它们在 Nuxt 应用中可用,无需手动导入。

用法

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

export default defineNuxtModule({
  meta: {
    name: '@vueuse/motion',
    configKey: 'motion',
  },
  setup(options, nuxt) {
    const resolver = createResolver(import.meta.url)
    addImportsDir(resolver.resolve('./runtime/composables'))
  },
})

类型

function addImportsDir (dirs: string | string[], options?: { prepend?: boolean }): void

参数

属性类型必填描述
dirsstring | string[]true字符串或字符串数组,指定要导入的目录路径。
options{ prepend?: boolean }false导入时的选项。如果 prepend 设置为 true,导入会被添加到导入列表的前面。

addImportsSources

向 Nuxt 应用添加列出的导入。

用法

import { defineNuxtModule, addImportsSources } from '@nuxt/kit'

export default defineNuxtModule({
  setup() {
    addImportsSources({
      from: 'h3',
      imports: [
        'defineEventHandler',
        'getQuery',
        'getRouterParams',
        'readBody',
        'sendRedirect'
      ],
    })
  }
})

类型

function addImportsSources (importSources: ImportSource | ImportSource[]): void

参数

importSources:一个对象或对象数组,包含以下属性:

属性类型必填描述
fromstringtrue导入的模块标识符。
importsPresetImport | ImportSource[]true可为导入名称、导入对象或导入源的对象或对象数组。