插件和中间件

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

新的插件格式

你现在可以迁移到 Nuxt 3 的插件 API,它的格式与 Nuxt 2 略有不同。

插件现在只接收一个参数(nuxtApp)。你可以在文档中了解更多。

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

新的中间件格式

你现在可以迁移到 Nuxt 3 的中间件 API,它的格式与 Nuxt 2 略有不同。

中间件现在只接收两个参数(tofrom)。你可以在文档中了解更多。

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
    }
  }
})
但仅限于 middlewarelayout