Nuxt3 インストールしてみた

はじめに

Nuxt3 で開発した時、色々とつまづきポイントがあったので記事にしたいと思います。

インストール

まずは公式ドキュメントを参考にセットアップ
https://v3.nuxtjs.org/getting-started/installation

$ npx nuxi init nuxt3-app
$ cd nuxt3-app
$ npm install
$ npm run dev

無事、サンプル画面が表示されました。

dev モード時のホットリロードの挙動がおかしい？

この状態だとパッと見、気づきにくいですが、
なぜかリロードが頻繁に発生していることがあります。

ブラウザの開発者モードでコンソールを見てみると、
[vite] connecting... と出てはリロードが繰り返されています。

Vite さんとのコネクションができず、何度もリトライしている模様。
ローカルで開発している場合は port を指定してあげれば解決しました。
proxy 等を挟んでいる場合は必要に応じて host 等を指定してください。

nuxt.config.ts

import { defineNuxtConfig } from 'nuxt3'

// https://v3.nuxtjs.org/docs/directory-structure/nuxt.config
export default defineNuxtConfig({
  vite: {
    server: {
      port: 3001,
      hmr: {
        // protocol: 'ws',
        // host: 'localhost',
        port: 3001,
      }
    }
  }
})

終わり

導入はかなり簡単ですね。
ベータ版でドキュメントもまだまだ少ないので躓いた時がしんどいですが、このお手軽さは非常に嬉しいです。

ちなみにリリースビルドはまだ非推奨みたいですが、動いてはいるみたいです。

$ npm run build
$ npm run start

公開は自己責任でお願いします🙇‍♂️
最後までありがとうございました。