プラグインとミドルウェア

Nuxt 2 から Nuxt Bridge の新しいプラグインとミドルウェアに移行する方法を学びましょう。

新しいプラグイン形式

Nuxt 3 のプラグイン API に移行できるようになりました。これは Nuxt 2 とは形式が少し異なります。

プラグインは 1 つの引数 (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 とは形式が少し異なります。

ミドルウェアは 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 のみに限られます。