こんにちは、かつコーチです。
前回、Nuxt.jsがどんなフレームワークなのかを解説しました。
今回はいよいよ、実際に手元でNuxt.jsのプロジェクトを作成していきます。
コマンドをコピペするだけでも動きますが、意味も理解しながら進めましょう。
つまずきやすいポイントも実体験ベースで紹介します。
事前準備
Node.jsのバージョン確認
Nuxt.jsを動かすには、Node.jsが必要です。
Node.jsとは、ブラウザの外でJavaScriptを実行できる環境のことです。
ターミナルで、まずは以下のコマンドを実行してください。
node -v
Nuxt.jsは、Node.jsのアクティブLTS版以上を推奨しています。
LTS版とは、長期的にサポートが保証されている安定版のことです。
執筆時点では、Node.js 20系以上を用意しておけばまず問題ありません。
もしバージョンが古い、またはNode.js自体が入っていない場合は、公式サイトやバージョン管理ツール（nvmなど）から最新のLTS版を導入してください。
つまずいた実例：古いNodeでインストールが止まった話
私が久しぶりにNuxtの新規案件を立ち上げたとき、案件用のPCにNode.js 16が残っていました。
そのままnpx nuxi@latest initを実行したところ、途中で処理が止まり、次のような警告が出ました。
npm warn EBADENGINE Unsupported engine {
npm warn EBADENGINE package: 'nuxt@x.x.x',
npm warn EBADENGINE required: { node: '>=20.x' },
npm warn EBADENGINE current: { node: 'v16.20.2' }
}
原因はシンプルで、Nuxtが要求するNode.jsのバージョンを満たしていなかったことでした。
nvmでnvm install 20→nvm use 20と切り替えたところ、あっさり解決しました。
「なぜか途中で止まる」というときは、まずNode.jsのバージョンを疑ってみてください。
基本の書き方 / 実装手順
手順1：プロジェクトを作成する
Node.jsの準備ができたら、プロジェクトを作成するディレクトリで次のコマンドを実行します。
npx nuxi@latest init my-nuxt-app
nuxiは、Nuxt公式のプロジェクト作成・管理用CLIツールです。
かつてはcreate-nuxt-appというコマンドが使われていましたが、現在はnuxi initが標準の方法になっています。
コマンドを実行すると、使用するパッケージマネージャーを聞かれます。
| パッケージマネージャー | 特徴 | 選ぶ判断軸 |
|---|---|---|
| npm | Node.jsに標準搭載。情報量が最も多い | 迷ったらこれでOK |
| pnpm | ディスク容量を節約でき、インストールが速い | チームで速度を重視するとき |
| yarn | npmより古くからある高機能なツール | 既存プロジェクトがyarn前提のとき |
初めての場合は、素直にnpmを選んで問題ありません。
手順2：依存パッケージをインストールする
選んだパッケージマネージャーによっては、初期化と同時に依存パッケージがインストールされます。
もし手動でインストールする場合は、作成されたディレクトリに移動してから実行します。
cd my-nuxt-app
npm install
手順3：開発サーバーを起動する
インストールが終わったら、開発サーバーを起動します。
npm run dev
ターミナルに、次のような表示が出れば成功です。
Nuxt 3.x.x with Nitro 2.x.x
➜ Local: http://localhost:3000/
ブラウザでhttp://localhost:3000にアクセスすると、Nuxtのウェルカム画面が表示されます。
つまずきやすい設定・注意点
ポートが埋まっているケースに注意してください。
すでに別のアプリで3000番ポートを使っている場合、Nuxtは自動的に3001番などの空きポートに切り替えて起動します。
ターミナルに表示されたURLをよく確認してから、ブラウザでアクセスするようにしましょう。
よくあるつまずきポイント・エラー対処
TypeScriptの型エラーが出る
Nuxtのプロジェクトを作成した直後は、TypeScriptの設定もある程度自動で整います。
ただし、エディタ（VS Codeなど）を開いたタイミングによっては、型情報が正しく反映されないことがあります。
❌ Before：useRouteなどが赤い波線でエラー表示される状態
エディタ上で、Nuxtの組み込み関数に対して「型が見つかりません」というエラーが出る状態です。
✅ After：型情報を生成し直して解決する
npx nuxi prepare
実際に私も、プロジェクト作成直後にエディタを先に開いてしまい、useFetchが真っ赤なエラー表示になったことがあります。
.nuxtディレクトリ内の型情報がまだ生成されていなかったことが原因でした。
nuxi prepareを実行してエディタを再読み込みすると、エラー表示が消えました。
「なぜか組み込み関数だけエラーになる」ときは、まずこのコマンドを試してみてください。
応用・一歩先の使い方
フォルダ構成の概要
作成直後のNuxtプロジェクトには、主に次のフォルダ・ファイルが含まれています。
pages/：ページごとのVueファイルを置く場所（次回詳しく解説します）public/：画像などの静的ファイルを置く場所nuxt.config.ts：Nuxt全体の設定ファイルapp.vue：アプリ全体の土台となるコンポーネント
いきなり全部を理解しようとせず、まずはpages/とapp.vueから触っていくのがおすすめです。
開発を効率化する一歩先の使い方
慣れてきたら、nuxt.config.tsでポート番号を固定したり、モジュールを追加したりして開発体験を整えていきましょう。
// nuxt.config.ts
export default defineNuxtConfig({
devServer: {
port: 4000,
},
})
「毎回3000番が埋まっていて煩わしい」という場合は、このようにポートを固定しておくと快適です。
まとめ
この記事のポイント
- Node.jsはアクティブLTS版以上（目安として20系以上）を用意する
- プロジェクト作成は
npx nuxi@latest initが現在の標準手順 npm run devで開発サーバーを起動し、localhost:3000で確認する- 型エラーが出たら
npx nuxi prepareを試す
次に読むべき記事
環境構築ができたら、次はpages/ディレクトリの使い方を理解していきましょう。
「pages/ディレクトリでファイルベースルーティングを理解する」で、実際にページを増やしていきます。