DAY 21 - 安裝 Nuxt Modules 模組 、插件 (Plugins)

Modules 模組

首先來看官方 Nuxt 模組，在這邊可以看到支援、相關的套件都有，Nuxt Modules 就是官方整合的套件，相容性支援度更高，有官方(Official)、社群(Community)、第三方(Third Party)，有在列表上的都可以照 Nuxt 官方教學安裝，也可以利用 Devtools 開發者工具一鍵安裝。

上方可篩選官方(Official)、社群(Community)、第三方(Third Party)

側邊也可以篩選分類

Devtools 安裝

第一步、啟動你的專案

npm run dev

第二步、開啟你的 Nuxt Devtools
打開 Modules

第三步、選取 Install New Module 安裝模組

第四步、搜尋 Module 模組 - pinia
這邊用安裝 Pinia當 範例教學

第五步、輸入你的 token
按下安裝後會跳出一個提示視窗，請你輸入你的 token

回到你的 VSCODE 會跳出 token ，複製再回去瀏覽器輸入

成功驗證 !! 這個步驟是把你跟 vscode 綁定驗證，接著就可以繼續安裝

第六步、安裝 Pinia
重新點選 Pinia 安裝 > 按下 install

可以看到這邊中間會提示做了哪些步驟，首先先幫你用 npm install 安裝模組，中間再去 Nuxt config 新增，你只要按下 install 即可，不用再去做那些繁瑣的設定、安裝，一鍵即可安裝

如果安裝後報錯有可能是你的版本不夠新，可以更新一下

npm update 

如果一般模組安裝不想使用 Nuxt Devtools ，其實就是下 npm install 指令然後去 Nuxtconfig 新增 modules

//nuxt.config.ts
modules: ["@pinia/nuxt"]

插件 (Plugins)

Nuxt 雖然有 Modules 但是前端開發時有各種需求，須要搭配套件來輔助開發，這時候我們就會依賴第三方套件，而 Plugins 資料夾就是擴充套件，你可以想像一下當你在使用 瀏覽器，但是你發現功能不夠，這時候我們就會到 Google 瀏覽器的擴充功能安裝擴充工具，這就是類似 Plugins 的概念。

自動註冊

在官方 Plugins 範例中，可以看到第一層才會自動註冊不需特別引入，這是因為自動引入 (Auto Imports)特性，第二層則不會自動註冊，這是要注意的，還有一個是第一層目錄下的 index.ts 也會自動引入。

plugins
 | - myPlugin.ts  // scanned
 | - myOtherPlugin
 | --- supportingFile.ts   // not scanned
 | --- componentToRegister.vue   // not scanned
 | --- index.ts  // currently scanned but deprecated

只有 myPlugin.ts 和 myOtherPlugin/index.ts 自動註冊了，其餘需手動註冊

建立插件

建立插件我們須使用 defineNuxtPlugin方法，寫法範例如下 :

export default defineNuxtPlugin(nuxtApp => {
  // Doing something with nuxtApp
})

設定插件載入順序

我們也可以手動設定載入順序，在前面加入數字設定載入順序，有些套件會有相依賴性功能，必須設定順序避免出錯

plugins/
 | - 01.myPlugin.ts //載入順序01
 | - 02.myOtherPlugin.ts //載入順序02

01.myPlugin.ts 會優先 02.myOtherPlugin.ts 載入

推薦教學文章
安裝 Plugin 插件的過程可查看這篇 :

• Ryan 大大寫的Nuxt 3 插件 (Plugins) 裡面有很詳細介紹如何安裝及教學

本來想示範安裝插件的程式碼，但是突然想不到要安裝哪個(逃，所以就附上看到不錯的教學文給大家參考