v3.16
Nuxt on GitHub

插件和中间件

学习如何从Nuxt 2迁移到Nuxt Bridge的新插件和中间件。

新插件格式

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

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

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

新中间件格式

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

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

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

definePageMeta

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

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

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

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