nuxt をインストールして簡易サーバを起動してみる

参考

プロジェクトを作成する

プロジェクトを作成する。

npm install -g create-nuxt-app
npx create-nuxt-app frontend-nuxt

対話

下記のように質問されるので適当に回答していく。

Need to install the following packages:
  create-nuxt-app@5.0.0
Ok to proceed? (y) y

? Project name: nuxt-project
? Programming language: TypeScript
? Package manager: Npm
? UI framework: Vuetify.js
? Template engine: HTML
? Nuxt.js modules: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Linting tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Testing framework: Jest
? Rendering mode: Universal (SSR / SSG)
? Deployment target: Server (Node.js hosting)
? Development tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Continuous integration: None
? Version control system: None
⠏ Installing packages with npm

package.json

package.json が作成されており、下記の通りに記載があるので。

"scripts": {
  "dev": "nuxt",
  "build": "nuxt build",
  "start": "nuxt start",
  "generate": "nuxt generate",
  "test": "jest"
},

npm run dev, npm run build といった具合にコマンドが実行できる。

Docker でつなぎたい

docker で 3000 でポートフォワードするを設定する。

-p 3000:3000

dev のコマンドに対してホストとポートを指定する。

"scripts": {
  "dev": "nuxt -H 0.0.0.0 -p 3000",
  "build": "nuxt build",
  "start": "nuxt start",
  "generate": "nuxt generate",
  "test": "jest"
},

localhost:3000 にアクセスすると無事「Welcome to the Vuetify + Nuxt.js template」が表示される。

Cannot find module 'typescript'

npm run dev で表題のエラーが発生したら下記のコマンドで解消する。

npm install -g typescript
npm link typescript
YouTube