外掛和中介軟體

瞭解如何將 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。