Nuxt.js | ワクガンス

Nuxt.jsのローカル開発環境の構築 Windows版

1. すでにnodeがインストールされているならGit Bashなどターミナルを開き、node.jsのバージョンを確認し、公式サイトの最新バージョンと見比べる。nodeのバージョンが古いと失敗するため。 もし既存のnodeが古ければ、Windowsのアプリインストールでnodeアプリを一旦、アンインストールし、新たに公式サイトからnode.jsアプリをインストールする。
   
   nodeのバージョン確認コマンド

   node -v

   https://nodejs.org/ja(Node.jsの公式サイト)
   
   
2. 作業ディレクトリを作成し、そのディレクトリに入る。

   mkdir nuxt_demo
   cd nuxt_demo
   				

3. Nuxt.js のプロジェクトを作成します。

   npx nuxi init my-nuxt-app

   my-nuxt-appはプロジェクト名。好きな名前を入れてください。
4. プロジェクトディレクトリに移動し、yarnをインストールする。とくにエラーがなければOK.

   cd my-nuxt-app
   yarn install
   			

5. 以下のコマンドで開発モードになります。

   yarn dev

   デフォルトでは、http://localhost:3000/ で Nuxt.js のアプリケーションが動作します。
   開発モードの解除はCtrl + Cです。

2025-3-12

Nuxt.jsのローカル開発環境の構築 Docker版

参考：Nuxt3 × Docker環境構築（正式版）

1. Dockerの準備を行います。 Windowsでしたら下記のリンク先を参考にDocker環境をご用意ください。
   Docker desktopを使わずWSL上で動作するUbuntuでDockerとdocker-composeを動かす
2. 適当なコマンドラインツールで、任意の場所にディレクトリを作成

   mkdir nuxt_demo

3. Ubuntuアプリを右クリックから管理者権限で実行し、Ubuntuのターミナル画面を起動する
   
4. Ubuntuのターミナルで上記で作成したディレクトリに移動する(以後はUbuntuターミナルでコマンド実行）

   cd /mnt/c/Users/user/git/nuxt_demo

5. 空のdocker-compose.ymlを作成
   

   touch docker-compose.yml

6. docker-compose.ymlをテキストエディタで開き、下記を記述。

   version: '3.9'
   
   services:
     nuxt:
       container_name: nuxt
       build: docker/nuxt
       volumes:
         - ./front:/app:cached
         - nuxt_node_modules:/app/node_modules
       ports:
         - "80:3000"
         - "24678:24678"
       tty: true
       environment:
         - HOST=0.0.0.0
         - port=80
         - CHOKIDAR_USEPOLLING=true
   #    command: sh -c "yarn && yarn dev"
   volumes:
     nuxt_node_modules:
   			

7. 空のDockerfileを作成する

   				mkdir docker/nuxt
   				touch docker/nuxt/Dockerfile
   			

8. Dockerfileをテキストエディタで開き、以下を記述する。

   FROM node:18-slim
   
   ENV TZ Asia/Tokyo
   
   WORKDIR /app
   
   RUN apt-get update \
       && apt-get install -y \
       git \
       vim
   			

   解説

   Dockerfile の解説

   Dockerfile

   FROM node:18-slim
   
   ENV TZ Asia/Tokyo
   
   WORKDIR /app
   
   RUN apt-get update \
   	&& apt-get install -y \
   	git \
   	vim \
   	&& apt-get clean \
   	&& rm -rf /var/lib/apt/lists/*
   						

   各行の説明

   コマンド	説明
   FROM node:18-slim	軽量な Node.js 18 イメージをベースにする。
   ENV TZ Asia/Tokyo	環境変数を設定し、コンテナ内のタイムゾーンを日本時間にする。
   WORKDIR /app	作業ディレクトリを `/app` に設定し、以降の操作をこのディレクトリで実行。
   RUN apt-get update \ && apt-get install -y git vim \ && apt-get clean \ && rm -rf /var/lib/apt/lists/*	`apt-get update` でパッケージリストを最新に更新。 `apt-get install -y git vim` で Git と Vim をインストール。 `apt-get clean` でキャッシュを削除し、コンテナサイズを削減。 `rm -rf /var/lib/apt/lists/*` で不要なファイルを削除。

9. Dockerの起動

   sudo service docker start
   docker-compose up -d
   			

10. 無事Dockerを起動できたらコンテナに入る

    docker-compose exec nuxt bash

11. nodeのコマンドでnuxtの初期化を行う。初期化には時間がかかる。また途中で選択入力が求められる。

    npx nuxi init . --force

    解説

    npx nuxi init . --force

    このコマンドは、Nuxt 3 のプロジェクトを現在のディレクトリ (.) に強制的に初期化するためのものです。

    各部分の意味:

    • npx: Node.js のパッケージ実行コマンド。ローカルまたはリモートの npm パッケージをインストールせずに一時的に実行できる。
    • nuxi: Nuxt 3 の公式 CLI ツール。プロジェクトの初期化 (init) やビルド (build) などを行う。
    • init: Nuxt プロジェクトの初期化を行うコマンド。
    • .: 初期化するディレクトリを指定。. は現在のディレクトリを意味する。
    • --force: 既存のファイルがあっても強制的に上書きするオプション。
    「npx nuxi init」を実行中、以下の選択が求められるので無難にyarnを選択しておきます。
    
    どれをインストールするか求められます。とりあえず全部にチェックします。チェックはスペースキーで、決定はEnterキーです。
    
    以下を聞かれた「NO」を選択します。

    Install failed for @nuxt/content@3.3.0, @nuxt/eslint@1.2.0, @nuxt/fonts@0.11.0, @nuxt/icon@1.11.0, @nuxt/image@1.9.0, @nuxt/scripts@0.11.1,
    @nuxt/test-utils@3.17.2, @nuxt/ui@3.0.0. Do you want to continue adding the modules to nuxt.config?
    				

    「No (いいえ)」が無難な理由

    • インストールに失敗したモジュールが nuxt.config に追加されても、実際には使えない。
    • 後で手動で必要なモジュールを再インストールできる。
    • 不要なエントリを nuxt.config.ts に追加すると、後でエラーの原因になる可能性がある。
    「npx nuxi init」の実行が完了するとfrontディレクトリとその直下に以下のファイルとディレクトリが生成されます。

    .gitignore  README.md      nuxt.config.ts  server/
    .nuxt/      app.vue        package.json    tsconfig.json
    .git/  .output/    node_modules/  public/         yarn.lock
    
    				

12. Nuxtをインストールします。

    yarn install

13. Nuxtを起動します。

    yarn dev

    以下のが表示されればOKです。開発モードになります。
    
14. ブラウザにて「http://localhost」にアクセスします。以下のような画面が表示されれば成功です。
    
15. 「Ctrl + C」で開発モードを解除できる。
    
    停止と再開方法

2025-3-12

停止と再開方法

停止方法

「Cntl + C」で開発モード解除

exit
docker-compose stop
sudo service docker stop
	

再開方法

cd /mnt/c/Users/user/git/nuxt_demo
sudo service docker start
docker-compose up -d
docker-compose exec nuxt bash
yarn dev
	

2025-3-16

SPAの基本

プロジェクトディレクトリnuxt_demo3のディレクトリとファイル構成

├── backend
│   └── api1.php
└── my-nuxt-app
    ├── .gitignore
    ├── .nuxt
    ├── .output
    ├── README.md
    ├── app.vue.tmp
    ├── node_modules
    ├── nuxt.config.ts
    ├── package.json
    ├── pages
│        └── index.vue
    ├── public
    ├── server
    ├── tsconfig.json
    └── yarn.lock
	

---

app.vueはapp.vue.tmpにしておく

nuxt_demo3/backend/api1.php

<?php
header("Access-Control-Allow-Origin: *");
header("Content-Type: application/json");

echo json_encode(["message" => "Hello from PHP API"]);
	

nuxt_demo3/my-nuxt-app/pages/index.vue

<template>
  <div>
    <h1>Nuxt.js + XAMPP</h1>
    <p>{{ message }}</p>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const message = ref('');

onMounted(async () => {
  const res = await fetch('http://localhost/api/index.php');
  const data = await res.json();
  message.value = data.message;
});
</script>
	

「http://localhost」にアクセスしてバックエンドから取得したデータが取得できていればＯＫ．

2025-3-19

次回からの開発環境起動方法

nuxtをインストールしたディレクトリに移動し「yarn dev」を実行するだけ。

cd git/nuxt_demo3/my-nuxt-app && yarn dev

なお、止める場合はCtrl + C 。


2025-3-22

基本：テキストボックスとボタンとSPA通信

ファイル構成

C:\Users\user\git\nuxt_demo3\my-nuxt-app\pages
├── form1.vue
└── index.vue
	

	
C:\Users\user\git\nuxt_demo3\backend
└── api1.php
	

form1.vue

<template>
  <div>
    <h1>Nuxt.js + XAMPP FORM1</h1>
    
    <!-- API から取得したメッセージを表示 -->
    <p>{{ message }}</p>

    <!-- テキストボックスと送信ボタン -->
    <input v-model="inputValue" type="text" placeholder="Enter text" />
    <button @click="sendData">Send</button>

    <!-- 送信結果の表示 -->
    <p>{{ responseMessage }}</p>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const message = ref('');
const inputValue = ref('');
const responseMessage = ref('');

onMounted(async () => {
  const res = await fetch('http://localhost/nuxt_demo3/backend/api1.php');
  const data = await res.json();
  message.value = data.message;
});

const sendData = async () => {
  try {
    const res = await fetch('http://localhost/nuxt_demo3/backend/api1.php', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ text: inputValue.value })
    });
    
    const data = await res.json();
    responseMessage.value = data.response;
  } catch (error) {
    responseMessage.value = "Error sending data";
  }
};
</script>

<style scoped>
input {
  margin: 10px 0;
  padding: 5px;
}
button {
  padding: 5px 10px;
  cursor: pointer;
}
</style>

	

api1.php

<?php

header("Access-Control-Allow-Origin: *");
header("Content-Type: application/json");
header("Access-Control-Allow-Methods: POST, GET");
header("Access-Control-Allow-Headers: Content-Type");

// JSON 形式のリクエストを受け取る
$input = json_decode(file_get_contents("php://input"), true);

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $text = isset($input['text']) ? $input['text'] : 'No input received';
    echo json_encode(["response" => "Received: " . htmlspecialchars($text)]);
} else {
    echo json_encode(["message" => "Hello from PHP API"]);
}



	

URL

http://localhost:3000/form1

2025-3-12

xxx

2025-3-12