Nuxt.js middlewareの簡単な使い方

Nuxt.js middlewareの簡単な使い方

middolewareを利用するとレンダリングが実行される前に、処理を記述することが可能で、また、共通処理も記述することが可能です。

環境

  • OS  Ubuntu19.10
  • node v12.13.0
  • npm 6.12.1
  • Nuxt.js v2.10.2

nuxtインストール

nuxt-testという名前でプロジェクトを作成

middleware利用

middlewareディレクトリ配下にtest.jsを下記のコードで作成します

nuxt.config.jsに下記のコードを追加します。

yarn devで起動すると、test middlewareと表示されることが確認できます。

pages配下にtest.vueという適当なファイルを作成して、ブラウザから http://localhost:3000 にアクセスにアクセスすると、同様にコンソールに「test middleware」と表示されることが確認できます。