目的

お手軽にNuxt3の開発環境を構築したい
ローカル環境を汚さずに、CodeSandboxというクラウドでのWebアプリケーション開発環境を利用して、手軽にNuxt3のサンプルを共有したい。
CodeSandboxにはNuxt3用にテンプレートが利用できるが、環境構築がブラックボックス化されているため、NodeJS環境からの構築を確認したい。

CodeSandboxについて

https://codesandbox.io/
クラウド環境に、Vue、React、Angular等のWebアプリケーション開発環境を構築できる。
- チーム内でのサンプルコードの共有が容易
- ローカル環境に依存しない
GitHubとの連携が可能
- ローカル環境への移行が容易

Nuxt3開発環境構築手順

Vanilla環境の構築

NodeJS環境から理解するため、Vanillaテンプレートから環境を構築する。

CodeSandboxから「New sandbox」を押下
「Vanilla」を選択すると、以下の初期画面となる。
「Terminal」を選択する。terminalを利用するには、「Browser Sandbox」から「Cloud Sandbox」にupdateが必要(Freeのまま利用可能)とのことなので、「Yes, convert」を押下。
右上部の「+」をクリックし、「New Terminal」を選択すると、新規terminalが起動する。

5. terminalで、既定の開発環境を確認する。(2023/04/17現在)

    ➜  workspace git:(master) ✗ node --version
    v16.17.0
    ➜  workspace git:(master) ✗ npm --version
    8.15.0
    ➜  workspace git:(master) ✗ yarn --version
    1.22.19

Nuxt3環境の構築

後は、Nuxt3のスタートアップをterminalで実行していくだけ。

nuxt3appというアプリケーションを作成する。

 ➜  workspace git:(master) ✗ npx nuxi init nuxt3app
 Need to install the following packages:
 nuxi@3.4.1
 Ok to proceed? (y) y
 [4:35:36 AM] Nuxi 3.4.1
 [4:35:37 AM] ✨ Nuxt project is created with v3 template. Next steps:
 [4:35:37 AM]  › cd nuxt3app
 [4:35:37 AM]  › Install dependencies with npm install or yarn install or pnpm install
 [4:35:37 AM]  › Start development server with npm run dev or yarn dev or pnpm run dev
 npm notice 
 npm notice New major version of npm available! 8.15.0 -> 9.6.4
 npm notice Changelog: https://github.com/npm/cli/releases/tag/v9.6.4
 npm notice Run npm install -g npm@9.6.4 to update!
 npm notice

アプリケーションフォルダに移動し、npm installを実行

 ➜  nuxt3app git:(master) ✗ npm install
 npm WARN deprecated sourcemap-codec@1.4.8: Please use @jridgewell/sourcemap-codec instead

 > postinstall
 > nuxt prepare

 Nuxi 3.4.1                                                                                      4:39:02 AM
 ✔ Types generated in .nuxt                                                                      4:39:03 AM

 added 621 packages, and audited 622 packages in 54s

 104 packages are looking for funding
 run `npm fund` for details

 found 0 vulnerabilities

devモードでアプリケーション起動

 > npm run dev

 Nuxi 3.4.1                                                                                      4:44:29 AM
 Nuxt 3.4.1 with Nitro 2.3.3                                                                     4:44:29 AM
                                                                                                 4:44:30 AM
 > Local:    http://localhost:3000/ 
 > Network:  http://192.168.241.2:3000/

 ℹ Vite client warmed up in 1785ms                                                               4:44:33 AM
 ✔ Nitro built in 857 ms                                                                   nitro 4:44:33 AM

localhost:3000（または上記Network)にブラウザからアクセス
* nuxt3の初期アプリケーション画面が表示される。
* 環境によってはブラウザからのアクセスは許可されず、「Unconfigured:3000」タブにアプリケーション画面が表示される。