模块

模块兼容性

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的第一个也是最重要的步骤。

如果您的模块中有一个测试用例或示例，请将@nuxt/bridge包添加到其配置中（参见示例）。

从CommonJS迁移到ESM

Nuxt 3原生支持TypeScript和ECMAScript模块。请查看原生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，因此强烈建议考虑迁移。