はじめに

はじめまして、学生エンジニアの@huyunokiです。

Webアプリ開発で毎回のように必要になる「ログイン」と「新規登録」の画面。
Vuetifyのグリッドシステムとコンポーネントを活用して、SNSログインボタン付きの汎用的なテンプレートを作成しました。

そのままコピペして、プロジェクトに合わせて調整して使ってください！

参考サイト・ドキュメント

Vuetify公式ドキュメント

完成する画面

ログイン画面

新規登録画面

1. ログイン画面 (LoginView.vue)

<template>
  <v-container fill-height fluid>
    <v-row align="center" justify="center">
      <v-col cols="12" sm="8" md="6" lg="4">
        <v-card class="elevation-12 pa-4" 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="mt-6 text-capitalize"
              rounded
              color="#00ACEE"
              dark
              depressed
              block
              height="48px"
              @click="submitTwitter"
            >
              <!-- Xのロゴのパスを変更する必要あり -->
              <img class="button-logo-img mr-4" src="/X-logo-white.png" style="height: 20px" />
              Twitterでログイン
            </v-btn>

            <v-btn
              class="mt-4 text-capitalize"
              rounded
              height="48px"
              outlined
              block
              style="border-color: #979797"
              @click="submitGoogle"
            >
              <!-- Googleのロゴのパスを変更する必要あり -->
              <img class="button-logo-img mr-4" src="/Google-logo.png" style="height: 24px" />
              Googleでログイン
            </v-btn>

            <p class="text-center pt-6 text-subtitle-1 siginIn-border-top">
              メールアドレスでログイン
            </p>

            <!-- フォームセクション -->
            <v-form ref="form" v-model="valid">
              <v-text-field
                v-model="email"
                label="メールアドレス"
                outlined
                dense
                persistent-placeholder
                autocomplete="email"
                :rules="mailRules"
              ></v-text-field>

              <v-text-field
                v-model="password"
                label="パスワード"
                outlined
                dense
                persistent-placeholder
                autocomplete="current-password"
                type="password"
                :rules="pwRules"
              ></v-text-field>

              <v-row class="mt-2">
                <v-col cols="12" sm="6">
                  <v-btn block color="primary" outlined to="/register">新規登録へ</v-btn>
                </v-col>
                <v-col cols="12" sm="6">
                  <v-btn block color="primary" :disabled="!valid" @click="Login">ログイン</v-btn>
                </v-col>
              </v-row>

              <div class="text-center mt-6">
                <a class="text-caption cursor-pointer" @click="forgetPw">パスワードを忘れた方はこちら</a>
              </div>
            </v-form>
          </v-card-text>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
export default {
  name: 'LoginView',
  data() {
    return {
      email: '',
      password: '',
      valid: false,
      mailRules: [
        (v) => !!v || "メールアドレスを入力してください",
        v => /.+@.+\..+/.test(v) || 'メールアドレスの形式に合致しません',
      ],
      pwRules: [(v) => !!v || "パスワードを入力してください"],
    };
  },
  methods: {
    validate() {
      this.$refs.form.validate();
    },
    submitTwitter() {
      // ツイッターログインの処理
      alert("Twitterを登録します");
    },
    submitGoogle() {
      // グーグルログインの処理
      alert("Googleを登録します");
    },
    forgetPw() {
      // パスワードを忘れた時の処理
      alert("パスワードを忘れました");
    },
    Login() {
      // ログインボタン押下時の処理
      alert("ログイン処理をします");
    }
  },
};
</script>

2. 新規登録画面 (RegisterView.vue)

<template>
  <v-container fill-height fluid>
    <v-row align="center" justify="center">
      <v-col cols="12" sm="8" md="6" lg="4">
        <v-card class="elevation-12 pa-4" color="#fff">
          <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">
            <v-btn
              class="mt-6 text-capitalize"
              rounded
              color="#00ACEE"
              dark
              depressed
              block
              height="48px"
              @click="submitTwitter"
            >
              <!-- Xのロゴのパスを変更する必要あり -->
              <img class="button-logo-img mr-4" src="/X-logo-white.png" style="height: 20px" />
              Twitterで登録
            </v-btn>

            <v-btn
              class="mt-4 text-capitalize"
              rounded
              height="48px"
              outlined
              block
              style="border-color: #979797"
              @click="submitGoogle"
            >
              <!-- Googleのロゴのパスを変更する必要あり -->
              <img class="button-logo-img mr-4" src="/Google-logo.png" style="height: 24px" />
              Googleで登録
            </v-btn>

            <p class="text-center pt-6 text-subtitle-1 siginIn-border-top">
              メールアドレスで登録
            </p>

            <v-form ref="form" v-model="valid">
              <v-text-field
                label="メールアドレス"
                v-model="email"
                outlined
                dense
                persistent-placeholder
                autocomplete="email"
                :rules="mailRules"
              ></v-text-field>

              <v-text-field
                label="ユーザー名"
                v-model="userName"
                outlined
                dense
                persistent-placeholder
                autocomplete="username"
                :rules="nameRules"
              ></v-text-field>

              <v-text-field
                label="パスワード"
                v-model="password"
                outlined
                dense
                persistent-placeholder
                autocomplete="new-password"
                type="password"
                :rules="pwRules"
              ></v-text-field>

              <v-row class="mt-2">
                <v-col cols="12" sm="6">
                  <v-btn block color="primary" outlined to="/login">ログインへ</v-btn>
                </v-col>
                <v-col cols="12" sm="6">
                  <v-btn block color="primary" :disabled="!valid" @click="UserRegister">登録</v-btn>
                </v-col>
              </v-row>
            </v-form>
          </v-card-text>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
export default {
  name: 'RegisterView',
  data() {
    return {
      userName: '',
      email: '',
      password: '',
      valid: false,
      nameRules: [
        (v) => !!v || "ユーザー名を入力してください",
        (v) => (v && v.length <= 15) || "最大15文字です。",
      ],
      mailRules: [
        (v) => !!v || "メールアドレスを入力してください",
        v => /.+@.+\..+/.test(v) || 'メールアドレスの形式に合致しません',
      ],
      pwRules: [(v) => !!v || "パスワードを入力してください"],
    };
  },
  methods: {
    validate() {
      this.$refs.form.validate();
    },
    submitTwitter() {
      // ツイッター登録処理
      alert("Twitterを登録します");
    },
    submitGoogle() {
      // グーグル登録処理
      alert("Googleを登録します");
    },
    UserRegister() {
      // 新規登録処理
      alert("新規登録処理をします");
    },
  },
};
</script>

使用しているVuetifyの簡易解説

v-container / v-row / v-col: 画面サイズに応じてレイアウトを調整するグリッドシステムです。画面中央への配置にも使用します。
v-card: コンポーネントの土台となるパネル（容器）を作成します。
v-card-title: カードのヘッダー部分（タイトルテキスト）を表示します。
v-card-text: カードのメインコンテンツ（フォームや文章）を配置する領域です。
v-btn: Vuetify独自のスタイルを適用したインタラクティブなボタンを作成します。
v-form: 入力コンポーネントのバリデーション状態を一括管理する親要素です。
v-text-field: テキスト入力やパスワード入力を行うためのマテリアルデザイン風フィールドです。
persistent-placeholder: ブラウザの自動補完時にラベルと値が重なるのを防ぐために、プレースホルダーを常に有効化します。
autocomplete: 適切な入力補助（メールアドレスやパスワードの自動入力）をブラウザに指示します。

ロゴ素材のダウンロード

SNSログインボタンに使用する公式ロゴ（SVG/PNG）は以下のサイトから取得できます。

最後に

最後まで読んでいただきありがとうございました！
このテンプレートが皆様のVue開発の効率化に少しでも役立てば幸いです。