コピペでどうぞ。Vuetifyを使用してログイン画面・新規登録画面を作成しました。

#概要
Vuetifyを用いて、「ログイン画面」・「新規登録画面」のUIを作成しました。
コード保存目的も兼ねて、記事にしておきます。
もし良ければ、コピペで使ってやって下さい。

##作成した画面
ログイン画面
![ログイン画面png.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1766904/fd318dfd-1ab3-1cc8-dd4c-4dae569b5c2e.png)
新規登録画面
![新規登録画面.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1766904/989c48ef-1e16-e407-1c0a-19758737e8ea.png)

##コード（ログイン画面）

```javascript
<template>
  <v-card class="d-flex flex-column mx-auto my-6 flat" width="374" color="#fff">
    <v-card-title class="d-flex justify-center pa-0 mt-6"
      >ログイン</v-card-title
    >
    <v-card-text class="d-flex justify-center flex-column">
      <v-btn
        class="fill-width mt-6 text-capitalize caption mx-4"
        rounded
        color="#00ACEE"
        dark
        depressed
        height="48px"
        @click="submitTwitter"
      >
        <img
          class="button-logo-img mr-4"
          src="~/static/twitter.png"
          style="height: 20px"
        />
        twitterでログイン
      </v-btn>
      <v-btn
        class="fill-width mt-6 text-capitalize caption mx-4 mb-6"
        rounded
        height="48px"
        outlined
        style="border-color: #979797"
        @click="submitGoogle"
      >
        <img
          class="button-logo-img mr-4"
          src="https://madeby.google.com/static/images/google_g_logo.svg"
          style="height: 24px"
        />
        Googleでログイン
      </v-btn>
      <p class="text-center pt-3 mt-3 text-subtitle-1 siginIn-border-top">
        メールアドレスでログイン
      </p>
      <v-form class="mx-9" ref="form" v-model="valid">
        <v-text-field
          placeholder="メールアドレス"
          outlined
          dense
          :rules="mailRules"
        ></v-text-field>
        <v-text-field
          placeholder="パスワード"
          outlined
          dense
          :rules="pwRules"
        ></v-text-field>
        <p class="pointer" @click="forgetPw">パスワードを忘れた方</p>
        <div class="text-center">
          <v-btn class="primary" :disabled="!valid">ログイン</v-btn>
        </div>
      </v-form>
    </v-card-text>
  </v-card>
</template>

<script>
export default {
  data() {
    return {
      valid: false,
      mailRules: [
        (v) => !!v || "mail is required",
        v => /.+@.+\..+/.test(v) || 'E-mail must be valid',],
      pwRules: [(v) => !!v || "password is required"],
    };
  },
  methods: {
    validate() {
      this.$refs.form.validate();
    },
    submitTwitte() {
      // ツイッターログインの処理
    },
    submitGoogle() {
      // グーグルログインの処理
    },
    forgetPw() {
      // パスワードを忘れた時の処理
    },
  },
};
</script>
```

##コード（新規登録）

```javascript
<template>
<div>
  <v-card class="d-flex flex-column my-6 mx-auto" width="374" color="#fff">
    <v-form ref="form" v-model="valid">
      <v-card-title class="d-flex justify-center pa-0 mt-6 mb-3"
        >新規登録</v-card-title
      >
      <v-card-text class="d-flex justify-center flex-column">
        <div class="mx-9">
          <v-text-field
            label="ユーザー名"
            placeholder="15文字以内"
            outlined
            dense
            :rules="nameRules"
          ></v-text-field>
          <v-text-field
            label="メールアドレス"
            placeholder="mail@example.com"
            outlined
            dense
            :rules="mailRules"
          ></v-text-field>
          <v-text-field
            label="パスワード"
            placeholder="8文字以上の半角英数記号"
            outlined
            dense
            :rules="pwRules"
          ></v-text-field>
        </div>
        <div class="text-center">
          <v-btn class="primary" :disabled="!valid">登録</v-btn>
        </div>
        <p class="signUp-border-top text-center mt-6 mb-0 pt-6">
          ソーシャルアカウントでログイン
        </p>
        <v-btn
          class="fill-width mt-6 text-capitalize caption mx-4"
          rounded
          color="#00ACEE"
          dark
          depressed
          height="48px"
          @click="submitTwitter"
        >
          <img
            class="button-logo-img mr-4"
            src="~/static/twitter.png"
            style="height: 20px"
          />
          twitterでログイン
        </v-btn>
        <v-btn
          class="fill-width mt-6 text-capitalize caption mx-4 mb-6"
          rounded
          height="48px"
          outlined
          style="border-color: #979797"
          @click="submitGoogle"
        >
          <img
            class="button-logo-img mr-4"
            src="https://madeby.google.com/static/images/google_g_logo.svg"
            style="height: 24px"
          />
          Googleでログイン
        </v-btn>
      </v-card-text>
    </v-form>
  </v-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      valid: false,
      nameRules: [
        (v) => !!v || "user name is required",
        (v) => (v && v.length <= 15) || "最大15文字です。",
      ],
      mailRules: [
        (v) => !!v || "mail is required",
        v => /.+@.+\..+/.test(v) || 'E-mail must be valid',],
      pwRules: [(v) => !!v || "password is required"],
    };
  },
  methods: {
    validate() {
      this.$refs.form.validate();
    },
    submitTwitter() {
      // ツイッターログインの処理
    },
    submitGoogle() {
      // グーグルログインの処理
    },
  },
};
</script>
```

##補足
Twitterのアイコン画像は、公式サイトからダウンロードして下さい。
 [Twitterロゴ](https://about.twitter.com/en/who-we-are/brand-toolkit)

##facebookが必要ならこちらから
facebookのログインも必要な場合は、下記コードをご使用下さい。

```javascript
<v-btn
   class="fill-width mt-6 text-capitalize caption mx-4"
   color="#3B5998"
   rounded
   dark
   depressed
   height="48px"
   @click="submitFacebook"
>
  <img
    class="button-logo-img mr-4"
    src="~/static/f_logo_RGB-White_1024.png"
    style="height: 24px"
  />
    Facebookでログイン
</v-btn>
```
[facebookロゴ](https://ja.facebookbrand.com/facebookapp/)


##最後に
ルール等は、適宜修正してご使用下さい。
不明点、誤りがある場合、お手数ですがコメントにてお知らせ下さい。