vuetify 3 vue 3 registration form example

Vuetify 3 Vue 3 Registration Form Example

VueJS
29/08/23
Webvees

In this tutorial, we will create registration form page using vuetifyjs 3 in Vue.js 3 . We will see sign up 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 Registration Form Example

1. Vuetify 3 create registration form using v-text-field, v-sheet, v-form, v-btn 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="signup">
                <v-text-field v-model="name" label="Name"></v-text-field>
                <v-text-field v-model="email" label="Email"></v-text-field>
                <v-text-field v-model="password" label="password"></v-text-field>

                <v-btn type="submit" color="primary" block class="mt-2">Sign up</v-btn>
            </v-form>
            <div class="mt-2">
                <p class="text-body-2">
                    Already have an account? <a href="#">Sign in</a>
                </p>
            </div>
        </v-sheet>
    </div>
</template>
<script>
export default {
    data() {
        return {
            name: "",
            email: "",
            password: "",
        };
    },
    methods: {
        signup() {
            //
        },
    },
};
</script>
 vuetify 3 create registration form

vuetify 3 create registration form

2. Vuetify 3 sign up form using v-text-field, v-sheet, v-form, v-btn 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="signup">
                <v-text-field variant="outlined" v-model="name" label="Name"></v-text-field>
                <v-text-field variant="outlined" v-model="email" label="Email"></v-text-field>
                <v-text-field variant="outlined" v-model="password" label="password"></v-text-field>

                <v-btn type="submit" color="primary" variant="outlined" block class="mt-2">Sign in</v-btn>
            </v-form>
            <div class="mt-2">
                <p class="text-body-2">
                    Already have an account? <a href="#">Sign in</a>
                </p>
            </div>
        </v-sheet>
    </div>
</template>
<script>
export default {
    data() {
        return {
            name: "",
            email: "",
            password: "",
        };
    },
    methods: {
        signup() {
            //
        },
    },
};
</script>
 vuetify 3 sign up

vuetify 3 sign up

3. Vuetify 3 sign up form using v-text-field, v-sheet, v-form, v-btn component with underline 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="signup">
                <v-text-field variant="underlined" v-model="name" label="Name"></v-text-field>
                <v-text-field variant="underlined" v-model="email" label="Email"></v-text-field>
                <v-text-field variant="underlined" v-model="password" label="password"></v-text-field>
  
                <v-btn type="submit" color="primary"  block class="mt-2">Sign up</v-btn>
            </v-form>
            <div class="mt-2">
                <p class="text-body-2">
                    Already have an account? <a href="#">Sign in</a>
                </p>
            </div>
        </v-sheet>
    </div>
  </template>
  <script>
  export default {
    data() {
        return {
            name: "",
            email: "",
            password: "",
        };
    },
    methods: {
        signup() {
            //
        },
    },
  };
  </script>
vue 3  vuetify 3 sign up form

vue 3 vuetify 3 sign up form