Vuetify 3

VSCode terminal (Source)

npm i vuetify

main.js

import 'vuetify/styles'

import { createVuetify } from 'vuetify'

import * as components from 'vuetify/components'

import * as directives from 'vuetify/directives'

const vuetify = createVuetify({

components,

directives,

})

app.use(vuetify)

Icon Fonts

VSCode terminal (Source)

npm install @mdi/font -D

src/plugins/vuetify.js

import '@mdi/font/css/materialdesignicons.css'

import { createVuetify } from 'vuetify'

export default createVuetify({

icons: {

defaultSet: 'mdi',

},

})

RegisterPage.Vue

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

<v-container>

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

<v-col xs="12" sm="9" md="8" 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 Form</h1>

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

<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-text-field density="compact" variant="outlined" v-model="login.age"></v-text-field>

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

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

</v-card>

</v-col>

</v-row>

</v-container>

</v-app>

</template>

import { ref, reactive } from 'vue'

const login = reactive(

{

name: '',

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

password: '',

age: '',

})

const isLoading = ref(false)

const onRegister = () => {

isLoading.value = true

}

</script>

Deploy on CPanel (blog)