6
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2021-10-13

経緯

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

6
2
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?