迁移到 Nuxt Bridge：插件和中间件

新的插件格式

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

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

plugins/hello.ts

export default defineNuxtPlugin(nuxtApp => {
  nuxtApp.provide('injected', () => 'my injected function')
  // now available on `nuxtApp.$injected`
})

如果您想在插件中使用新的 Nuxt composables（例如 useNuxtApp 或 useRuntimeConfig），则需要为这些插件使用 defineNuxtPlugin 辅助函数。

尽管通过 nuxtApp.vueApp 提供了兼容性接口，但您应避免以这种方式注册插件、指令、mixins 或组件，除非您添加自己的逻辑以确保它们不会被多次安装，否则可能会导致内存泄漏。

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

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

export default defineNuxtRouteMiddleware
((to
) => {
  if (to
.path
 !== '/') {
    return navigateTo
('/')
  }
})

defineNuxtRouteMiddleware 的使用在中间件目录之外不受支持。

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

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

nuxt.config.ts

import { defineNuxtConfig } from '@nuxt/bridge'

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

但仅适用于 middleware 和 layout。

传统 Composition API

了解如何使用 Nuxt Bridge 迁移到 Composition API。

新的 Composition API

Nuxt Bridge 实现了与 Nuxt 3 兼容的 composables。