插件和中间件

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

插件

插件现在有不同格式，只接受一个参数（nuxtApp）。

export default (ctx, inject) => {
  inject('injected', () => 'my injected function')
}

export default defineNuxtPlugin((nuxtApp) => {
  // 现在可在 `nuxtApp.$injected` 上使用
  nuxtApp.provide('injected', () => 'my injected function')

  // 你也可以改用这种格式，它带有自动类型支持
  return {
    provide: {
      injected: () => 'my injected function',
    },
  }
})

阅读更多关于 nuxtApp 的格式。

迁移

将你的插件迁移为使用 defineNuxtPlugin 辅助函数。
从你的 nuxt.config 插件数组中移除任何位于 app/plugins/ 文件夹中的条目。该目录顶层的所有文件（以及任何子目录中的 index 文件）都会被自动注册。与其将 mode 设置为 client 或 server，你可以用文件名来标识这一点。例如，~/plugins/my-plugin.client.ts 将只在客户端加载。

路由中间件

路由中间件有不同格式。

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

export default defineNuxtRouteMiddleware((to, from) => {
  const auth = useState('auth')
  if (!auth.value.authenticated) {
    return navigateTo('/login')
  }
})

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

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

迁移

将你的路由中间件迁移为使用 defineNuxtRouteMiddleware 辅助函数。
任何全局中间件（例如在 nuxt.config 中的）都可以放在你的 ~/middleware 文件夹中，并使用 .global 扩展名，例如 ~/middleware/auth.global.ts。