経緯
2021/10/12にnuxt3 betaがreleaseされました。
nuxt2ではソース編集時のhot reloadが非常に遅く、nuxt3ではvite(ヴィータ)同梱ということで、爆速hot reloadに期待していました。
それをWSL上で有効にする情報がweb上になかったので共有します。
自分はwindows上IDEで実装、WSL2上でnuxtを実行しているため、ファイル変更watchにはpolling設定が必要です。
NUXT3ドキュメントでは、watcher設定はNUXT2と同じ・・・?と思えたのですが、
https://v3.nuxtjs.org/docs/directory-structure/nuxt.config#watchers
同じにしてもhot reloadしてくれませんでした。
設定(nuxt.config.js)
NUXT2での設定
watchers: {
webpack: {
poll: true
}
},
NUXT3ではこうすると動きます。
vite:{
server: {
watch: {
usePolling: true,
},
},
},
これで、1分以上かかっていたhot reloadが、文字通り秒になりました(実際には0.x秒くらい)。
おまけ
NUXT2で部分的にvite対応するnuxt-viteというライブラリがあり、
https://vite.nuxtjs.org/getting-started/config/
そこではnuxt.config.js
内で「vite」ブロックがあったので、もしや、と思い試したらうまくいきました。
ちなみに、vue3でviteを使う場合には、vite.config.js
をルートに置くのですが、NUXT3で同様にしたところエラーになりました。