Create Registration Form in Vue 3 with Vuetify 3

In this tutorial, we will create a registration form page using Vuetify.js 3 in Vue.js 3. We will implement a 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.

Vue

<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>

2. Vuetify 3 Sign-up form using v-text-field, v-sheet, v-form, and v-btn components with the outline variant.

Vue

<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>

3. Vuetify 3 sign up form using v-text-field, v-sheet, v-form, v-btn component with underline variant.

Vue

<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>

Javed sheikh

Hello there! I’m Javed Sheikh, a frontend developer with a passion for crafting seamless user experiences. With expertise in JavaScript frameworks like Vue.js, Svelte, and React, I bring creativity and innovation to every project I undertake. From building dynamic web applications to optimizing user interfaces,