1
Help us understand the problem. What are the problem?

posted at

updated at

NUXT3×WSL2開発でhot reloadする方法

経緯

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で同様にしたところエラーになりました。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
1
Help us understand the problem. What are the problem?