Skip to content

Instantly share code, notes, and snippets.

@devinhyden

devinhyden/vuetifyjs-login.html

Last active March 26, 2021 08:14
Show Gist options
  • Save devinhyden/82d22463549ae02c7cbd27e8832b59a7 to your computer and use it in GitHub Desktop.
Save devinhyden/82d22463549ae02c7cbd27e8832b59a7 to your computer and use it in GitHub Desktop.
Download ZIP
Vuetifyjs Login Form
Raw
vuetifyjs-login.html
<!DOCTYPE html>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet">
<link href="https://unpkg.com/vuetify/dist/vuetify.min.css" rel="stylesheet">
</head>
<style>
#app {
background-image: url("https://images.unsplash.com/photo-1497733942558-e74c87ef89db?dpr=1&auto=compress,format&fit=crop&w=1650&h=&q=80&cs=tinysrgb&crop=");
background-size: cover;
overflow:hidden;
}
.loginOverlay {
background:rgba(33,150,243,0.3);
}
.photoCredit{
position: absolute;
bottom: 15px;
right: 15px;
}
</style>
<body>
<div id="app">
<v-app>
<main>
<v-container fluid fill-height class="loginOverlay">
<v-layout flex align-center justify-center>
<v-flex xs12 sm4 elevation-6>
<v-toolbar class="pt-5 blue darken-4">
<v-toolbar-title class="white--text"><h4>Welcome Back</h4></v-toolbar-title>
</v-toolbar-items>
</v-toolbar>
<v-card>
<v-card-text class="pt-4">
<div>
<v-form v-model="valid" ref="form">
<v-text-field
label="Enter your e-mail address"
v-model="email"
:rules="emailRules"
required
></v-text-field>
<v-text-field
label="Enter your password"
v-model="password"
min="8"
:append-icon="e1 ? 'visibility' : 'visibility_off'"
:append-icon-cb="() => (e1 = !e1)"
:type="e1 ? 'password' : 'text'"
:rules="passwordRules"
counter
required
></v-text-field>
<v-layout justify-space-between>
<v-btn @click="submit" :class=" { 'blue darken-4 white--text' : valid, disabled: !valid }">Login</v-btn>
<a href="">Forgot Password</a>
</v-layout>
</v-form>
</div>
</v-card-text>
</v-card>
</v-flex>
</v-layout>
</v-container>
<a href="https://unsplash.com/photos/i6Wc5qZO5MQ" target="_blank">
<v-card class="photoCredit teal">
<v-card-title>
<div class="white--text">
Photo by Tatyana Dobreva on Unsplash
</div>
</v-card-title>
</v-card>
</a>
</main>
</v-app>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vuetify/dist/vuetify.js"></script>
<script>
new Vue({
el: '#app',
data () {
return {
valid: false,
e1: false,
password: '',
passwordRules: [
(v) => !!v || 'Password is required',
],
email: '',
emailRules: [
(v) => !!v || 'E-mail is required',
(v) => /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(v) || 'E-mail must be valid'
],
}
},
methods: {
submit () {
if (this.$refs.form.validate()) {
this.$refs.form.$el.submit()
}
},
clear () {
this.$refs.form.reset()
}
},
})
</script>
</body>
</html>
@wooyoung85
Copy link

I couldn't run it, so I added the code below.

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
})

https://vuetifyjs.com/ko/getting-started/quick-start#cdn-usage

Thank you for a good example.

@Ashmit-Aryan
Copy link

There is a closing tag of v-toolbar-items
but no opening tag

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment