見出し画像

TWSNMP FC:Nuxt.jsでログイン画面を作る。まだ未完成

今朝も猫は4時に起こしにきましたが私は眠くて反応しませんでした。猫はかみさんを起こしてお世話させた後、かみさんの布団に潜って寝てしまいました。なので、今日の開発開始は5時からになってしまいました。Nuxt.jsでログイン画面を作り始めました。

ボタンのアイコン決める

今朝、最初に悩んだのはログインのボタンに使うアイコンについてです。テンプレートで使っているメニューのアイコン

<v-icon>mdi-menu</v-icon>

を、そのまま使ってテストしてよいのですが、そういうところだけ妙に気になるのでアイコンを選ぶ方法を探しました。

が参考になりました。

のページで、

画像1

のように検索できました。

ログイン画面の中央揃えにする

次に悩んだのは、

のページのlogin.vueを参考のログイン画面を作ったのですが、うまく中央揃えになりませんでした。いろいろ試行錯誤の結果、本家、

のドキュメントに答えがありました。実はすごくシンプルでした。サンプルのように、

<template>
 <v-card max-width="500" class="mx-auto">
   <v-form>
     <v-alert :value="error" type="error">
       ユーザーIDまたはパスワードが正しくありません
     </v-alert>
     <v-card-title primary-title>
       <h3 class="headline mb-0">ログイン</h3>
     </v-card-title>
     <v-card-text>
       <v-text-field v-model="name" label="ユーザID" required />
       <v-text-field v-model="password" label="パスワード" required />
     </v-card-text>
     <v-btn block color="primary" dark @click="submit">
       ログイン
       <v-icon>mdi-login</v-icon>
     </v-btn>
   </v-form>
 </v-card>
</template>

とするとよい感じのログイン画面になりました。
max-width="500" class="mx-auto"がポイントです。

というわけで、今日できたのは、

画像2

という感じです。
でも、ログイン状態によってボタンの表示を変えるv-ifの部分がうまく動作しません。
続きは、明日です。

開発のための諸経費(機材、Appleの開発者、サーバー運用)に利用します。 ソフトウェアのマニュアルをnoteの記事で提供しています。 サポートによりnoteの運営にも貢献できるのでよろしくお願います。