【Hello World⑭】Nuxt.js @ JavaScript（Vue）

Nuxt.jsでJavaScriptのWebアプリを作ります

Windows11のDocker環境上で
JavaScript言語のVueベースのフレームワークNuxt.jsでHello Worldアプリを作ります。

環境

Windows 11 Pro 23H2
WLS 2.1.5.0（Ubuntu 22.04.1 LTS）
Docker Desktop 4.28.0
Visual Studio Code

①フォルダ・ファイルを作成

以下の構成でフォルダとファイルを作ります。

フォルダ構成

nuxt
 └─compose.yaml   # コンテナ作成時の指示を記載したファイル

以下のコマンドでフォルダ・ファイルを作成します。

Powershell

mkdir nuxt            ;`
cd nuxt               ;`
New-Item compose.yaml ;`
code compose.yaml

ファイルには以下の内容を記載します。

compose.yaml

services:
  web:
    image          : node:18.18.2-bullseye-slim
    container_name : nuxt
    working_dir    : /app
    command        : bash -c "yarn dev"
    volumes:
      - ./app:/app
    ports:
      - "3000:3000"

②Nuxt.jsのプロジェクトを作成

以下のコマンドを実行し、Nuxt.jsのプロジェクトを作成します。

Powershell

docker compose run --rm -it web bash -c "npx nuxi init ./ "

※質問には以下の内容を回答。
Ok to proceed? (y) →　y
Which package manager would you like to use? →　yarn
Initialize git repository? →　No

作成されるフォルダ・ファイルの構成と「package.json」の内容

フォルダ構成

nuxt
 ├─app
 │   ├─.nuxt
 │   ├─node_modules
 │   ├─public
 │   ├─server
 │   ├─.gitignore
 │   ├─app.vue
 │   ├─nuxt.config.ts
 │   ├─package.json
 │   ├─README.md
 │   ├─tsconfig.json
 │   └─yarn.lock
 └─compose.yaml

package.json

{
  "name": "nuxt-app",
  "private": true,
  "type": "module",
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "dependencies": {
    "nuxt": "^3.11.2",
    "vue": "^3.4.21",
    "vue-router": "^4.3.0"
  }
}

③設定ファイルを変更

設定ファイル（nuxt.config.ts）にホットリロード（プログラムを変更すると直ぐにアプリに変更が反映されるしくみ）を設定します。

PowerShell

code nuxt.config.ts

nuxt.config.ts

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  devtools: { enabled: true },
  vite:{
    server: {
      watch: {
        usePolling: true,
      },
    },
  }
})

④コンテナを起動

以下のコマンドを実行し、コンテナを起動します。

PowerShell

docker compose up -d

⑤Nuxt.jsの画面が表示されることを確認

http://localhost:3000に接続して、Nuxt.jsの画面が表示されていることを確認します。

⑥画面表示内容を修正

app.vueを以下の内容に変更します。

PowerShell

code app.vue

app.vue

<template>
  <div>
   <h2>Hello World Nuxt.js on Docker</h2>
  </div>
</template>

⑦Hello Worldが表示されることを確認

http://localhost:3000に接続して、Hello Worldが表示されていることを確認します。
※設定ファイル（nuxt.config.ts）にusePolling: trueを設定しているので、app.vueの内容を変更するとコンテナの再起動やページをリロードしなくても、自動的に表示されている内容が変わります。