遷移至 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 組合式函式（例如 useNuxtApp 或 useRuntimeConfig），您需要為這些外掛程式使用 defineNuxtPlugin 輔助函式。

雖然透過 nuxtApp.vueApp 提供了一個相容性介面，但您應該避免以這種方式註冊外掛程式、指令、混合或元件，而不加入您自己的邏輯以確保它們不會被多次安裝，否則可能會導致記憶體洩漏。

您現在可以遷移到 Nuxt 3 中介軟體 API，其格式與 Nuxt 2 略有不同。

中介軟體現在僅接收兩個參數（to、from）。您可以在文件中找到更多資訊。

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

在 middleware 目錄之外不支援使用 defineNuxtRouteMiddleware。

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

您可以使用設定檔中的 macros.pageMeta 選項啟用它

nuxt.config.ts

import { defineNuxtConfig } from '@nuxt/bridge'

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

但僅適用於 middleware 和 layout。

舊版組合式 API

了解如何使用 Nuxt Bridge 遷移到組合式 API。

新的組合式 API

Nuxt Bridge 實作與 Nuxt 3 相容的組合式函式。