Nuxtをユニバーサルモードで動かしている時に、CSRでだけで働く共通middlewareが欲しい時がありますね。
そんな時、すぐに思いつくのがmiddlewareの処理を prosess.client で条件を絞るという方法です。
clientOnlyMiddleware.ts
export default function (context:Context) {
if (process.client) {
// 認証処理など
}
}
しかし、このmiddlewareはページの初回読込やブラウザリロード時にはSSR側でのみ起動するため、CSR側では呼び出されません。
ユニバーサルモード時のNuxtのライフサイクルはSSRとCSRで２回呼び出されるものと片方だけで呼び出されるものがありますが、それらの中でCSR側でのみ呼び出されるmiddlewareというパターンがありません。
mixinを使ってbeforeCreateやbeforeMountの処理を共通化しても良いのですが、あまり美しいものではありません。
では、どうするのかと言うとプラグインを使います。
app/nuxt.config.js
export default {
mode: 'universal',
plugins: [
{ src: '@/plugins/initClient', mode: 'client' }
]
}
プラグインは動作モードの指定ができるため、CSRのみのプラグインを作成します。
このプラグインから、先程のmiddlewareを起動することで、問題であった初回読込やブラウザリロード時にもCSR側から起動することができます。
initClient.ts
import clientOnlyMiddleware from '@/middleware/clientOnlyMiddleware'
export default function (context:Context) {
clientOnlyMiddleware(context)
}
pluginと同じように、middlewareでもモード指定ができるように作ってくれてもいいと思うのですけどね。
それなりに要望はあるようですが、本家の回答を見ると意地でも作る気は無いような感じがします。