模块

插件兼容性

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)

// ~/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（可选）