プラグインとミドルウェア
Nuxt 2からNuxt Bridgeの新しいプラグインとミドルウェアへの移行方法を学びましょう。
新しいプラグイン形式
Nuxt 3プラグインAPIに移行できます。これはNuxt 2の形式とは少し異なります。
プラグインは、引数としてnuxtAppを1つだけ受け取るようになりました。ドキュメントで詳細を確認できます。
plugins/hello.ts
export default defineNuxtPlugin(nuxtApp => {
nuxtApp.provide('injected', () => 'my injected function')
// now available on `nuxtApp.$injected`
})
プラグイン内で新しいNuxtコンポーザブル（
useNuxtAppやuseRuntimeConfigなど）を使用する場合は、それらのプラグインにdefineNuxtPluginヘルパーを使用する必要があります。nuxtApp.vueAppを介して互換性インターフェースが提供されていますが、独自のロジックを追加して、複数回インストールされないようにしない限り、この方法でプラグイン、ディレクティブ、mixin、またはコンポーネントを登録することは避けてください。そうでない場合、メモリリークが発生する可能性があります。新しいミドルウェア形式
Nuxt 3ミドルウェアAPIに移行できます。これはNuxt 2の形式とは少し異なります。
ミドルウェアは、引数としてtoとfromを2つだけ受け取るようになりました。ドキュメントで詳細を確認できます。
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
}
}
})
ただし、
middlewareとlayoutのみです。