自動匯入

Nuxt 自動匯入輔助函式、composables 和 Vue API，讓您在應用程式中使用，而無需明確匯入它們。基於目錄結構，每個 Nuxt 應用程式也可以為其自己的 composables 和外掛程式使用自動匯入。透過 Nuxt Kit，您也可以新增自己的自動匯入。addImports 和 addImportsDir 讓您可以將匯入項目新增至 Nuxt 應用程式。addImportsSources 讓您可以將來自第三方套件的列出匯入項目新增至 Nuxt 應用程式。

這些函式旨在註冊您自己的 utils、composables 和 Vue API。對於頁面、元件和外掛程式，請參閱特定章節：頁面、元件、外掛程式。

Nuxt 自動匯入輔助函式、composables 和 Vue API，讓您在應用程式中使用，而無需明確匯入它們。基於目錄結構，每個 Nuxt 應用程式也可以為其自己的 composables 和外掛程式使用自動匯入。Composables 或外掛程式可以使用這些函式。

觀看 Vue School 關於自動匯入 Nuxt Kit 工具的影片。

`addImports`

將匯入項目新增至 Nuxt 應用程式。這讓您的匯入項目在 Nuxt 應用程式中可用，而無需手動匯入它們。

類型

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

interface Import {
  from: string
  priority?: number
  disabled?: boolean
  meta?: {
    description?: string
    docsUrl?: string
    [key: string]: any
  }
  type?: boolean
  typeFrom?: string
  name: string
  as?: string
}

參數

`imports`

類型：Import | Import[]

必填：true

具有以下屬性的物件或物件陣列

from (必填)
類型：string
要從中匯入的模組指定符。
priority (選填)
類型：number
預設值：1
匯入的優先順序，如果多個匯入項目具有相同的名稱，則將使用優先順序最高的項目。
disabled (選填)
類型：boolean
如果此匯入項目已停用。
meta (選填)
類型：object
匯入項目的 metadata。
meta.description (選填)
類型：string
匯入項目的簡短描述。
meta.docsUrl (選填)
類型：string
文件網址。
meta[key] (選填)
類型：any
其他 metadata。
type (選填)
類型：boolean
如果此匯入項目是純類型匯入。
typeFrom (選填)
類型：string
在產生類型宣告時，以此作為 from。
name (必填)
類型：string
要偵測的匯入名稱。
as (選填)
類型：string
匯入為此名稱。

範例

// https://github.com/pi0/storyblok-nuxt
import { defineNuxtModule, addImports, createResolver } 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" })
    );
  }
})

`addImportsDir`

將來自目錄的匯入項目新增至 Nuxt 應用程式。它將自動匯入目錄中的所有檔案，並使它們在 Nuxt 應用程式中可用，而無需手動匯入它們。

類型

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

參數

`dirs`

類型：string | string[]

必填：true

字串或字串陣列，其中包含要從中匯入的目錄路徑。

`options`

類型：{ prepend?: boolean }

預設值：{}

傳遞給匯入項目的選項。如果將 prepend 設定為 true，則匯入項目將會前置於匯入項目清單中。

範例

// https://github.com/vueuse/motion/tree/main/src/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'))
  },
})

`addImportsSources`

將列出的匯入項目新增至 Nuxt 應用程式。

類型

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

interface Import {
  from: string
  priority?: number
  disabled?: boolean
  meta?: {
    description?: string
    docsUrl?: string
    [key: string]: any
  }
  type?: boolean
  typeFrom?: string
  name: string
  as?: string
}

interface ImportSource extends Import {
  imports: (PresetImport | ImportSource)[]
}

type PresetImport = Omit<Import, 'from'> | string | [name: string, as?: string, from?: string]

參數

`importSources`

類型：ImportSource | ImportSource[]

必填：true

具有以下屬性的物件或物件陣列

imports (必填)
類型：PresetImport | ImportSource[]
必填：true
物件或物件陣列，可以是匯入名稱、匯入物件或匯入來源。
from (必填)
類型：string
要從中匯入的模組指定符。
priority (選填)
類型：number
預設值：1
匯入的優先順序，如果多個匯入項目具有相同的名稱，則將使用優先順序最高的項目。
disabled (選填)
類型：boolean
如果此匯入項目已停用。
meta (選填)
類型：object
匯入項目的 metadata。
meta.description (選填)
類型：string
匯入項目的簡短描述。
meta.docsUrl (選填)
類型：string
文件網址。
meta[key] (選填)
類型：any
其他 metadata。
type (選填)
類型：boolean
如果此匯入項目是純類型匯入。
typeFrom (選填)
類型：string
在產生類型宣告時，以此作為 from。
name (必填)
類型：string
要偵測的匯入名稱。
as (選填)
類型：string
匯入為此名稱。

範例

// https://github.com/elk-zone/elk
import { defineNuxtModule, addImportsSources } from '@nuxt/kit'

export default defineNuxtModule({
  setup() {
    // add imports from h3 to make them autoimported
    addImportsSources({
      from: 'h3',
      imports: ['defineEventHandler', 'getQuery', 'getRouterParams', 'readBody', 'sendRedirect'] as Array<keyof typeof import('h3')>,
    })
  }
})

相容性

Nuxt Kit 提供了一系列工具，協助您檢查模組與不同 Nuxt 版本之間的相容性。

元件

Nuxt Kit 提供了一系列工具，協助您使用元件。您可以全域或在本機註冊元件，也可以新增要掃描元件的目錄。