🐸

Nuxt3 開発環境構築

2025/05/04に公開

環境

OS: Windows 11 + WSL2 (Ubuntu 22.04)
Node.js v22.14.0

Nuxt公式
https://nuxt.com/

開発環境構築手順

1. Nuxtプロジェクト作成

npm create nuxt <project-name>

2. 使用するパッケージマネージャーを選択

> npx
> create-nuxt nuxt-dev


        .d$b.
       i$$A$$L  .d$b
     .$$F` `$$L.$$A$$.
    j$$'    `4$$:` `$$.
   j$$'     .4$:    `$$.
  j$$`     .$$:      `4$L
 :$$:____.d$$:  _____.:$$:
 `4$$$$$$$$P` .i$$$$$$$$P`

ℹ Welcome to Nuxt!
　　nuxi  8:45:24 AM
ℹ Creating a new project in nuxt-dev.
　　nuxi  8:45:24 AM

❯ Which package manager would you like to use?
● npm
○ pnpm
○ yarn
○ bun
○ deno

3. Git リポジトリを初期化するか選択

❯ Initialize git repository?
● Yes / ○ No

4. 以下の通りにコマンドを実行

✨ Nuxt project has been created with the v3 template. Next steps:
 › cd nuxt-dev
 　nuxi  8:50:26 AM
 › Start development server with npm run dev

5. 以下の画面が表示されれば成功です🎊

✅補足
筆者の環境（WSL2 + VSCode）ではホットリロードが特に設定なしでも動作しましたが、
環境によってはうまくいかない場合があります。
その際は、以下の設定を nuxt.config.ts に追加すると改善することがあります。

export default defineNuxtConfig({
  compatibilityDate: '2024-04-03',
  devtools: { enabled: true },
  // ↓ 以下を追加
  vite: {
    server: {
        watch: {
            usePolling: true
        }
    },
  },
})

環境

開発環境構築手順

Discussion