nuxtServerInit
は公式ドキュメントに明記されている通り、サーバーサイドでしか実行されないのでSPAモードにしていると動きません。
ではSPAモードではどうするのか?
この問題に対して、githubのイシューでnuxtClientInit
を追加したらどうかと議論されていました。
未だ機能はないものの、独自のプラグインを用意してnuxtServerInit
の代替処理を実現できます。
SPAモード用にクライアントの初期処理を用意する
行うことは以下になります:
- クライアントで実行するVuexのアクションを追加
- VuexのアクションをNuxt.jsのプラグイン機能で追加
- Vuexアクションとしてエクスポート
クライアントで実行するVuexのアクションを追加
plugins
ディレクトリにnuxt-client-init.js
というファイル名でプラグインを追加します。
export default async context => {
return await context.store.dispatch("nuxtClientInit", context);
};
プラグイン内では、Vuexのdispatch
関数で「nuxtClientInit」という名前のアクションを実行するよう指定します。
VuexのアクションをNuxt.jsのプラグイン機能で追加
plugins
ディレクトリに追加したnuxt-client-init.js
を実行するよう、nuxt.config.js
で指定します。
module.exports = {
plugins: [
{ src: '~/plugins/nuxt-client-init.js', ssr: false },
{ src: "~plugins/other-plugin", ssr: false }
]
}
上記のように、plugins配列の一番最初に記述します。配列の順番に機能が追加されていくので、今回追加した機能は初期化用アクションなので念のため一番最初に記述しておきます。
Vuexアクションとしてエクスポート
最後に、登録した「nuxtClientInit」をVuexのアクションとしてエクスポートします。store
ディレクトリのindex.js
かactions.js
に記述します(index.jsにまとめて記述する方法はNuxt.jsのVersion 3より非推奨となるようです)。
export default {
// 処理を記述(awaitの例なのでasyncを指定しています)
async nuxtClientInit({ commit, state }, { app }) {
return await Promise.all([
app.$axios
.$get(state.apiA)
.then(response => {
console.log(response);
})
.catch(() => {}),
app.$axios
.$get(state.apiB)
.then(response => {
console.log(response);
})
.catch(() => {}),
]);
}
};
これでSPAモードでもnuxtServerInit
と似た処理を実現できました。