Nuxt-Vuetify

<template>

    <v-app class="bg-grey-lighten-4">

        <v-container>

            <v-row class="d-flex flex-column align-center mt-16">

                <v-col xs="12" sm="8" md="6" lg="5" xl="3" class="pa-0">

                    <v-card class="pa-7" elevation="5">

                        <h1 class="d-flex flex-column align-center mb-7 text-orange-darken-4">Login (Welcome)</h1>

                        <div class="font-weight-light">Email</div>

                        <v-text-field density="compact" variant="outlined" v-model="login.email"></v-text-field>

                        <div class="font-weight-light">Password</div>

                        <v-text-field density="compact" variant="outlined" v-model="login.password"></v-text-field>

                        <v-btn block class="mt-5 mb-10 bg-orange-darken-3 py-6" :loading="isLoading"

                            @click.prevent="onLogin()">Login</v-btn>

                        <v-divider></v-divider>

                        <p class="my-3 text-grey">

                            Don't have an account &nbsp; <NuxtLink to="/register" class="text-blue">Register</NuxtLink></p>

                    </v-card>

                </v-col>

            </v-row>

        </v-container>

    </v-app>

</template>

<script setup>

const login = reactive(

    {

        email: 'mnizam@uitm.edu.my',

        password: '1234',

    })

const isLoading = ref(false)

function onLogin() {

    isLoading.value = true

}

</script>

<template>

<v-app class="bg-grey-lighten-4">

        <v-container>

         <v-row class="d-flex flex-column align-center mt-16">

                <v-col xs="12" sm="8" md="7" lg="6" xl="4" class="pa-0">

                    <v-card class="pa-7">

                        <h1 class="d-flex flex-column align-center mb-7 text-primary">Registration</h1>

                        <div class="font-weight-light">Name</div>

                        <v-text-field density="compact" variant="outlined" v-model="register.name"></v-text-field>

                        <div class="font-weight-light">Email</div>

                        <v-text-field density="compact" variant="outlined" v-model="register.email"></v-text-field>

                        <div class="font-weight-light">Password</div>

                        <v-text-field density="compact" variant="outlined" v-model="register.password"></v-text-field>

                        <div class="font-weight-light">Age</div>

                        <v-text-field density="compact" variant="outlined" v-model="register.age"></v-text-field>

                        <v-btn block class="mt-5 mb-10 bg-primary py-6" :loading="isLoading"

                            @click.prevent="onRegister()">register</v-btn>

                        <v-divider></v-divider>

                        <p class="mt-3 text-grey">

                            <NuxtLink to="/" class="text-primary">Back</NuxtLink>

                        </p>

                    </v-card>

                </v-col>

            </v-row>

        </v-container>

</v-app>

</template>

<script setup>

const register = reactive({

     name: 'Mohd Nizam',

     email: 'mnizam@uitm.edu.my',

     password: '1234',

     age: '50'

})

const isLoading = ref(false)

function onRegister() {

        isLoading.value = true

}