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

nuxtServerInit公式ドキュメントに明記されている通り、サーバーサイドでしか実行されないのでSPAモードにしていると動きません

ではSPAモードではどうするのか?

この問題に対して、githubのイシューでnuxtClientInitを追加したらどうかと議論されていました。

未だ機能はないものの、独自のプラグインを用意してnuxtServerInitの代替処理を実現できます。

SPAモード用にクライアントの初期処理を用意する

行うことは以下になります:

  • クライアントで実行するVuexのアクションを追加
  • VuexのアクションをNuxt.jsのプラグイン機能で追加
  • Vuexアクションとしてエクスポート

クライアントで実行するVuexのアクションを追加

pluginsディレクトリにnuxt-client-init.jsというファイル名でプラグインを追加します。

プラグイン内では、Vuexのdispatch関数で「nuxtClientInit」という名前のアクションを実行するよう指定します。

VuexのアクションをNuxt.jsのプラグイン機能で追加

pluginsディレクトリに追加したnuxt-client-init.jsを実行するよう、nuxt.config.jsで指定します。

上記のように、plugins配列の一番最初に記述します。配列の順番に機能が追加されていくので、今回追加した機能は初期化用アクションなので念のため一番最初に記述しておきます。

Vuexアクションとしてエクスポート

最後に、登録した「nuxtClientInit」をVuexのアクションとしてエクスポートします。storeディレクトリのindex.jsactions.jsに記述します(index.jsにまとめて記述する方法はNuxt.jsのVersion 3より非推奨となるようです)。

これでSPAモードでもnuxtServerInitと似た処理を実現できました。


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

最終更新日:2019年5月19日

コメント

「何かそこ違うよ」「こうした方が良い」っていう部分があったら指摘して頂けると嬉しいです。

トラックバック

トラックバックは現在ありません。

Trackback: https://increment-log.com/nuxt-js-spa-nuxt-client-init/trackback/