Nuxt3 ホットリロードで使用するポートの番号をデフォルトの24678から変更する

はじめに

Nuxt3のプロジェクトが複数ある場合などに、デフォルトで設定されたホットリロード用のポート番号が被ってしまうため変更する必要があると思います。
タイトル通りですが、この記事はその変更方法について書いています。

環境

• Nuxt：3.0.0
• Vue：3.2.45
• Vuetify：3.0.2

nuxt.config.tsを修正する

変更は簡単でnuxt.config.tsに下記のように設定を追加します。

nuxt.config.ts

export default defineNuxtConfig({
  vite: {
    server: {
      hmr: {
           port: 24600
      }
    }
  }
})

上記のように設定するとホットリロード用のポート番号が24678から24600に変更されます。

Dockerを使用している方はdocker-compose.ymlファイルなどからポートの設定を変更してください。

参考