模块

模块兼容性

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

如果你的模块中有一个固定装置或示例，请将 @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，因此强烈建议考虑迁移。