Nuxt.jsのmiddleware(ミドルウェア)の基本的な使い方

2021年7月17日Vue.js

Nuxt.jsのmiddlewareの基本的な使い方を紹介します。

middlewareとは

pagesやlayoutsのレンダリングの前に実行される実行される関数です。
pagesの前のため、まだrouterの設定もされていない状態で関数が実行されます。
Nuxt.jsでは、middlewareディレクトリが自動的に作成されるので、そこにカスタム関数を定義することができます。

middlewareの使い方

1. middlewareディレクトリにjsファイルを作成する
2. そのjsファイルに関数を記述してexportする
3. コンポーネントに登録する

middlewareディレクトリにjsファイルを作成する

middlewareにたとえば、consoleLog.jsを作成します。
そして、次のように記述します。

export default function (context) {
  console.log('ミドルウェア')
}

関数によってサーバーサイドでもクライアントサイドでも実行できます。

コンポーネントに登録する

pagesの好きなフォルダのindex.vueのscript内に以下のように記述します。

  middleware: 'consoleLog',

そうすると、このmiddlewareを登録したindex.vueが呼び出されるたびに登録したmiddlewareの関数が実行されます。
上の場合、該当のページにページ内でクリックしたりしてアクセスするとブラウザ(
クライアントサイド)のコンソールでメッセージを確認できます。
リロードすると、サーバーサイドでメッセージを確認できます。

layoutsのファイルに登録する

また、layoutsフォルダのファイルにも同様にして登録することができます。
その場合、そのlayouｔｓが適用されているファイルの数だけ関数が実行されます。

nuxt.config.jsに登録する

また、nuxt.config.jsに登録することも可能です。

  router: {
    middleware: 'consoleLog'
  },

middlewareの具体的な使い方

middlewareを使ってログインしていないユーザーをリダイレクトするには、middlewareを使ってログインしていないユーザーをリダイレクトする方法を参考にしてみてください。