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と似た処理を実現できました。
