In this tutorial, we will create login form page using vuetifyjs 3 in Vue.js 3 . We will see login form, vuetify 3 sign in form ,Before we begin, you need to install and configure Vuetify 3 in Vue 3.
How to Install Vuetify 3 in Vue 3
Vuetify 3 Vue 3 Login Form Example
1. Vuetify 3 create login form using v-text-field component.
<template>
<div class="d-flex align-center justify-center" style="height: 100vh">
<v-sheet width="400" class="mx-auto">
<v-form fast-fail @submit.prevent="login">
<v-text-field v-model="username" label="User Name"></v-text-field>
<v-text-field v-model="password" label="password"></v-text-field>
<a href="#" class="text-body-2 font-weight-regular">Forgot Password?</a>
<v-btn type="submit" color="primary" block class="mt-2">Sign in</v-btn>
</v-form>
<div class="mt-2">
<p class="text-body-2">Don't have an account? <a href="#">Sign Up</a></p>
</div>
</v-sheet>
</div>
</template>
<script>
export default {
data() {
return {
username: '',
password: '',
};
},
methods: {
login() {
// Your login logic here
},
},
}
</script>
vue 3 Vuetify 3 sign in form
2. Vuetify 3 login form using v-text-field component with outline variant.
<template>
<div class="d-flex align-center justify-center" style="height: 100vh">
<v-sheet width="400" class="mx-auto">
<v-form fast-fail @submit.prevent="login">
<v-text-field variant="outlined" v-model="username" label="User Name"></v-text-field>
<v-text-field variant="outlined" v-model="password" label="password"></v-text-field>
<a href="#" class="text-body-2 font-weight-regular">Forgot Password?</a>
<v-btn type="submit" color="primary" block class="mt-2">Sign in</v-btn>
</v-form>
<div class="mt-2">
<p class="text-body-2">Don't have an account? <a href="#">Sign Up</a></p>
</div>
</v-sheet>
</div>
</template>
<script>
export default {
data() {
return {
username: '',
password: '',
};
},
methods: {
login() {
// Your login logic here
},
},
}
</script>
vue 3 Vuetify 3 login page
3. Vuetify 3 underline login form.
<template>
<div class="d-flex align-center justify-center" style="height: 100vh">
<v-sheet width="400" class="mx-auto">
<v-form fast-fail @submit.prevent="login">
<v-text-field variant="underlined" v-model="username" label="User Name"></v-text-field>
<v-text-field variant="underlined" v-model="password" label="password"></v-text-field>
<a href="#" class="text-body-2 font-weight-regular">Forgot Password?</a>
<v-btn type="submit" variant="outlined" color="primary" block class="mt-2">Sign in</v-btn>
</v-form>
<div class="mt-2">
<p class="text-body-2">Don't have an account? <a href="#">Sign Up</a></p>
</div>
</v-sheet>
</div>
</template>
<script>
export default {
data() {
return {
username: '',
password: '',
};
},
methods: {
login() {
// Your login logic here
},
},
}
</script>
underline login form in Vuetify 3 vue 3
