Nuxt3 のプロジェクトを新規作成するためのコマンドと注意点についてまとめました。

結論

プロジェクトを作成したいディレクトリに移動して、

npx nuxi init app-name
cd app-name
yarn install
yarn dev

http://localhost:3000/ を開いて表示されていれば OK です。

(※ app-name は任意のプロジェクト名)

ドキュメント

node のバージョンが 足りないとエラーが発生する

バージョンが足りていないと、yarn install の段階で以下のようなエラーが出ます。

error nuxt3@3.0.0-27277498.850ef69: The engine "node" is incompatible with this module. Expected version "^14.16.0 || ^16.11.0 || ^17.0.0". Got "14.15.4"
error Found incompatible module.

当時、自分のローカルの node のバージョンが 14.15.4 だったので、以上のようなエラー文が出てしまいました。

現在は、バージョンアップして解決しましたが、

JavaScript のフレームワークやライブラリに関しては、Node のバージョンアップの影響を受けやすいので、コマンドを打った後のログをよく読み、エラーが起きていないことを確認することが大切です。

Node の最新バージョンを入れる方法

ローカルを最新バージョンにする方法

node 公式ダウンロードページ

こちらのページで、LTS 版をインストールしてバージョンアップする方法が一番楽だと感じています。

バージョン管理ツール

JavaScript のバージョン管理ツールは、volta を使っています。

色々なプロジェクトを触る際に、バージョンをコロコロ変更する必要がある人にオススメです。

https://docs.volta.sh/guide/getting-started

Node.js のバージョン管理は Volta に決定

Docker のイメージ

こちらから、好きなイメージを選んでください。

https://hub.docker.com/_/node

まとめ

以上、Nuxt3 のプロジェクトを新規作成するコマンドだけの記事でした。

開発でお悩みの方おりましたら、お気軽にご相談ください。