🤖

Nuxt.jsでWebアプリケーション開発メモ1

に公開
Nuxt 3
Claude
tech

概要

Nuxt.jsでWebアプリケーション開発＆AI駆動開発の勉強用メモ。
バックエンドはDjango(DRF)を使用する。

前提条件

  • OS：Windows10
  • nvm：v1.1.12
  • Node.js：v22.18.0
  • nuxt：4.0.1
  • nuxt ui：3.3.0
  • IDE：Cursor＋Claude Code
  • 他：Claudeを適宜利用し、AI駆動開発で開発する。

筆者の知識レベル

  • Nuxt.jsはネット上の記事や動画を見て少しだけ触ったことがある。
    (ほとんど忘れている。)
  • 仕事で社内で使うためのちょっとしたツールを作ったことがあるが、 AIにほとんど書かせたので自身の身にはあまりついていない。

Nuxt.js環境構築

手順

  • 任意のフォルダで以下コマンドを実行。
    • パッケージマネージャーはpnpmを使用。
    • テンプレートにNuxt UIを使用する。
npx nuxi@latest init prototype_frontend --gitInit false --force --packageManager pnpm --template ui
  • 以下のプロンプトはNoを選択。
Would you like to install any of the official modules?
  • pnpmがインストールされていなかったので追加。
npm install -g pnpm
  • debug 起動の実行。
pnpm run dev

→ Nuxt.jsでWebアプリケーション開発メモ2

Discussion