之前介紹透過 addComponent 的方法來加入元件

但…元件一多，要一個一個引入實在是好麻煩呀

雖然可以像 nuxt-headlessui 一樣將資訊整理成一個 array 再用 for 迴圈引入

但在沒有特殊設定的需求下還是覺得有點麻煩~

// nuxt-headlessui 
 for (const group of headlessComponents) {
      for (const e of group.exports) {
        addComponent(
          {
            name: `${options.prefix}${e}`,
            export: e,
            filePath: join(root, group.relativePath),
            chunkName: group.chunkName,
            mode: 'all'
          }
        )
      }
    }

https://github.com/P4sca1/nuxt-headlessui/blob/main/src/module.ts

這時可以使用 addComponentsDir() 來引入資料夾

一樣要記得先引入

import { addComponentsDir } from '@nuxt/kit'

接著透過 createResolver() 來引入”資料夾”

ps. createResolver() 除了可以抓取檔案之外還可以讀取資料夾喔

const resolver = createResolver(import.meta.url)

addComponentsDir({
      path: resolver.resolve('./runtime/components', 'global'),
      global: true
    })

這樣就會引入資料夾下的元件囉

因為是設定成 global 的型態，所以跟之前一樣使用即可

但~假如有個 test.vue 元件，其路徑是 component/header/test.vue

我們呼叫這個元件的方法是 <HeaderTest>

如果用剛剛的方式寫

addComponentsDir({
      path: resolver.resolve('./runtime/components', 'header'),
      global: true
    })

就會用<Test> 呼叫他

如果其他資料夾下也有 test.vue 呢? 到底在叫誰?!

(就跟在街上大喊志明!!!! 會有一堆志明回頭的概念)

為了增加他的辨識性，就可以替他加上前綴( 志明 ⇒ 新竹志明)

    addComponentsDir({
      path: resolver.resolve('./runtime/components', 'header'),
      prefix: 'header',
      global: true,
    })

如此就可以用 <HeaderTest> 呼叫到他囉，用這個方式可以添加自己想要的前綴進去

如果只是單純想要根據資料夾結構來識別元件
可以使用 pathPrefix

   addComponentsDir({
      path: resolver.resolve('./runtime', 'components'),
      pathPrefix: true,
      global: true
    })

這樣就會抓取 components 資料夾下的結構名稱來組成元件名稱囉！

PS.　想知道component 添加的狀況

可以到 playground\.nuxt\components.d.ts 裡面去看~

addComponentsDir :https://nuxt.com/docs/api/kit/components#addcomponentsdir