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

Nuxt 2 から Nuxt 3 のプラグインとミドルウェアへの移行方法を学びます。

プラグイン

プラグインの形式が変更され、引数は 1 つ (nuxtApp) のみとなりました。

export default (ctx, inject) => {
  inject('injected', () => 'my injected function')
}
Docs > 4 X > Guide > Directory Structure > Pluginsで詳細を読むことができます。
nuxtApp の形式についてさらに詳しく読む。

移行

  1. defineNuxtPlugin ヘルパー関数を使用するようにプラグインを移行してください。
  2. app/plugins/ フォルダ内にある nuxt.config プラグイン配列のエントリをすべて削除してください。このディレクトリのトップレベルにあるすべてのファイル(およびサブディレクトリ内のインデックスファイル)は自動的に登録されます。modeclient または server に設定する代わりに、ファイル名でこれを示すことができます。例えば、~/plugins/my-plugin.client.ts はクライアントサイドでのみ読み込まれます。

ルーティングミドルウェア

ルーティングミドルウェアの形式が変更されました。

export default function ({ store, redirect }) {
  // If the user is not authenticated
  if (!store.state.authenticated) {
    return redirect('/login')
  }
}

Nuxt 2 と同様に、~/middleware フォルダに配置されたルーティングミドルウェアは自動的に登録されます。その後、コンポーネントで名前を指定して使用できます。ただし、これはコンポーネントオプションとしてではなく、definePageMeta で行われます。

navigateTo は、多くのルーティングヘルパー関数の一つです。

詳細については、Docs > 4 X > Guide > Directory Structure > App > Middleware を参照してください。

移行

  1. defineNuxtRouteMiddleware ヘルパー関数を使用するようにルーティングミドルウェアを移行してください。
  2. 任意のグローバルミドルウェア(nuxt.config のようなもの)は、.global 拡張子を付けて ~/middleware フォルダに配置できます。例えば、~/middleware/auth.global.ts のようになります。