はじめに
はじめまして、学生エンジニアの@huyunokiです。
Webアプリ開発で毎回のように必要になる「ログイン」と「新規登録」の画面。
Vuetifyのグリッドシステムとコンポーネントを活用して、SNSログインボタン付きの汎用的なテンプレートを作成しました。
そのままコピペして、プロジェクトに合わせて調整して使ってください！
参考サイト・ドキュメント
完成する画面
ログイン画面
新規登録画面
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開発の効率化に少しでも役立てば幸いです。