Vagrant + Nuxt.jsでホットリロードが効かないときのnuxt.config.jsへの設定

小ネタ。Vagrantでconfig.vm.synced_folderを使ってWindowsとのフォルダ同期をし、そこにNuxt.jsをインストールしたものの、SSHでnpm run devしながらpages配下のファイルとかいろいろいじってもホットリロードがされなかったのでどうにかしました。

Vagrant、どうやらWindows環境だとシンボリックリンク系の権限の問題でうまくnpm initが走らなかったりして¹、結局NuxtのインストールもいったんVagrantからじゃなくてWindowsのPowershellからpackage.json直書き、npm installを叩くとかいうゴリ押しをしたので、その辺が原因な気がします。

TL;DR

nuxt.config.jsに以下の記述を追加するだけ。

nuxt.config.js

export default {
  watchers: {
    webpack: {
      poll: true,
    }
  }
}

詳細

いろいろ調べてる中で、
【Vue.js】Vue CLI 3のホットリロードをWindows+Vagrant環境で動かす | kawadeblog https://kawadev.net/vue-cli3-hmr/
↑
こんな記述を見つけてホットリロードがwebpackのwatcherを使って動いてることに気付いたので、nuxt.config.jsに明示してあげればいいと考えて実際に書いてみたらうまく動きました。

実際の書き方については
watchers プロパティ - NuxtJS https://ja.nuxtjs.org/docs/2.x/configuration-glossary/configuration-watchers
↑
ここを参照しました。もしうまく動かなかったらリファレンス通り、poll: 1000とかで設定してもいいかも。

まとめ

Windowsはもう少しデベロッパーに優しくなってください。

1. https://tokibito.hatenablog.com/entry/2018/02/28/012014 ←こういうのが原因らしい。いろいろ対策しても結局直らなかったけど…… ↩