Nuxt で全ページに対して共通の処理をさせたい場合

• 概要
• 環境
• プロジェクト作成
• プラグインディレクトリの作成
• addRouteMiddleware を追加する
• navigateTo を使う場合に DomException が発生するケースがある
• 最後に
• 参考サイト

概要

例えば認証やロギングなど全ページで共通の処理をさせたい場合があります
Nuxt のミドルウェア機能を基本的には使いますが今回はルーティングに特化したミドルウェアの方法を紹介します

環境

• macOS 11.7.4
• nodejs 19.7.0
• npx 9.5.0
• yarn 1.22.19

プロジェクト作成

過去に紹介しているのでこちらを参考に作成しましょう

プラグインディレクトリの作成

今回はプラグインとして追加するのでプラグイン用のディレクトリを作成します

• mkdir nuxt-app/plugins
• touch nuxt-app/plugins/logging.ts

addRouteMiddleware を追加する

今回は addRouteMiddleware という機能を使って各ページに共通の処理を追加したいと思います

• vim nuxt-app/logging.ts

export default defineNuxtPlugin(() => {
  addRouteMiddleware('logging', (to, from) => {
    if (to.path === '/nothing') {
      // false を return することで 404 ページを表示する
      return false
    } else {
      // 共通の処理
      console.log('nothing ページ以外で実行する共通処理を記載します')
      console.log(`現在のパスは${to.path}です`)
    }
  }, { global: true })
})

global: true を設定することですべてのページでミドルウェアが呼ばれます
to.path で移動先にパスを取得できるのでパスに合わせて実行する処理/しない処理を切り分けることもできます

navigateTo を使う場合に DomException が発生するケースがある

実際に次に遷移するページの描画は行われておりその最中に navigateTo が呼び出されると DomExecption が発生することがあるようです
https://github.com/nuxt/nuxt/issues/13350 or https://github.com/nuxt/nuxt/issues/12735

回避策もあるようですが難しい場合は navigateTo の前に location.replace('/') という感じで入れるもの苦肉の策としてはありかなと思います

最後に

Nuxt で各ページに共通する処理を実行する方法を紹介しました
認証などではよく使うパターンかなと思います

参考サイト

• https://nuxt.com/docs/api/utils/add-route-middleware