概要
Vuetifyを用いて、「ログイン画面」・「新規登録画面」のUIを作成しました。
コード保存目的も兼ねて、記事にしておきます。
もし良ければ、コピペで使ってやって下さい。
作成した画面
ログイン画面
新規登録画面
コード（ログイン画面）
<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>
コード（新規登録）
<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ロゴ
facebookが必要ならこちらから
facebookのログインも必要な場合は、下記コードをご使用下さい。
<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>
最後に
ルール等は、適宜修正してご使用下さい。
不明点、誤りがある場合、お手数ですがコメントにてお知らせ下さい。