模組

模組相容性

Nuxt 3 對於 Nuxt 2 模組，使用 @nuxt/kit 自動包裝器具有基本的向後相容層。但通常需要遵循一些步驟，才能讓模組與 Nuxt 3 相容，有時，需要使用 Nuxt Bridge 來實現跨版本相容性。

我們已準備一份 專門指南，說明如何使用 @nuxt/kit 編寫適用於 Nuxt 3 的模組。目前最佳的遷移路徑是遵循該指南並重寫您的模組。本指南的其餘部分包含一些準備步驟，如果您希望避免完全重寫，同時使模組與 Nuxt 3 相容，這些步驟會很有幫助。

外掛相容性

Nuxt 3 外掛與 Nuxt 2 並不完全向後相容。

Vue 相容性

使用 Composition API 的外掛或元件需要獨有的 Vue 2 或 Vue 3 支援。

透過使用 vue-demi，它們應能與 Nuxt 2 和 3 相容。

模組遷移

當 Nuxt 3 使用者新增您的模組時，您將無法存取模組容器 (this.*)，因此您需要使用 @nuxt/kit 中的工具來存取容器功能。

使用 @nuxt/bridge 進行測試

遷移到 @nuxt/bridge 是支援 Nuxt 3 的第一個也是最重要的步驟。

如果您的模組中有夾具或範例，請將 @nuxt/bridge 套件新增至其設定 (請參閱 範例)

從 CommonJS 遷移至 ESM

Nuxt 3 原生支援 TypeScript 和 ECMAScript 模組。請查看 原生 ES 模組 以了解更多資訊和升級方式。

確保外掛預設匯出

如果您注入一個沒有 export default 的 Nuxt 外掛 (例如全域 Vue 外掛)，請確保在其末尾新增 export default () => { }。

// ~/plugins/vuelidate.js
import Vue from 'vue'
import Vuelidate from 'vuelidate'

Vue.use(Vuelidate)

避免執行階段模組

在 Nuxt 3 中，Nuxt 現在是一個僅限於建置階段的依賴項，這表示模組不應嘗試掛鉤 Nuxt 執行階段。

您的模組應該即使只被新增至 buildModules (而不是 modules) 也能正常運作。例如

• 避免在 Nuxt 模組中更新 process.env 並由 Nuxt 外掛讀取；請改用 runtimeConfig。
• (*) 避免在生產環境中依賴像是 vue-renderer:* 的執行階段掛鉤
• (*) 避免透過在模組內匯入來新增 serverMiddleware。請改為參照檔案路徑來新增它們，以便它們獨立於模組的上下文

(*) 除非僅適用於 nuxt dev 目的，並且以 if (nuxt.options.dev) { } 保護。

使用 TypeScript (選用)

雖然這不是必須的，但大多數 Nuxt 生態系統都正在轉向使用 TypeScript，因此強烈建議您考慮遷移。