插件和中间件

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

新插件格式

现在您可以迁移到 Nuxt 3 插件 API，其格式与 Nuxt 2 略有不同。

插件现在只接受一个参数（nuxtApp）。您可以在文档中了解更多信息。

app/plugins/hello.ts
export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.provide('injected', () => 'my injected function')
  // now available on `nuxtApp.$injected`
})
如果您想在插件中使用新的 Nuxt 可组合项（例如useNuxtApp或useRuntimeConfig），您需要为这些插件使用defineNuxtPlugin辅助函数。
尽管通过nuxtApp.vueApp提供了兼容性接口，但您应该避免以这种方式注册插件、指令、混入或组件，而不添加自己的逻辑以确保它们不会被多次安装，否则可能会导致内存泄漏。

新中间件格式

现在您可以迁移到 Nuxt 3 中间件 API，其格式与 Nuxt 2 略有不同。

中间件现在只接受两个参数（to，from）。您可以在文档中了解更多信息。

export default defineNuxtRouteMiddleware((to) => {
  if (to.path !== '/') {
    return navigateTo('/')
  }
})
defineNuxtRouteMiddleware的使用在app/middleware目录之外不受支持。

definePageMeta

您还可以在 Nuxt Bridge 中使用definePageMeta。

您可以通过配置文件中的macros.pageMeta选项启用。

nuxt.config.ts
import { defineNuxtConfig } from '@nuxt/bridge'

export default defineNuxtConfig({
  bridge: {
    macros: {
      pageMeta: true,
    },
  },
})
但仅适用于middleware和layout。