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.

Open on hover

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:

• Read Also: How to Install Tailwind CSS in Vue 3
• Read Also: Laravel 11 Datatable Server Side Pagination
• Read Also: How to Create Vue JS Auth Scaffolding in Laravel 11
• Read Also: Laravel 10 Vue 3 FullCalendar Integrate Example