CodeSandBoxでNuxt3/Vuetify3環境を速攻作成

前置き

• 前回、テンプレートを使わずにNuxt3環境を構築する手順を説明したが、Nuxt3 + Vuetify3のテンプレートがあったので、これを利用して、ハマりどころを説明する。

テンプレートの選択

• Nuxt3 Vuetify3 Templateを選択

[ハマり１] NodeJSバージョンへの警告発生

• NodeJSバージョンを18にupgrade

1. ref: https://codesandbox.io/docs/learn/environment/vm#configuring-nodejs-version
2. .codesandbox/Dockerfileを作成し、以下を定義

   FROM node:18
   

3. システム再起動のメッセージに従う。(Restarting)

[ハマり２]「defineNuxtConfig is not a function」 エラー

• nuxt.config.tsの以下を修正

import { defineNuxtConfig } from "nuxt";
    ↓
import { defineNuxtConfig } from "nuxt/config";

無事起動に成功

• 起動ターミナル（正常起動）

• ブラウザアクセス（成功アクセス）