插件与中间件

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

插件

插件现在采用不同的格式,只接收一个参数(nuxtApp)。

export default (ctx, inject) => {
  inject('injected', () => 'my injected function')
})
Read more in Docs > Guide > Directory Structure > Plugins.
阅读更多关于 nuxtApp 格式的信息。

迁移

  1. 将你的插件迁移为使用 defineNuxtPlugin 辅助函数。
  2. 移除 nuxt.config 中 plugins 数组里位于 plugins/ 文件夹内的任何条目。该目录下顶层的所有文件(以及子目录中的任何 index 文件)都会被自动注册。你可以通过文件名来指定插件仅在客户端或服务端加载,而不必设置 mode。例如,~/plugins/my-plugin.client.ts 只会在客户端加载。

路由中间件

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

export default function ({ store, redirect }) {
  // 如果用户未认证
  if (!store.state.authenticated) {
    return redirect('/login')
  }
}

与 Nuxt 2 类似,放置在 ~/middleware 文件夹中的路由中间件会被自动注册。你可以通过名称在组件中指定,但这通过 definePageMeta 来完成,而非组件选项。

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

Read more in Docs > Guide > Directory Structure > Middleware.

迁移

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