Hello, web developers! In this article, we'll see how to create a beautiful UI with Vuetify. Here, we'll install Vuetify step by step. Vuetify is a powerful Vue Component Framework built from the ground up to be easy to learn and rewarding to master.
Vuetify is a Material Design component framework for Vue.js Vuetify is an Open Source project available. It has a wide range of pre-built components and utilities to help you quickly build beautiful, responsive applications.
Create Beautiful UI with Vuetify
Get started with Vuetify, the world’s most popular Vue.js framework for building feature-rich, blazing-fast applications.
Vuetify has support for multiple different installation paths.
yarn create vuetify
OR
npm create vuetify@latest
Then, open the src/main.js
file and import Vuetify and its CSS.
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
// Vuetify
import 'vuetify/styles'
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'
const vuetify = createVuetify({
components,
directives,
})
createApp(App).use(vuetify).mount('#app')
Vuetify Components are interactive building blocks for creating user interfaces.
Button Component
The v-btn
component replaces the standard html button with a material design theme and a multitude of options.
<v-btn prepend-icon="$vuetify" variant="tonal">
Button
</v-btn>
Card Component
The v-card
component is a versatile and enhanced version of v-sheet that provides a simple interface for headings, text, images, icons, and more.
<v-card
title="Card title"
subtitle="Subtitle"
text="..."
variant="tonal"
>
<v-card-actions>
<v-btn>Click me</v-btn>
</v-card-actions>
</v-card>
Example:
<template>
<v-card
class="mx-auto"
prepend-icon="$vuetify"
subtitle="The #1 Vue UI Library"
width="400"
>
<template v-slot:title>
<span class="font-weight-black">Welcome to Vuetify</span>
</template>
<v-card-text class="bg-surface-light pt-4">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione debitis quis est labore voluptatibus! Eaque cupiditate minima, at placeat totam, magni doloremque veniam neque porro libero rerum unde voluptatem!
</v-card-text>
</v-card>
</template>
Menu Component
The v-menu
component shows a menu at the position of the element used to activate it.
Menus can be accessed using hover instead of clicking with the open-on-hover prop.
<template>
<div class="text-center">
<v-menu
open-on-hover
>
<template v-slot:activator="{ props }">
<v-btn
color="primary"
v-bind="props"
>
Dropdown
</v-btn>
</template>
<v-list>
<v-list-item
v-for="(item, index) in items"
:key="index"
>
<v-list-item-title>{{ item.title }}</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
</div>
</template>
<script>
export default {
data: () => ({
items: [
{ title: 'Click Me' },
{ title: 'Click Me' },
{ title: 'Click Me' },
{ title: 'Click Me 2' },
],
}),
}
</script>
Data table Component
The v-data-table
component is used for displaying tabular data. Features include sorting, searching, pagination, grouping, and row selection. The data table component is used for displaying tabular data in a way that is easy for users to scan.
<template>
<v-app>
<v-container>
<v-data-table :items="items"></v-data-table>
</v-container>
</v-app>
</template>
<script setup>
const items = [
{
name: 'Elephant',
species: 'USA',
diet: 'Herbivore',
habitat: 'Forests',
},
{
name: 'Lion',
species: 'India',
diet: 'Meat',
habitat: 'Forests',
},
// ... more items
]
</script>
Form Component
Vuetify offers a simple built-in form validation system based on functions as rules, making it easy for developers to get set up quickly.
The v-form
component makes it easy to add validation to form inputs. All input components have a rules prop that can be used to specify conditions in which the input is either valid or invalid.
<template>
<form @submit.prevent="submit">
<v-text-field
v-model="name.value.value"
:counter="10"
:error-messages="name.errorMessage.value"
label="Name"
></v-text-field>
<v-text-field
v-model="phone.value.value"
:counter="7"
:error-messages="phone.errorMessage.value"
label="Phone Number"
></v-text-field>
<v-text-field
v-model="email.value.value"
:error-messages="email.errorMessage.value"
label="E-mail"
></v-text-field>
<v-select
v-model="select.value.value"
:error-messages="select.errorMessage.value"
:items="items"
label="Select"
></v-select>
<v-checkbox
v-model="checkbox.value.value"
:error-messages="checkbox.errorMessage.value"
label="Option"
type="checkbox"
value="1"
></v-checkbox>
<v-btn
class="me-4"
type="submit"
>
submit
</v-btn>
<v-btn @click="handleReset">
clear
</v-btn>
</form>
</template>
<script setup>
import { ref } from 'vue'
import { useField, useForm } from 'vee-validate'
const { handleSubmit, handleReset } = useForm({
validationSchema: {
name (value) {
if (value?.length >= 2) return true
return 'Name needs to be at least 2 characters.'
},
phone (value) {
if (value?.length > 9 && /[0-9-]+/.test(value)) return true
return 'Phone number needs to be at least 9 digits.'
},
email (value) {
if (/^[a-z.-]+@[a-z.-]+\.[a-z]+$/i.test(value)) return true
return 'Must be a valid e-mail.'
},
select (value) {
if (value) return true
return 'Select an item.'
},
checkbox (value) {
if (value === '1') return true
return 'Must be checked.'
},
},
})
const name = useField('name')
const phone = useField('phone')
const email = useField('email')
const select = useField('select')
const checkbox = useField('checkbox')
const items = ref([
'Item 1',
'Item 2',
'Item 3',
'Item 4',
])
const submit = handleSubmit(values => {
alert(JSON.stringify(values, null, 2))
})
</script>
You might also like: