Nuxt Nation 大会即将到来。加入我们,时间为 11 月 12 日至 13 日。

插件和中间件

了解如何将 Nuxt 2 中的插件和中间件迁移到 Nuxt 3。

插件

插件现在具有不同的格式,并且只接受一个参数 (nuxtApp)。

export default (ctx, inject) => {
  inject('injected', () => 'my injected function')
})
文档 > 指南 > 目录结构 > 插件 中了解更多信息。
详细了解 nuxtApp 的格式。

迁移

  1. 迁移您的插件以使用 defineNuxtPlugin 辅助函数。
  2. 删除 nuxt.config 中位于 plugins/ 文件夹中的任何插件数组条目。此目录中顶层的所有文件(以及任何子目录中的任何索引文件)都将自动注册。无需将 mode 设置为 clientserver,您可以在文件名中指示这一点。例如,~/plugins/my-plugin.client.ts 仅在客户端加载。

路由中间件

路由中间件具有不同的格式。

export default function ({ store, redirect }) {
  // If the user is not authenticated
  if (!store.state.authenticated) {
    return redirect('/login')
  }
}

与 Nuxt 2 非常相似,放置在 ~/middleware 文件夹中的路由中间件会自动注册。然后,您可以通过名称在组件中指定它。但是,这是使用 definePageMeta 完成的,而不是作为组件选项。

navigateTo 是众多路由辅助函数之一。

文档 > 指南 > 目录结构 > 中间件 中了解更多信息。

迁移

  1. 迁移您的路由中间件以使用 defineNuxtRouteMiddleware 辅助函数。
  2. 任何全局中间件(例如在您的 nuxt.config 中)都可以放置在您的 ~/middleware 文件夹中,并带有 .global 扩展名,例如 ~/middleware/auth.global.ts