昨天終於引入了第一個 button 元件🎉

為了讓元件都可以順利運作，接下來先安裝元件需要的工具~

還記得在製作 tooltip 時安裝的 vue-tippy 嗎?

當初是用 plugins 的方法引入的~因此在這邊會利用 addPlugin() 這個 function 來引入

Step 1: 首先安裝 vue-tippy

npm i vue-tippy

Step 2: 接著從 @nuxt/kit 引入 addPlugin()

import { addPlugin } from '@nuxt/kit'

Step 3: 再透過 createResolver() 這個 function 來引入 vue-tippy.ts 這個檔案

並指定他在 server 或是 client 都可以執行

addPlugin({
   src: resolver.resolve('./runtime/plugins/vue-tippy.ts'),
   mode: 'all'
})

感覺完成了呢~~ ╰(〞︶〝) ╯
結果一 run 下去失敗了

terminal 噴出了這樣的錯誤

 Pre-transform error: Failed to resolve import "vue-tippy" from "src/runtime/plugins/vue-tippy.ts". Does the file exist?     

副檔名 .ts 沒錯啊??? 🤔
昨天引入 component 時有寫副檔名有( .vue) 也可以引入呀?

這時候要回到一個重要概念… TypeScript 是編程語言*，* 他會被編譯成 .mjs 和 .d.ts
所以這時候就要用 createResolver() 的特性啦!他可以在檔名或副檔名不確定的情況下依然正確引入檔案。

所以，應該要這樣寫：

addPlugin({
  src: resolver.resolve('./runtime/plugins', 'vue-tippy'),
   mode: 'all'
})

OK~這樣一來，問題應該解決了！引入 tooltip 元件也完成啦~

// module.ts
addComponent({
      name: 'tooltip',
      filePath: resolver.resolve('./runtime', 'components', 'global', 'tooltip')
    })

// app.vue
<Tooltip
        title="Tooltip on bottom"
        content="Tooltip on bottom!"
        placement="bottom"
        btn-class="btn-outline-dark"
        arrow
      />

addPlugin: https://nuxt.com/docs/api/kit/plugins