[Nuxt.js]nuxtServerInitがSPAモードでは使えないので代替のアクションを用意する

  • 更新日:
  • 公開日:

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


参考:Versatile Vue.js Application · Issue #240 · nuxt/nuxt.js

書いた人

Symbol Mark

Ryoichi(しつ)

除菌ティッシュを買い込んで使いきれずによく乾かす人。

療養目的で退職し、どうやって生きていくか模索中。最近は勉強目的でLaravelやVue.js弄ったり、趣味で音で遊んでます。

※2019年10月16日現在ブログリニューアル中です。崩れなどが発生していたらすみません。

うぇぶ: @s_ryone