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

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

ボタンのアイコン決める

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

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

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

【v-icon】の一覧を確認する方法と使い方 【Vuetify】 - Qiita

が参考になりました。

Material Design Icons

のページで、

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

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

次に悩んだのは、

NuxtでJWT認証を導入する

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

Card component — Vuetify.js

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

<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"がポイントです。

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

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