模組

模組相容性

Nuxt 3 使用 @nuxt/kit 自動封裝器為 Nuxt 2 模組提供了一個基本的向後相容層。但通常需要遵循一些步驟才能使模組與 Nuxt 3 相容，有時為了跨版本相容性，需要使用 Nuxt Bridge。

我們準備了一份專用指南，用於使用 @nuxt/kit 編寫適用於 Nuxt 3 的模組。目前最佳的遷移路徑是遵循該指南並重寫您的模組。本指南的其餘部分包括瞭如果您希望避免完全重寫但仍使模組與 Nuxt 3 相容的準備步驟。

外掛相容性

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

Vue 相容性

使用組合式 API 的外掛或元件需要專屬的 Vue 2 或 Vue 3 支援。

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

模組遷移

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

使用 @nuxt/bridge 進行測試

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

如果您的模組中有 fixture 或示例，請在其配置中新增 @nuxt/bridge 包（請參閱示例）

從 CommonJS 遷移到 ESM

Nuxt 3 原生支援 TypeScript 和 ECMAScript Modules。請檢視原生 ES 模組以獲取更多資訊和升級。

確保外掛預設匯出

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

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

Vue.use(Vuelidate)

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

Vue.use(Vuelidate)

export default () => { }

避免執行時模組

在 Nuxt 3 中，Nuxt 現在是一個僅在構建時才需要的依賴項，這意味著模組不應該嘗試掛鉤到 Nuxt 執行時。

即使您的模組只新增到buildModules（而不是 modules），它也應該能正常工作。例如

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

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

使用 TypeScript（可選）

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