模組

模組相容性

Nuxt 3 針對使用 @nuxt/kit 自動包裝器的 Nuxt 2 模組，具有基本的向後相容性層。但通常需要遵循一些步驟，才能使模組與 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 的首要且最重要的步驟。

如果您的模組中有 fixture 或範例，請將 @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，因此強烈建議考慮遷移。