迁移到 Nuxt Bridge: 插件与中间件

Maschinelle Übersetzung ·0 % geprüft

新的插件格式

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

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

app/plugins/hello.ts

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.provide('injected', () => 'my injected function')
  // 现在可通过 `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 目录之外。

你也可以在 Nuxt Bridge 中使用 definePageMeta。

你可以在配置文件中通过 macros.pageMeta 选项启用它

nuxt.config.ts

import { defineNuxtConfig } from '@nuxt/bridge'

export default defineNuxtConfig({
  bridge: {
    macros: {
      pageMeta: true,
    },
  },
})

但仅适用于 middleware 和 layout。