元件

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 一個包含以下屬性的物件

屬性	型別	必需	描述
`path`	`string`	`true`	包含元件的目錄路徑（絕對或相對）。你可以使用 Nuxt 別名（~ 或 @）來引用專案內的目錄，或者直接使用類似於 require 的 npm 包路徑。
`pattern`	`string \| string[]`	`false`	接受將針對指定路徑執行的模式。
`ignore`	`string[]`	`false`	將針對指定路徑執行的忽略模式。
`prefix`	`string`	`false`	將所有匹配的元件字首加上此字串。
`pathPrefix`	`boolean`	`false`	透過其路徑為元件名稱新增字首。
`prefetch`	`boolean`	`false`	這些屬性（prefetch/preload）用於生產環境，以配置帶有 Lazy 字首的元件如何由 webpack 透過其魔法註釋處理。瞭解更多資訊，請參閱webpack 文件
`preload`	`boolean`	`false`	這些屬性（prefetch/preload）用於生產環境，以配置帶有 Lazy 字首的元件如何由 webpack 透過其魔法註釋處理。瞭解更多資訊，請參閱webpack 文件
`isAsync`	`boolean`	`false`	此標誌指示元件應非同步載入（帶有一個單獨的 chunk），無論是否使用 Lazy 字首。
`extendComponent`	`(component: Component) => Promise<Component \| void> \| (Component \| void)`	`false`	一個函式，將為目錄中找到的每個元件呼叫。它接受一個元件物件，並應返回一個元件物件或解析為元件物件的 Promise。
`global`	`boolean`	`false`	如果啟用，則註冊元件以全域性可用。
`island`	`boolean`	`false`	如果啟用，則將元件註冊為 islands。你可以在 `<NuxtIsland/>` 元件描述中瞭解更多關於 islands 的資訊。
`watch`	`boolean`	`false`	監視指定路徑的更改，包括檔案新增和檔案刪除。
`extensions`	`string[]`	`false`	Nuxt builder 支援的擴充套件。
`transpile`	`'auto' \| boolean`	`false`	使用 build.transpile 轉譯指定路徑。如果設定為 `'auto'`，如果 `node_modules/` 在路徑中，它將設定 `transpile: true`。

opts

屬性	型別	必需	描述
`prepend`	`boolean`	`false`	如果設定為 `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: 一個包含以下屬性的物件

屬性	型別	必需	描述
`name`	`string`	`true`	元件名稱。
`filePath`	`string`	`true`	元件的路徑。
`declarationPath`	`string`	`false`	元件宣告檔案的路徑。它用於生成元件的型別模板；如果未提供，則使用 `filePath`。
`pascalName`	`string`	`false`	Pascal 命名法元件名稱。如果未提供，將從元件名稱生成。
`kebabName`	`string`	`false`	Kebab 命名法元件名稱。如果未提供，將從元件名稱生成。
`export`	`string`	`false`	指定命名匯出或預設匯出。如果未提供，將設定為 `'default'`。
`shortPath`	`string`	`false`	元件的短路徑。如果未提供，將從元件路徑生成。
`chunkName`	`string`	`false`	元件的 chunk 名稱。如果未提供，將從元件名稱生成。
`prefetch`	`boolean`	`false`	這些屬性（prefetch/preload）用於生產環境，以配置帶有 Lazy 字首的元件如何由 webpack 透過其魔法註釋處理。瞭解更多資訊，請參閱webpack 文件
`preload`	`boolean`	`false`	這些屬性（prefetch/preload）用於生產環境，以配置帶有 Lazy 字首的元件如何由 webpack 透過其魔法註釋處理。瞭解更多資訊，請參閱webpack 文件
`global`	`boolean`	`false`	如果啟用，則註冊元件以全域性可用。
`island`	`boolean`	`false`	如果啟用，則將元件註冊為 island。你可以在 `<NuxtIsland/>` 元件描述中瞭解更多關於 islands 的資訊。
`模式`	`'client' \| 'server' \| 'all'`	`false`	此選項指示元件應在客戶端、伺服器還是兩者上渲染。預設情況下，它將在客戶端和伺服器上渲染。
`priority`	`number`	`false`	元件的優先順序，如果多個元件具有相同的名稱，將使用優先順序最高的元件。

示例

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

這有幫助嗎？

報告問題或在 GitHub 上編輯此頁面

自動匯入

Nuxt Kit 提供了一套實用工具來幫助你處理自動匯入。這些函式允許你註冊自己的實用工具、可組合項和 Vue API。

上下文

Nuxt Kit 提供了一套實用工具來幫助你處理上下文。