✨

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

に公開
Tailwind CSS
Nuxt 3
Claude
tech

概要

  • ログインページの実装。（UIのみ）
  • 基本的にClaude Codeに実装を任せる。

実装

  • Claude Codeに実装させるため、プロンプトを書いて指示。

プロンプト1

# 役割
優秀なITエンジニア

# 背景
プログラミング学習用にWebアプリケーションを作成します。
フロントエンドはNuxt.jsを使用し、バックエンドはPythonで、フレームワークはDjangoを使用します。
ここではフロントエンドの実装のみを行います。
段階的に機能を実装していきます。
バックエンドはプロトタイプを実装済みでいくつかのREST APIが使える状態です。
（バックエンドの詳細は追って説明します。）

# 命令
Nuxt.jsの環境を構築してデフォルトのページが表示されている状態です。
UIのフレームワークはNuxt UIを使用しています。
ここから画面を追加していきます。
- ログイン画面を追加します。
ログイン画面のデザインが 01.UI-design\00.login.PNG です。
この画面を作ってください。
- ページパスは app/pages/login.vue としてください。
- ユーザー名とパスワードのテキストボックスにはプレースホルダーを表示させてください。
    - プレースホルダーの色はデザイン通りでなくてもよいです。一般的によく使われる色にしてください。
- LOGINボタンはボタンではなくリンクっぽい形式にしてください。
  • ページパス指定を pages/login.vue としていたので、意図した場所にファイルが作られなかった。
    app/pages/login.vueに変更するよう指示した。(そもそもパス指定する必要もなかったと思う。)

プロンプト2

  • ヘッダがlogin.vue内に直接書かれていたのでlayoutsに分離するよう指示した。
# 命令2
ヘッダは layouts配下に作ると共通化できるはずですが、可能であればそうしてください。

出来上がった画面

  • プレースホルダーはClassの指定の実験も兼ねてあえて赤色にした。

実装されたソースコード

app/app.vue
<template>
  <NuxtLayout>
    <UApp>
      <NuxtPage />
    </UApp>
  </NuxtLayout>
</template>
  • <NuxtLayout> を指定することで、app/layouts/default.vueがページ共通のlayoutとして適用される。（ここではヘッダを定義している。）
  • <NuxtPage /> を指定することでURLで指定されたパスに合わせたページを自動で表示してくれる。
    ログインページは http://localhost:3000/login となっているので、app/pages/login.vueを自動で表示してくれる。
app/pages/login.vue
<template>
  <!-- Login Form -->
  <div class="flex items-center justify-center pt-16">
      <div class="w-full max-w-sm space-y-4">
        <!-- Username Field -->
        <UInput
          v-model="username"
          placeholder="USER NAME"
          size="lg"
          class="w-full [&>input::placeholder]:text-red-400"
        />

        <!-- Password Field -->
        <UInput
          v-model="password"
          type="password"
          placeholder="PASSWORD"
          size="lg"
          class="w-full [&>input::placeholder]:text-red-400"
        />

        <!-- Login Link -->
        <div class="flex justify-center pt-4">
          <button
            @click="handleLogin"
            class="text-blue-500 hover:text-blue-600 font-medium text-sm underline-offset-4 hover:underline"
          >
            LOG IN
          </button>
        </div>
      </div>
    </div>
</template>

<script setup lang="ts">
const username = ref('')
const password = ref('')

const handleLogin = () => {
  // ログイン処理を実装予定
  console.log('Login clicked', { username: username.value, password: password.value })
}
</script>
  • <UInput>のclassに[&>input::placeholder]:text-red-400を指定することでプレースホルダーの色を設定。
  • 以下、Claude Codeによる説明。
**Tailwind CSS  v3.1+の任意値プロパティ（Arbitrary Value Properties）** の機能です。

  [&>input::placeholder] の構文説明：
  - [] - 任意値を指定するTailwindの記法
  - & - 現在の要素（この場合UInputコンポーネント）
  - >input - 直下のinput要素
  - ::placeholder - CSSの疑似要素セレクター

  つまり「このコンポーネント内の直下input要素のプレースホル      
  ダー」を指定しています。Tailwind CSSの標準機能なので、他のフレームワークでも使用できます。
app/layouts/default.vue
<template>
  <div class="min-h-screen bg-gray-50">
    <!-- Header -->
    <div class="bg-green-500 text-white px-6 py-4">
      <h1 class="text-lg font-medium">Prototype SPA</h1>
    </div>

    <!-- Page Content -->
    <slot />
  </div>
</template>

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

Discussion