tutorial

How to Use the Vuetify Icon Component

Icons are useful for conveying information to the user in a concise manner. They add more context to various aspects of our web apps. In this article, we’ll learn how to show icons in our apps to users with the Material Design framework.

The v-icon Component

Vuetify provides the v-icon component for displaying icons. This component provides a large set of glyphs. The list of all available icons is at the official Material Design Icons page. To use an icon in this list, we simply use the mdi- prefix followed by the icon name.

<template>
  <v-app>
    <v-col class="ma-2">
      <v-row justify="space-around">
        <v-icon>mdi-cog</v-icon>
        <v-icon> mdi-calendar</v-icon>
        <v-icon> mdi-access-point </v-icon>
        <v-icon> mdi-star </v-icon>
      </v-row>
    </v-col>
  </v-app>
</template>

<script>
export default {
  name: 'App',
};
</script>
Displaying icons with the Vuetify icon component.

Customizing Icon Sizes in Vuetify

With the x-small, small, medium, large and x-large props, we can customize the icon sizes:

<template>
  <v-app>
    <v-col class="ma-2">
      <v-row justify="space-around">
        <v-icon> mdi-cog</v-icon>
        <v-icon> mdi-calendar</v-icon>
        <v-icon> mdi-access-point </v-icon>
        <v-icon> mdi-star </v-icon>
      </v-row>
      <v-row justify="space-around">
        <v-icon large> mdi-cog</v-icon>
        <v-icon large> mdi-calendar</v-icon>
        <v-icon large> mdi-access-point </v-icon>
        <v-icon large> mdi-star </v-icon>
      </v-row>
      <v-row justify="space-around">
        <v-icon x-large> mdi-cog</v-icon>
        <v-icon x-large> mdi-calendar</v-icon>
        <v-icon x-large> mdi-access-point </v-icon>
        <v-icon x-large> mdi-star </v-icon>
      </v-row>
    </v-col>
  </v-app>
</template>

<script>
export default {
  name: 'App',
};
</script>
Displaying icons of various sizes.

Customizing Icon Colors in Vuetify

We can change the color of icons in Vuetify from the standard light and dark themes using the color prop:

<template>
  <v-app>
    <v-col class="ma-2">
      <v-row justify="space-around">
        <v-icon color="black">mdi-cog</v-icon>
        <v-icon color="primary"> mdi-calendar</v-icon>
        <v-icon color="red"> mdi-heart </v-icon>
        <v-icon color="yellow"> mdi-star </v-icon>
      </v-row>
    </v-col>
  </v-app>
</template>

<script>
export default {
  name: 'App',
};
</script>
Customizing icon colors in Vuetify.

Icon Click Events in Vuetify

We can bind click events to the icon component to enable interactivity. For example:

<template>
  <v-app>
    <v-col class="ma-2">
      <v-row justify="center">
        <v-icon :color="liked ? 'red' : 'grey'" @click="liked = !liked">
          mdi-heart
        </v-icon>
      </v-row>
    </v-col>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    liked: false,
  }),
};
</script>
The heart icon, yet to be clicked.

When the user selects the heart icon, the color changes:

The heart icon becomes red after getting clicked

Placing Icons in Buttons

We can use icons inside of buttons to add more visual emphasis to the action the button performs:

<template>
  <v-app>
    <div class="ma-2 d-flex justify-space-around">
      <v-btn color="green" dark>
        Accept <v-icon right>mdi-checkbox-marked-circle</v-icon>
      </v-btn>
      <v-btn color="red" dark>
        Decline <v-icon right>mdi-cancel</v-icon>
      </v-btn>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    liked: false,
  }),
};
</script>
Placing icons inside of buttons.

Displaying Font Awesome Icons

Vuetify supports icons from Font Awesome. After including the Font Awesome icons in your project, you can show an icon with its fa- prefixed icon name:

<template>
  <v-app>
    <v-row align="start" justify="space-around" class="ma-4">
      <v-icon>fas fa-lock</v-icon>
      <v-icon>fas fa-search</v-icon>
      <v-icon>fas fa-list</v-icon>
      <v-icon>fas fa-edit</v-icon>
      <v-icon>fas fa-tachometer-alt</v-icon>
      <v-icon>fas fa-circle-notch</v-icon>
    </v-row>
  </v-app>
</template>


<script>
export default {
  name: 'App',
};
</script>
Displaying Font Awesome icons.

Displaying Material Design Icons

Vuetify also supports Material Design icons from material.io. We simply use the icon name inside the v-icon:

<template>
  <v-app>
    <v-row align="start" justify="space-around" class="ma-4">
      <v-icon>settings</v-icon>
      <v-icon>home</v-icon>
      <v-icon>search</v-icon>
      <v-icon>delete</v-icon>
      <v-icon>list</v-icon>
    </v-row>
  </v-app>
</template>


<script>
export default {
  name: 'App',
};
</script>
Displaying Material Design icons.

Summary

Icons are important UI elements used to concisely communicate and emphasize information to users. Vuetify provides the v-icon component for displaying icons. This component comes with various props for customization and supports Font Awesome and Material Design icons.

How to Use the Vuetify Navigation Drawer Component

Navigation drawers are useful for navigating through a web application. They provide an easily accessible means of quickly jumping from one location to another. In this article, we’ll learn how we can create and customize navigation drawers with Vuetify.

The v-navigation-drawer Component

We create navigation drawers in Vuetify with the v-navigation-drawer component. We set the app prop on this component to indicate to the Vuetify framework that it is part of the application layout.

<template>
  <v-app>
    <v-app-bar color="green" class="flex-grow-0" app dark>
      <v-app-bar-title>Coding Beauty</v-app-bar-title>
    </v-app-bar>
    <v-navigation-drawer app>
      <v-list-item>
        <v-list-item-content>
          <v-list-item-title class="text-h6"> Learning Vuetify </v-list-item-title>
          <v-list-item-subtitle> Navigation drawers</v-list-item-subtitle>
        </v-list-item-content>
      </v-list-item>
      <v-divider></v-divider>
      <v-list dense nav>
        <v-list-item v-for="item in items" :key="item.title" link>
          <v-list-item-icon>
            <v-icon>{{ item.icon }}</v-icon>
          </v-list-item-icon>

          <v-list-item-content>
            <v-list-item-title>{{ item.title }}</v-list-item-title>
          </v-list-item-content>
        </v-list-item>
      </v-list>
    </v-navigation-drawer>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    items: [
      { title: 'Dashboard', icon: 'mdi-view-dashboard' },
      { title: 'Account', icon: 'mdi-account-box' },
      { title: 'Settings', icon: 'mdi-cog' },
    ],
  }),
};
</script>
Creating Vuetify navigation drawers with the v-navigation-drawer component.

Temporary Navigation Drawers in Vuetify

Navigation drawers don’t have to be fixed. We can use a variable to toggle its visibility through v-model. We do this in the code below when the v-app-bar-nav-icon is selected. Apart from setting this variable to false, clicking outside of an open navigation drawer can also close it.

<template>
  <v-app>
    <v-app-bar color="primary" class="flex-grow-0" app dark>
      <v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
      <v-app-bar-title>Coding Beauty</v-app-bar-title>
    </v-app-bar>
    <v-navigation-drawer app v-model="drawer">
      <v-list-item>
        <v-list-item-content>
          <v-list-item-title class="text-h6"> Learning Vuetify</v-list-item-title>
          <v-list-item-subtitle> Using Navigation drawers</v-list-item-subtitle>
        </v-list-item-content>
      </v-list-item>
      <v-divider></v-divider>
      <v-list dense nav>
        <v-list-item v-for="item in items" :key="item.title" link>
          <v-list-item-icon>
            <v-icon>{{ item.icon }}</v-icon>
          </v-list-item-icon>

          <v-list-item-content>
            <v-list-item-title>{{ item.title }}</v-list-item-title>
          </v-list-item-content>
        </v-list-item>
      </v-list>
    </v-navigation-drawer>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    drawer: false,
    items: [
      { title: 'Dashboard', icon: 'mdi-view-dashboard' },
      { title: 'Account', icon: 'mdi-account-box' },
      { title: 'Settings', icon: 'mdi-cog' },
    ],
  }),
};
</script>
The navigation drawer is closed.
The navigation drawer is closed.
The navigation drawer is open.
Opening the navigation drawer.

Customizing Navigation Drawer Colors in Vuetify

We can use varying color styles on our navigation drawers with the color prop. With the dark prop, we can also make the text contained in the drawer light or dark, to blend in properly with its background color:

<template>
  <v-app>
    <v-app-bar color="primary" class="flex-grow-0" app dark>
      <v-app-bar-title>Coding Beauty</v-app-bar-title>
    </v-app-bar>
    <v-navigation-drawer app color="green" dark>
      <v-divider></v-divider>
      <v-list dense nav>
        <v-list-item v-for="item in items" :key="item.title" link>
          <v-list-item-icon>
            <v-icon>{{ item.icon }}</v-icon>
          </v-list-item-icon>

          <v-list-item-content>
            <v-list-item-title>{{ item.title }}</v-list-item-title>
          </v-list-item-content>
        </v-list-item>
      </v-list>
    </v-navigation-drawer>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    items: [
      { title: 'Dashboard', icon: 'mdi-view-dashboard' },
      { title: 'Account', icon: 'mdi-account-box' },
      { title: 'Settings', icon: 'mdi-cog' },
    ],
  }),
};
</script>
Navigation drawer custom colors.

Bottom Navigation Drawers in Vuetify

We can relocate the navigation drawer to come from the bottom of the screen on mobile devices, by setting the bottom prop to true. This alternative style only activates when its mobile-breakpoint is met.

<template>
  <v-app>
    <v-app-bar color="primary" class="flex-grow-0" app dark>
      <v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
      <v-app-bar-title>Coding Beauty</v-app-bar-title>
    </v-app-bar>
    <v-navigation-drawer app v-model="drawer" bottom>
      <v-list-item>
        <v-list-item-content>
          <v-list-item-title class="text-h6"> Learning Vuetify</v-list-item-title>
          <v-list-item-subtitle> Using Navigation drawers</v-list-item-subtitle>
        </v-list-item-content>
      </v-list-item>
      <v-divider></v-divider>
      <v-list dense nav>
        <v-list-item v-for="item in items" :key="item.title" link>
          <v-list-item-icon>
            <v-icon>{{ item.icon }}</v-icon>
          </v-list-item-icon>

          <v-list-item-content>
            <v-list-item-title>{{ item.title }}</v-list-item-title>
          </v-list-item-content>
        </v-list-item>
      </v-list>
    </v-navigation-drawer>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    drawer: false,
    items: [
      { title: 'Dashboard', icon: 'mdi-view-dashboard' },
      { title: 'Account', icon: 'mdi-account-box' },
      { title: 'Settings', icon: 'mdi-cog' },
    ],
  }),
};
</script>

Vuetify Navigation Drawer Mini Variant

With the mini-variant prop, we can reduce the size of the drawer and only show the first element of each of the elements inside the v-list. The drawer reduces to a size of 56px by default.

<template>
  <v-app>
    <v-app-bar color="primary" class="flex-grow-0" app dark>
      <v-app-bar-title>Coding Beauty</v-app-bar-title>
    </v-app-bar>
    <v-navigation-drawer app mini-variant>
      <v-divider></v-divider>
      <v-list dense nav>
        <v-list-item v-for="item in items" :key="item.title" link>
          <v-list-item-icon>
            <v-icon>{{ item.icon }}</v-icon>
          </v-list-item-icon>

          <v-list-item-content>
            <v-list-item-title>{{ item.title }}</v-list-item-title>
          </v-list-item-content>
        </v-list-item>
      </v-list>
    </v-navigation-drawer>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    items: [
      { title: 'Dashboard', icon: 'mdi-view-dashboard' },
      { title: 'Account', icon: 'mdi-account-box' },
      { title: 'Settings', icon: 'mdi-cog' },
    ],
  }),
};
</script>
Navigation drawer mini variant.

Expanding Navigation Drawers on Hover

If we want a navigation drawer of the mini-variant to expand on hover, we can set the expand-on-hover property to true:

<template>
  <v-app>
    <v-app-bar color="primary" class="flex-grow-0" app dark>
      <v-app-bar-title>Coding Beauty</v-app-bar-title>
    </v-app-bar>
    <v-navigation-drawer app expand-on-hover>
      <v-divider></v-divider>
      <v-list dense nav>
        <v-list-item v-for="item in items" :key="item.title" link>
          <v-list-item-icon>
            <v-icon>{{ item.icon }}</v-icon>
          </v-list-item-icon>

          <v-list-item-content>
            <v-list-item-title>{{ item.title }}</v-list-item-title>
          </v-list-item-content>
        </v-list-item>
      </v-list>
    </v-navigation-drawer>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    items: [
      { title: 'Dashboard', icon: 'mdi-view-dashboard' },
      { title: 'Account', icon: 'mdi-account-box' },
      { title: 'Settings', icon: 'mdi-cog' },
    ],
  }),
};
</script>
Navigation drawer expanding on mouse hover.
The navigation drawer expands on mouse hover.

Right-aligned Navigation Drawers in Vuetify

Setting the right prop to true on the navigation drawer component will align it to the right of the screen instead of the default left.

<template>
  <v-app>
    <v-app-bar color="red" class="flex-grow-0" app dark>
      <v-app-bar-title>Coding Beauty</v-app-bar-title>
    </v-app-bar>
    <v-navigation-drawer app right>
      <v-list-item>
        <v-list-item-content>
          <v-list-item-title class="text-h6"> Learning Vuetify </v-list-item-title>
          <v-list-item-subtitle> Navigation drawers</v-list-item-subtitle>
        </v-list-item-content>
      </v-list-item>
      <v-divider></v-divider>
      <v-list dense nav>
        <v-list-item v-for="item in items" :key="item.title" link>
          <v-list-item-icon>
            <v-icon>{{ item.icon }}</v-icon>
          </v-list-item-icon>

          <v-list-item-content>
            <v-list-item-title>{{ item.title }}</v-list-item-title>
          </v-list-item-content>
        </v-list-item>
      </v-list>
    </v-navigation-drawer>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    items: [
      { title: 'Dashboard', icon: 'mdi-view-dashboard' },
      { title: 'Account', icon: 'mdi-account-box' },
      { title: 'Settings', icon: 'mdi-cog' },
    ],
  }),
};
</script>
Aligning the navigation drawer to the right.

Permanent Navigation Drawers

By default, navigation drawers get hidden once its mobile-breakpoint is met:

The navigation drawer is hidden once its mobile-breakpoint is met.

We can prevent this using the permanent prop:

<template>
  <v-app>
    <v-app-bar color="indigo" class="flex-grow-0" app dark>
      <v-app-bar-title>Coding Beauty</v-app-bar-title>
    </v-app-bar>
    <v-card elevation="12">
      <v-navigation-drawer app permanent>
        <v-list-item>
          <v-list-item-content>
            <v-list-item-title class="text-h6">
              Learning Vuetify
            </v-list-item-title>
            <v-list-item-subtitle> Navigation drawers</v-list-item-subtitle>
          </v-list-item-content>
        </v-list-item>
        <v-divider></v-divider>
        <v-list dense nav>
          <v-list-item v-for="item in items" :key="item.title" link>
            <v-list-item-icon>
              <v-icon>{{ item.icon }}</v-icon>
            </v-list-item-icon>

            <v-list-item-content>
              <v-list-item-title>{{ item.title }}</v-list-item-title>
            </v-list-item-content>
          </v-list-item>
        </v-list>
      </v-navigation-drawer>
    </v-card>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    items: [
      { title: 'Dashboard', icon: 'mdi-view-dashboard' },
      { title: 'Account', icon: 'mdi-account-box' },
      { title: 'Settings', icon: 'mdi-cog' },
    ],
  }),
};
</script>

Using the permanent prop on the navigation drawer in Vuetify.

Summary

Similar to tabs, navigation drawers can be used to add an additional layer of navigation to your web applications. Vuetify provides the v-navigation-drawer component for creating them, with various props for customization.

Vuetify Toolbar: How to Create Beautiful Toolbars

A toolbar is a common way of allowing navigation across a web application. In this article, we’ll learn how to create and customize toolbars with the Vuetify toolbar component.

The Toolbar Component (v-toolbar)

Vuetify provides the v-toolbar component for creating a toolbar:

<template>
  <v-app>
    <v-toolbar class="flex-grow-0"> </v-toolbar>
  </v-app>
</template>

<script>
export default {
  name: 'App',
};
</script>

We use the flex-grow-0 flex helper on the toolbar to prevent it from covering half of the screen.

Creating a toolbar with the Vuetify toolbar component.

Vuetify Toolbar Title

We can use the v-toolbar-title component inside the v-toolbar to set the title of a toolbar. For example:

<template>
  <v-app>
    <v-toolbar class="flex-grow-0">
      <v-toolbar-title>Coding Beauty</v-toolbar-title>
    </v-toolbar>
  </v-app>
</template>

<script>
export default {
  name: 'App',
};
</script>
Setting the title of the Vuetify toolbar component.

Vuetify Toolbar Colors

We can use the color prop of v-toolbar to customize the color of the toolbar.

<template>
  <v-app>
    <v-toolbar
      class="flex-grow-0"
      color="primary"
    >
      <v-toolbar-title>Coding Beauty</v-toolbar-title>
    </v-toolbar>
  </v-app>
</template>

<script>
export default {
  name: 'App',
};
</script>
Customizing the color of the Vuetify toolbar component.

Vuetify Toolbar Dark

Apply the dark property to the toolbar component will make text on the toolbar white, instead of black. This can help to create a great color contrast between the text and the background.

<template>
  <v-app>
    <v-toolbar
      class="flex-grow-0"
      color="primary"
      dark
    >
      <v-toolbar-title>Coding Beauty</v-toolbar-title>
    </v-toolbar>
  </v-app>
</template>

<script>
export default {
  name: 'App',
};
</script>
Using the dark prop of v-toolbar.

Vuetify Toolbar Actions

We can add functionality to a toolbar by placing buttons on it. In the example below, we add two icon buttons to the toolbar – one to search and another to display a menu containing more options.

<template>
  <v-app>
    <v-toolbar
      class="flex-grow-0"
      color="purple accent-4"
      dark
    >
      <v-toolbar-title>Coding Beauty</v-toolbar-title>
      <v-spacer></v-spacer>
      <v-btn icon>
        <v-icon>mdi-magnify</v-icon>
      </v-btn>

      <v-btn icon>
        <v-icon>mdi-dots-vertical</v-icon>
      </v-btn>
    </v-toolbar>
  </v-app>
</template>

<script>
export default {
  name: 'App',
};
</script>
Adding actions and functionality to the v-toolbar component.

Vuetify Toolbar Dense

Setting the dense prop to true on the v-toolbar component will make it more compact:

<template>
  <v-app>
    <v-toolbar
      class="flex-grow-0"
      color="white"
      dense
    >
      <v-toolbar-title>Coding Beauty</v-toolbar-title>
      <v-spacer></v-spacer>
      <v-btn icon>
        <v-icon>mdi-magnify</v-icon>
      </v-btn>

      <v-btn icon>
        <v-icon>mdi-heart</v-icon>
      </v-btn>

      <v-btn icon>
        <v-icon>mdi-dots-vertical</v-icon>
      </v-btn>
    </v-toolbar>
  </v-app>
</template>

<script>
export default {
  name: 'App',
};
</script>
Using the dense prop of the Vuetify toolbar component.

Vuetify Toolbar Flat

We can remove toolbar elevation with the flat property:

<template>
  <v-app>
    <v-toolbar
      class="flex-grow-0"
      color="red accent-2"
      dark
      flat
    >
      <v-toolbar-title>Coding Beauty</v-toolbar-title>
      <v-spacer></v-spacer>
      <v-btn icon>
        <v-icon>mdi-magnify</v-icon>
      </v-btn>

      <v-btn icon>
        <v-icon>mdi-heart</v-icon>
      </v-btn>

      <v-btn icon>
        <v-icon>mdi-dots-vertical</v-icon>
      </v-btn>
    </v-toolbar>
  </v-app>
</template>

<script>
export default {
  name: 'App',
};
</script>
Using the flat prop of v-toolbar.

Vuetify Toolbar Outlined

The outlined prop adds an outline around the toolbar.

<template>
  <v-app>
    <v-toolbar
      class="flex-grow-0"
      flat
      outlined
    >
      <v-toolbar-title>Coding Beauty</v-toolbar-title>
      <v-spacer></v-spacer>
      <v-btn icon>
        <v-icon>mdi-magnify</v-icon>
      </v-btn>

      <v-btn icon>
        <v-icon>mdi-heart</v-icon>
      </v-btn>

      <v-btn icon>
        <v-icon>mdi-dots-vertical</v-icon>
      </v-btn>
    </v-toolbar>
  </v-app>
</template>

<script>
export default {
  name: 'App',
};
</script>
Using the outlined prop of the Vuetify toolbar component.

Prominent Toolbar

With the prominent prop, we can create a toolbar with an increased height of 128px. A prominent toolbar has its title positioned towards the bottom of its container.

<template>
  <v-app>
    <v-toolbar
      class="flex-grow-0"
      dark
      color="green"
      prominent
    >
      <v-toolbar-title>Coding Beauty</v-toolbar-title>
      <v-spacer></v-spacer>
      <v-btn icon>
        <v-icon>mdi-magnify</v-icon>
      </v-btn>

      <v-btn icon>
        <v-icon>mdi-heart</v-icon>
      </v-btn>

      <v-btn icon>
        <v-icon>mdi-dots-vertical</v-icon>
      </v-btn>
    </v-toolbar>
  </v-app>
</template>

<script>
export default {
  name: 'App',
};
</script>
Using the prominent prop of v-toolbar.

Vuetify Toolbar Rounded

Setting the rounded prop to true on v-toolbar will add make the corners of the toolbar rounded

<template>
  <v-app>
    <v-toolbar
      class="flex-grow-0"
      dark
      color="green"
      rounded
    >
      <v-toolbar-title>Coding Beauty</v-toolbar-title>
      <v-spacer></v-spacer>
      <v-btn icon>
        <v-icon>mdi-magnify</v-icon>
      </v-btn>

      <v-btn icon>
        <v-icon>mdi-heart</v-icon>
      </v-btn>

      <v-btn icon>
        <v-icon>mdi-dots-vertical</v-icon>
      </v-btn>
    </v-toolbar>
  </v-app>
</template>

<script>
export default {
  name: 'App',
};
</script>
Using the rounded prop of v-toolbar.

Vuetify Toolbar Shaped

We can use the shaped prop to create a toolbar with the top-left and bottom-right corners rounded.

<template>
  <v-app>
    <v-toolbar
      class="flex-grow-0"
      dark
      color="indigo"
      shaped
    >
      <v-toolbar-title>Coding Beauty</v-toolbar-title>
      <v-spacer></v-spacer>
      <v-btn icon>
        <v-icon>mdi-magnify</v-icon>
      </v-btn>

      <v-btn icon>
        <v-icon>mdi-heart</v-icon>
      </v-btn>

      <v-btn icon>
        <v-icon>mdi-dots-vertical</v-icon>
      </v-btn>
    </v-toolbar>
  </v-app>
</template>

<script>
export default {
  name: 'App',
};
</script>
Using the shaped prop of the Vuetify toolbar component.

Conclusion

A toolbar is a user interface element used for site and app navigation. We can use the Vuetify toolbar component (v-toolbar) and its various props to create and customize toolbars.

How to Use the Vuetify Toggle Button Component

Toggle buttons are useful for creating a group of buttons whose individual selection states all depend on a single variable. In this article, we’ll see the ways in which we can create and customize this component in Vuetify.

The v-btn-toggle Component

We can create a button group (or toggle button) in Vuetify with the v-btn-toggle component. The group of buttons can be selected or toggled under a single v-model, which is bound to the format variable:

<template>
  <v-app>
    <v-row class="ma-2" justify="center">
      <v-btn-toggle v-model="format" borderless>
        <v-btn value="left">
          <span>Left</span><v-icon right>mdi-format-align-left</v-icon>
        </v-btn>
        <v-btn value="center">
          <span>Center</span><v-icon right>mdi-format-align-center</v-icon>
        </v-btn>
        <v-btn value="right">
          <span>Right</span><v-icon right>mdi-format-align-right</v-icon>
        </v-btn>
      </v-btn-toggle>
    </v-row>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    format: 'center',
  }),
};
</script>
Creating a Vuetify toggle button.

Clicking one of the buttons in the group unselects the currently selected one:

Clicking another button in the button group.

Ensuring a Toggle Button Value with the mandatory Prop

Vuetify provides the mandatory prop, used to make sure that a toggle button will always have a value:

<template>
  <v-app>
    <v-row class="ma-2" justify="center">
      <v-btn-toggle v-model="format" borderless mandatory>
        <v-btn value="left">
          <span>Left</span><v-icon right>mdi-format-align-left</v-icon>
        </v-btn>
        <v-btn value="center">
          <span>Center</span><v-icon right>mdi-format-align-center</v-icon>
        </v-btn>
        <v-btn value="right">
          <span>Right</span><v-icon right>mdi-format-align-right</v-icon>
        </v-btn>
      </v-btn-toggle>
    </v-row>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    format: null,
  }),
};
</script>
Vuetify toggle button with the mandatory prop.

Vuetify Toggle Button Multiple Selection

The multiple prop allows us to select more than one button in the group:

<template>
  <v-app>
    <v-row class="ma-2" justify="center">
      <v-btn-toggle v-model="selectedLetters" multiple>
        <v-btn v-for="(ch, index) in word" :key="index">{{ch}}</v-btn>
      </v-btn-toggle>
    </v-row>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    word: 'Beauty'.split(''),
    selectedLetters: []
  }),
};
</script>
Vuetify toggle button with multiple selection enabled.

Vuetify Rounded Toggle Buttons

We can make toggle buttons in Vuetify rounded with the rounded prop:

<template>
  <v-app>
    <v-row class="ma-2" justify="center">
      <v-btn-toggle v-model="letter" rounded>
        <v-btn v-for="(ch, index) in word" :key="index">{{ ch }}</v-btn>
      </v-btn-toggle>
    </v-row>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    word: 'Coding'.split(''),
    letter: '',
  }),
};
</script>
Rounded Vuetify button group.

Vuetify Borderless Toggle Buttons

Setting the borderless prop to true on a v-btn-toggle will remove the borders from each button in the group.

<template>
  <v-app>
    <v-row class="ma-2" justify="center">
      <v-btn-toggle v-model="letter" rounded borderless>
        <v-btn v-for="(ch, index) in word" :key="index">{{ ch }}</v-btn>
      </v-btn-toggle>
    </v-row>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    word: 'Coding'.split(''),
    letter: '',
  }),
};
</script>
Borderless Vuetify button group component.

Customizing Toggle Button Colors in Vuetify

We can change the color of the selected button(s) in a button group with the color prop:

<template>
  <v-app>
    <v-row class="ma-2" justify="center">
      <v-btn-toggle v-model="selectedLetters" rounded multiple color="blue">
        <v-btn v-for="(ch, index) in word" :key="index">{{ ch }}</v-btn>
      </v-btn-toggle>
    </v-row>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    word: 'Beauty'.split(''),
    selectedLetters: [],
  }),
};
</script>
Customizing a toggle button in Vuetify.

Summary

Toggle buttons are useful when we have a group of logically related buttons whose selection states need to be controlled by a single variable. Vuetify provides the v-btn-toggle component for creating them and various props for customization.

How to Use the Vuetify Textarea Component

Vuetify provides the textarea component, very similar to a text field, but better for collecting large amounts of text input from users. Let us explore some features of this component in this article.

The Vuetify Textarea Component

We can create a textarea in Vuetify with the v-text-area component.

<template>
  <v-app>
    <v-row class="ma-2" justify="center">
      <v-col cols="6">
        <v-textarea
          label="Default style"
          value="Learning about textareas at Coding Beauty!"
        >
        </v-textarea>
      </v-col>
    </v-row>
  </v-app>
</template>

<script>
export default {
  name: 'App',
};
</script>
The default textarea variant in Vuetify.

Vuetify Textarea Solo Variant

To use the alternative solo design for textareas, we can set the solo prop to true:

<template>
  <v-app>
    <v-row class="ma-2" justify="center">
      <v-col cols="6">
        <v-textarea label="Solo textarea" solo> </v-textarea>
      </v-col>
    </v-row>
  </v-app>
</template>

<script>
export default {
  name: 'App',
};
</script>
Vuetify text area with the solo design.
Solo textarea.
Vuetify solo textarea with focus.
Solo textarea with focus.

Vuetify Text Area Filled Variant

Similar to Vuetify text fields, we can use the filled prop to activate the filled variant of the text area.

<template>
  <v-app>
    <v-row class="ma-2" justify="center">
      <v-col cols="6">
        <v-textarea
          label="Filled textarea"
          value="Learning about textareas at Coding Beauty!"
          filled
        >
        </v-textarea>
      </v-col>
    </v-row>
  </v-app>
</template>

<script>
export default {
  name: 'App',
};
</script>
Vuetify textarea filled variant.

Vuetify Textarea Outlined Variant

We also have the outlined variant. We can change a textarea to this alternative style with the outlined prop:

<template>
  <v-app>
    <v-row class="ma-2" justify="center">
      <v-col cols="6">
        <v-textarea
          label="Outlined textarea"
          value="Learning about textareas at Coding Beauty!"
          outlined
        >
        </v-textarea>
      </v-col>
    </v-row>
  </v-app>
</template>

<script>
export default {
  name: 'App',
};
</script>
Vuetify textarea outlined variant.

Vuetify Textarea Auto Grow

With the auto-grow prop, we can make a textarea automatically increase in size when the text in it exceeds its height.

Vuetify text area with 4 rows.
Textarea with four rows
Textarea expands to accommodate six rows of text

Vuetify Textarea Custom Colors

We can style the textarea colors with the background-color and color prop:

<template>
  <v-app>
    <v-row class="ma-2" justify="center">
      <v-col cols="6">
        <v-textarea label="Label" background-color="gray lighten-2" color="indigo">
        </v-textarea>
      </v-col>
    </v-row>
  </v-app>
</template>

<script>
export default {
  name: 'App',
};
</script>

Clearable Textareas in Vuetify

We can clear the text from a textarea with the clearable prop, and customize the icon used with the clearable-icon prop:

<template>
  <v-app>
    <v-row class="ma-2" justify="center">
      <v-col cols="6">
        <v-textarea
          clearable
          clear-icon="mdi-close"
          label="Text"
          value="You can clear all the text in this textarea."
        ></v-textarea>
      </v-col>
    </v-row>
  </v-app>
</template>

<script>
export default {
  name: 'App',
};
</script>
Clearable textarea.
Clearable textarea.
Clicking the icon clears the text in the text area.
Clicking the icon clears the text.

Vuetify Textarea Character Limits

We can inform the user of the number of characters entered in a textarea with the counter prop. This is useful for enforcing character limits.

<template>
  <v-app>
    <v-row class="ma-2" justify="center">
      <v-col cols="6">
        <v-textarea counter label="Text"></v-textarea>
      </v-col>
    </v-row>
  </v-app>
</template>

<script>
export default {
  name: 'App',
};
</script>
Textarea with 27 characters.
Adding “Coding Beauty” takes the textarea character count to 42.

Vuetify Textarea Icons

We can include an icon with the textarea to add more context. Here, we use the preprend-icon prop to include the icon before the textarea:

<template>
  <v-app>
    <v-row class="ma-2" justify="center">
      <v-col cols="6">
        <v-textarea
          prepend-icon="mdi-note"
          label="prepend-icon"
          value="Learning about textareas at Coding Beauty!"
        ></v-textarea>
      </v-col>
    </v-row>
  </v-app>
</template>

<script>
export default {
  name: 'App',
};
</script>
Using the prepend-icon prop of v-textarea

The append-icon prop shows the icon after the textarea:

<template>
  <v-app>
    <v-row class="ma-2" justify="center">
      <v-col cols="6">
        <v-textarea
          append-icon="mdi-note"
          label="append-icon"
          value="Learning about textareas at Coding Beauty!"
        ></v-textarea>
      </v-col>
    </v-row>
  </v-app>
</template>

<script>
export default {
  name: 'App',
};
</script>
Using the append-icon prop of v-textarea

We also have the prepend-inner-icon and append-inner-icon props:

Preventing a TextArea from Growing

The no-resize prop makes the textarea remain the same size no matter how much content it contains:

<template>
  <v-app>
    <v-row class="ma-2" justify="center">
      <v-col cols="6">
        <v-textarea
          label="no-resize"
          rows="1"
          no-resize
          value="Just as we can make Vuetify textareas grow automatically, we can also make them to always remain the same size."
        ></v-textarea>
      </v-col>
    </v-row>
  </v-app>
</template>

<script>
export default {
  name: 'App',
};
</script>
Use the no-resize prop on a text area in Vuetify.

Summary

Textareas take textual data like text fields, but in larger amounts. Vuetify provides the v-textarea component.

How to Use the Vuetify Text Field Component

Text fields are the most common way of accepting text input in a UI. They can collect user information like emails, addresses, phone numbers, etc. Let’s see how we can use them in Vuetify.

The v-text-field Component

We create text fields in Vuetify with the v-text-field component:

<template>
  <v-app>
    <v-row justify="center" class="ma-2">
      <v-col cols="4"><v-text-field label="Regular"></v-text-field></v-col>
    </v-row>
  </v-app>
</template>

<script>
export default {
  name: 'App',
};
</script>
A regular Vuetify text field.
Regular text field without focus.
Focusing on a regular Vuetify text field.
Focusing on a regular text field.

Vuetify Text Field Placeholders

We can indicate an expected value for the text field with the placeholder prop:

<template>
  <v-app>
    <v-row justify="center" class="ma-2">
      <v-col cols="4"
        ><v-text-field label="Regular" placeholder="Placeholder"></v-text-field
      ></v-col>
    </v-row>
  </v-app>
</template>

<script>
export default {
  name: 'App',
};
</script>
A Vuetify text field with a placeholder.

Customizing Text Field Colors in Vuetify

We can customize the color of text fields by setting the color prop to a color in the Material Design palette:

<template>
  <v-app>
    <v-row justify="center" class="ma-2">
      <v-col cols="4"
        ><v-text-field
          label="Username"
          color="green"
        ></v-text-field
      ></v-col>
    </v-row>
  </v-app>
</template>

<script>
export default {
  name: 'App',
};
</script>
A Vuetify text field with the colour customized.
Customizing the colour of a text field.

Vuetify Text Field Filled Variant

We can use the filled variant of the text field with the filled prop:

<template>
  <v-app>
    <v-row justify="center" class="ma-2">
      <v-col cols="4"
        ><v-text-field label="Filled" filled></v-text-field
      ></v-col>
    </v-row>
  </v-app>
</template>

<script>
export default {
  name: 'App',
};
</script>
Vuetify text field filled variant

Vuetify Text Field Outlined Variant

Setting the outlined prop to true on the text field component will use its outlined variant:

<template>
  <v-app>
    <v-row justify="center" class="ma-2">
      <v-col cols="4"
        ><v-text-field label="Outlined" outlined></v-text-field
      ></v-col>
    </v-row>
  </v-app>
</template>

<script>
export default {
  name: 'App',
};
</script>
Vuetify text field outlined variant.

Vuetify Shaped Text Fields

Text fields with the shaped prop have an increased border radius for the top two corners:

<template>
  <v-app>
    <v-row class="ma-2">
      <v-col cols="6"
        ><v-text-field label="First Name" filled shaped></v-text-field
      ></v-col>
      <v-col cols="6"
        ><v-text-field label="Last Name" outlined shaped></v-text-field
      ></v-col>
    </v-row>
  </v-app>
</template>

<script>
export default {
  name: 'App',
};
</script>
Vuetify shaped text fields.

Disabling Text Fields in Vuetify

We can stop a text field from accepting any input by setting the disabled prop to true.

<template>
  <v-app>
    <v-row class="ma-2">
      <v-col cols="4"
        ><v-text-field label="Address" disabled></v-text-field
      ></v-col>
      <v-col cols="4"
        ><v-text-field label="Address" filled disabled></v-text-field
      ></v-col>
      <v-col cols="4"
        ><v-text-field label="Address" outlined disabled></v-text-field
      ></v-col>
    </v-row>
  </v-app>
</template>

<script>
export default {
  name: 'App',
};
</script>
Disabling text fields in Vuetify

Readonly Text Fields

We can also prevent text field input with the readonly prop:

<template>
  <v-app>
    <v-row class="ma-2" justify="center">
      <v-col cols="4"
        ><v-text-field label="Regular" value="Regular" readonly></v-text-field
      ></v-col>
    </v-row>
  </v-app>
</template>

<script>
export default {
  name: 'App',
};
</script>

Solo Text Fields

We can style text fields with an alternative solo design with the solo prop:


<template>
  <v-app>
    <v-row class="ma-2" justify="center">
      <v-col cols="4"
        ><v-text-field
          label="Solo"
          solo
        ></v-text-field
      ></v-col>
    </v-row>
  </v-app>
</template>

<script>
export default {
  name: 'App',
};
</script>
Vuetify solo text fields
Solo text field without focus.
Focusing on a Vuetify solo text fields.
Focusing on a solo text field.

Single-line Text Fields

To prevent text field labels from floating when focused, we can use the single-line prop:

<template>
  <v-app>
    <v-row class="ma-2" justify="center">
      <v-col cols="4"
        ><v-text-field label="Single-line" single-line></v-text-field
      ></v-col>
    </v-row>
  </v-app>
</template>

<script>
export default {
  name: 'App',
};
</script>
A single-line text field without focus.
Focusing on a single-line text field.

Summary

Vuetify provides the v-text-field component for creating text fields, which are useful for getting text input from users.

How to Use the Vuetify Snackbar Component

A snackbar helps to display quick messages. We can use it to notify users of certain events that occur in an app (for example, deleting an item from a list). It might also contain actions related to the information shown that users can take. In this article, we’re going to learn how to create a snackbar using the Vuetify framework.

The Vuetify Snackbar Component

We can create a snackbar in Vuetify using the v-snackbar component. In the code below, we create a “Close” button in the action slot of the snackbar. When this button is clicked, the snackbar variable is set to false to hide the snackbar.

<template>
  <v-app>
    <div class="text-center ma-2">
      <v-btn @click="snackbar = true"> Open Snackbar </v-btn>
      <v-snackbar v-model="snackbar">
        {{ text }}

        <template v-slot:action="{ attrs }">
          <v-btn text v-bind="attrs" @click="snackbar = false"> Close </v-btn>
        </template>
      </v-snackbar>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    snackbar: false,
    text: 'You opened the snackbar!',
  }),
};
</script>

snackbar is false by default, so at first we can only see the button that opens the snackbar:

The snackbar is currently hidden.

Clicking on the button sets snackbar to true, which displays the snackbar component:

Clicking the button displays the snackbar.

Multi line Snackbars in Vuetify

With the multi-line prop, we can increase the height of the v-snackbar component to make some room for more content.

<template>
  <v-app>
    <div class="text-center ma-2">
      <v-btn dark color="blue" @click="snackbar = true"> Open Snackbar </v-btn>

      <v-snackbar v-model="snackbar" multi-line>
        {{ text }}

        <template v-slot:action="{ attrs }">
          <v-btn color="red" text v-bind="attrs" @click="snackbar = false">
            Close
          </v-btn>
        </template>
      </v-snackbar>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    snackbar: false,
    text: 'This is a multiline snackbar',
  }),
};
</script>

Snackbar Timeouts in Vuetify

The timeout prop allows us to customize the delay before the snackbar is hidden:

<template>
  <v-app>
    <div class="text-center ma-2">
      <v-btn dark color="indigo darken-2 ma-4" @click="snackbar = true">
        Open Snackbar
      </v-btn>

      <v-snackbar v-model="snackbar">
        {{ text }}

        <template v-slot:action="{ attrs }">
          <v-btn color="blue" text v-bind="attrs" @click="snackbar = false">
            Close
          </v-btn>
        </template>
      </v-snackbar>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    snackbar: false,

    text: 'This snackbar has a timeout of 3000.',
  }),
};
</script>

Vuetify Snackbar Shaped Variant

We can create the shaped snackbar variant with the shaped prop:

<template>
  <v-app>
    <div class="text-center ma-2">
      <v-btn dark color="indigo darken-2 ma-4" @click="snackbar = true">
        Open Snackbar
      </v-btn>

      <v-snackbar v-model="snackbar" shaped>
        {{ text }}

        <template v-slot:action="{ attrs }">
          <v-btn color="blue" text v-bind="attrs" @click="snackbar = false">
            Close
          </v-btn>
        </template>
      </v-snackbar>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    snackbar: false,
    text: 'Welcome to Coding Beauty!',
  }),
};
</script>
Creating shaped snackbars in Vuetify

Rounded Snackbars in Vuetify

Setting the rounded prop to true on a snackbar will make it rounded:

<template>
  <v-app>
    <div class="text-center ma-2">
      <v-btn dark color="indigo darken-2 ma-4" @click="snackbar = true">
        Open Snackbar
      </v-btn>

      <v-snackbar v-model="snackbar" rounded="pill">
        {{ text }}

        <template v-slot:action="{ attrs }">
          <v-btn color="green" text v-bind="attrs" @click="snackbar = false">
            Close
          </v-btn>
        </template>
      </v-snackbar>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    snackbar: false,
    text: 'Welcome to Coding Beauty!',
  }),
};
</script>
Creating a rounded snackbar with Vuetify.

Snackbar Elevation in Vuetify

We can increase the degree of elevation on a snackbar with the elevation prop. Here, we’ve set it to 24:

<template>
  <v-app>
    <div class="text-center ma-2">
      <v-btn dark color="indigo darken-2 ma-4" @click="snackbar = true">
        Open Snackbar
      </v-btn>

      <v-snackbar v-model="snackbar" color="blue" elevation="24">
        {{ text }}

        <template v-slot:action="{ attrs }">
          <v-btn dark text v-bind="attrs" @click="snackbar = false">
            Close
          </v-btn>
        </template>
      </v-snackbar>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    snackbar: false,
    text: 'Welcome to Coding Beauty!',
  }),
};
</script>
Customizing snackbar elevation in Vuetify.

Vuetify Snackbar Tile Variant

Setting the tile prop on the snackbar removes the default border radius:

<template>
  <v-app>
    <div class="text-center ma-2">
      <v-btn dark color="ma-4" @click="snackbar = true"> Open Snackbar </v-btn>

      <v-snackbar v-model="snackbar" color="red accent-2" tile>
        {{ text }}

        <template v-slot:action="{ attrs }">
          <v-btn dark text v-bind="attrs" @click="snackbar = false">
            Close
          </v-btn>
        </template>
      </v-snackbar>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    snackbar: false,
    text: 'Welcome to Coding Beauty!',
  }),
};
</script>
Creating a tile snackbar with Vuetify.

Vuetify Snackbar Text Variant

Vuetify also provides the text prop for using the snackbar’s text variant:

<template>
  <v-app>
    <div class="text-center ma-2">
      <v-btn dark color="ma-4" @click="snackbar = true"> Open Snackbar </v-btn>

      <v-snackbar v-model="snackbar" color="indigo" text>
        {{ text }}
      </v-snackbar>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    snackbar: false,
    text: 'Welcome to Coding Beauty!',
  }),
};
</script>
Creating a snackbar with the text variant with Vuetify.

Vuetify Snackbar Outlined Variant

We can activate the outlined variant on the Vuetify snackbar component with the outlined prop:

<template>
  <v-app>
    <div class="text-center ma-2">
      <v-btn dark color="ma-4" @click="snackbar = true"> Open Snackbar </v-btn>

      <v-snackbar v-model="snackbar" color="primary" outlined>
        {{ text }}
      </v-snackbar>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    snackbar: false,
    text: 'Welcome to Coding Beauty!',
  }),
};
</script>
Use the Vuetify snackbar outlined variant

Summary

Vuetify provides the v-snackbar component for creating snackbars, along with various customization options and variants.

How to Easily Create Beautiful Tabs with Vuetify

Tabs are a great way of organizing your content and adding an additional hierarchy of navigation to your app. We’re going to learn how to create them in Vuetify in this article.

v-tabs and v-tab

A Vuetify tab is created with the v-tab component, wrapped inside a v-tabs component:

<template>
  <v-app>
    <v-tabs>
      <v-tab>Tab 1</v-tab>
      <v-tab>Tab 2</v-tab>
      <v-tab>Tab 3</v-tab>
    </v-tabs>
  </v-app>
</template>

<script>
export default {
  name: 'App',
};
</script>
Creating three tabs with Vuetify tab component.

Aligning Tabs with the Toolbar Title

We can line up v-tabs with the v-toolbar-title component using the align-with-title prop:

<template>
  <v-app>
    <v-card>
      <v-toolbar color="green" dark flat>
        <v-app-bar-nav-icon></v-app-bar-nav-icon>

        <v-toolbar-title>Your Dashboard</v-toolbar-title>

        <v-spacer></v-spacer>

        <v-btn icon>
          <v-icon>mdi-magnify</v-icon>
        </v-btn>

        <v-btn icon>
          <v-icon>mdi-dots-vertical</v-icon>
        </v-btn>

        <template v-slot:extension>
          <v-tabs v-model="tab" align-with-title>
            <v-tabs-slider color="white"></v-tabs-slider>

            <v-tab v-for="item in items" :key="item">
              {{ item }}
            </v-tab>
          </v-tabs>
        </template>
      </v-toolbar>

      <v-tabs-items v-model="tab">
        <v-tab-item v-for="item in items" :key="item">
          <v-card flat>
            <v-card-text v-text="text"></v-card-text>
          </v-card>
        </v-tab-item>
      </v-tabs-items>
    </v-card>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      tab: null,
      items: ['web', 'shopping', 'videos', 'images', 'news'],
      text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
    };
  },
};
</script>
The effects of using the align-with-title prop on the tab.

Without setting the align-with-title prop on the v-tabs component, it would have looked like this:

Creating tabs in Vuetify with the tab component.

The center-active Prop

Setting the center-active prop to true on the v-tabs component will make the active tab always centred. For example:

<template>
  <v-app>
    <v-card>
      <v-tabs background-color="primary" center-active dark>
        <v-tab>One</v-tab>
        <v-tab>Two</v-tab>
        <v-tab>Three</v-tab>
        <v-tab>Four</v-tab>
        <v-tab>Five</v-tab>
        <v-tab>Six</v-tab>
        <v-tab>Seven</v-tab>
        <v-tab>Eight</v-tab>
        <v-tab>Nine</v-tab>
        <v-tab>Ten</v-tab>
        <v-tab>Eleven</v-tab>
        <v-tab>Twelve</v-tab>
        <v-tab>Thirteen</v-tab>
        <v-tab>Fourteen</v-tab>
        <v-tab>Fifteen</v-tab>
        <v-tab>Sixteen</v-tab>
        <v-tab>Seventeen</v-tab>
        <v-tab>Eighteen</v-tab>
        <v-tab>Nineteen</v-tab>
        <v-tab>Twenty</v-tab>
      </v-tabs>
    </v-card>
  </v-app>
</template>

<script>
export default {
  name: 'App',
};
</script>
A group of tabs created with v-tabs with the center-active prop set to true.

Clicking on another tab will make it active and centre it:

The center-active prop makes the active tab to always be centred.

Custom Tab Icons

With the next-icon and prev-icon props, we can customize the icon used to navigate through all the tab titles.

<template>
  <v-app>
    <v-sheet elevation="6">
      <v-tabs
        background-color="red"
        dark
        next-icon="mdi-arrow-right-bold-box-outline"
        prev-icon="mdi-arrow-left-bold-box-outline"
        show-arrows
      >
        <v-tabs-slider color="orange"></v-tabs-slider>
        <v-tab v-for="i in 20" :key="i" :href="'#tab-' + i">
          Item {{ i }}
        </v-tab>
      </v-tabs>
    </v-sheet>
  </v-app>
</template>
...
Customizing tab icons

Fixed Tabs

With the fixed-tabs prop, we can make the v-tab components to fill up all the available space until they get to their maximum width (300px):

<template>
  <v-app>

    <v-tabs fixed-tabs dark>
      <v-tab> City </v-tab>
      <v-tab> Nature </v-tab>
      <v-tab> Art </v-tab>
      <v-tab> Sky </v-tab>
    </v-tabs>

  </v-app>
</template>
...

The grow Prop

Setting the grow prop to true on a v-tabs component does the same thing as setting the fixed-tabs prop. It makes the tabs take up all the available space up to the maximum width of 300px:

<template>
  <v-app>
    <v-tabs grow dark>
      <v-tab> City </v-tab>
      <v-tab> Nature </v-tab>
      <v-tab> Art </v-tab>
      <v-tab> Sky </v-tab>
    </v-tabs>
  </v-app>
</template>
...

Using Icons in Tab Titles

We can customize the Vuetify tab components to allow icons to be used in their titles with the icons-with-text prop. Setting this prop to true will increase the height of the v-tabs component to 72px to allow for both icons and text to be used.

Summary

Vuetify allows us to create and customize tabs with the v-tabs and v-tab component. We can customize certain properties of these tabs, such as styling their color and width.

How to Handle Hover Events With Vuetify

While we could use the CSS :hover pseudo-class to customize element styles on mouse hover, Vuetify provides a neat way of doing this, with the v-hover component. Let’s see how we can use it in this article.

Vuetify hover component (v-hover)

<template>
  <v-app>
    <div class="d-flex justify-center">
      <v-hover v-slot="{ hover }">
        <v-card
          class="ma-4 pa-4"
          width="200"
          height="200"
          :elevation="hover ? 12 : 2"
        >
          Hover over me!
        </v-card>
      </v-hover>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
};
</script>

The v-hover default slot provides a hover prop, whose value changes depending on the current hover state of the child of the hover component; when the mouse has not hovered over it, hover remains false. For our case, that will set the elevation of the card to 2:

Using the Vuetify hover component.

And when we hover over it, hover becomes true and the card elevation becomes 12:

Vuetify hover open delay

We can delay the hover prop change from false to true with the open-delay prop. In the code below, we use open-delay to set a delay of 200ms for the hover prop to become true from mouse hover:

<template>
  <v-app>
    <div class="d-flex justify-center">
      <v-hover v-slot="{ hover }" open-delay="200">
        <v-card
          :elevation="hover ? 16 : 2"
          :class="{ 'on-hover': hover }"
          class="ma-4"
          height="100"
          max-width="250"
        >
          <v-card-text> Open Delay (Mouse enter) </v-card-text>
        </v-card>
      </v-hover>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
};
</script>
Setting a hover open delay on the card.

Vuetify hover close delay

Similarly, we can delay the hover prop from true to false after the mouse leaves it, with the close-delay prop. So after the mouse leaves the card, it would take 200ms for its elevation to be reduced:

<template>
  <v-app>
    <div class="d-flex justify-center">
      <v-hover v-slot="{ hover }" close-delay="200">
        <v-card
          :elevation="hover ? 16 : 2"
          :class="{ 'on-hover': hover }"
          class="ma-4"
          height="100"
          max-width="250"
        >
          <v-card-text> Close Delay (Mouse leave) </v-card-text>
        </v-card>
      </v-hover>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
};
</script>
Setting a hover close delay on the card.

Disable hover

We can disable the hover functionality with the disabled prop:

<template>
  <v-app>
    <div class="d-flex justify-center ma-4">
      <v-hover v-slot="{ hover }" disabled>
        <v-card
          :elevation="hover ? 12 : 2"
          height="100"
          max-width="250"
        >
          <v-card-text class="my-4 text-center text-h6">
            Hover disabled
          </v-card-text>
        </v-card>
      </v-hover>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
};
</script>

Nothing will happen when you hover over the card:

Disabling hover state.

Vuetify hover list

We can combine v-hover and v-for to make a single item stand out when the user interacts with the list:

<template>
  <v-app>
    <v-container>
      <v-row class="fill-height" align="center" justify="center">
        <v-col v-for="(letter, index) in letters" :key="index">
          <v-hover v-slot="{ hover }">
            <v-card
              height="200"
              :elevation="hover ? 12 : 2"
              :class="{ 'on-hover': hover }"
            >
              <div
                class="text-h1 d-flex justify-center align-center fill-height"
              >
                {{ letter }}
              </div>
            </v-card>
          </v-hover>
        </v-col>
      </v-row>
    </v-container>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      letters: ['A', 'B', 'C'],
    };
  },
};
</script>

Now each card stands out when hovered over:

Creating a hover list with Vuetify.

Hover transitions in Vuetify

With the hover component, we can create components that respond in highly customized ways to user interaction. For example:

<template>
  <v-app>
    <div class="d-flex justify-center">
      <v-hover v-slot="{ hover }">
        <v-card class="ma-4 pa-4" width="300">
          <p class="mb-4">Sign up to get started</p>
          <v-expand-transition>
            <div v-if="hover"><v-btn color="primary" dark>Sign up</v-btn></div>
          </v-expand-transition>
        </v-card>
      </v-hover>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
};
</script>

When you hover over the card, the extra portion containing the “Sign Up” button slides out (thanks to the v-expand-transition component):

Creating hover transitions with Vuetify.

Conclusion

Vuetify provides the v-hover component for handling toggling component styles based on their current hover state. It provides customization options, such as creating hover event delays and displaying transitions on hover.

How to Create Dialogs with Vuetify

We can a dialog to interact with users. They convey messages and allow certain actions to be taken on them. Vuetify provides the v-dialog component for creating a dialog. Let’s see how we can use this component in practice.

In the code below, we’ve created a dialog and a button of color red:

<template>
  <v-app>
    <div class="text-center">
      <v-dialog v-model="dialog" width="500">
        <template v-slot:activator="{ on, attrs }">
          <v-btn v-bind="attrs" v-on="on" class="mt-2" color="red" dark>
            Delete
          </v-btn>
        </template>

        <v-card>
          <v-card-title class="text-h5"> Delete file? </v-card-title>

          <v-card-text> Do you really want to delete this file? </v-card-text>

          <v-card-actions>
            <v-spacer></v-spacer>
            <v-btn text @click="dialog = false"> Cancel </v-btn>
            <v-btn color="red" text @click="dialog = false"> Delete </v-btn>
          </v-card-actions>
        </v-card>
      </v-dialog>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    dialog: false,
  }),
};
</script>

We’ve placed the button in the activator slot of the v-dialog component. This slot provides some props – on and attrs, which we used to set the props and the event handlers of the button. We use a card to create the body of the dialog.

Creating a dialog in Vuetify.

The dialog shows up when the button is clicked:

The dialog opens when the button is clicked.

Using the “hide-overlay” Prop

The dialog opens with an overlay, as we can see in the image above. We can hide this overlay, by setting the hide-overlay prop to true:

<template>
  <v-app>
    <div class="text-center">
      <v-dialog v-model="dialog" width="500" hide-overlay>
        <template v-slot:activator="{ on, attrs }">
          <v-btn v-bind="attrs" v-on="on" class="mt-2" color="red" dark>
            Delete
          </v-btn>
        </template>

        <v-card>
          <v-card-title class="text-h5"> Delete file? </v-card-title>

          <v-card-text> Do you really want to delete this file? </v-card-text>

          <v-card-actions>
            <v-spacer></v-spacer>
            <v-btn text @click="dialog = false"> Cancel </v-btn>
            <v-btn color="red" text @click="dialog = false"> Delete </v-btn>
          </v-card-actions>
        </v-card>
      </v-dialog>
    </div>
  </v-app>
</template>

It would look like this:

Setting the "hide-overlay" prop to true on v-dialog removes the dialog overlay.

Creating Fullscreen Dialogs

We can make the dialog cover up the entire viewport of the page, by setting the fullscreen prop to true:

<template>
  <v-app>
    <div class="text-center">
      <v-dialog v-model="dialog" width="500" fullscreen>
        <template v-slot:activator="{ on, attrs }">
          <v-btn v-bind="attrs" v-on="on" class="mt-2" color="red" dark>
            Delete
          </v-btn>
        </template>

        <v-card>
          <v-card-title class="text-h5"> Delete file? </v-card-title>

          <v-card-text> Do you really want to delete this file? </v-card-text>

          <v-card-actions>
            <v-spacer></v-spacer>
            <v-btn text @click="dialog = false"> Cancel </v-btn>
            <v-btn color="red" text @click="dialog = false"> Delete </v-btn>
          </v-card-actions>
        </v-card>
      </v-dialog>
    </div>
  </v-app>
</template>
...
Setting the "fullscreen" prop on "v-dialog" makes the dialog fullscreen.

Using Custom Dialog Transitions

We can customize the transition that a dialog uses to appear on the screen using the transition prop. In the code below, we’ve set it to dialog-bottom-transition, which will make the dialog slide in from the bottom when opened:

<template>
  <v-app>
    <div class="text-center">
      <v-dialog
        v-model="dialog"
        width="500"
        transition="dialog-bottom-transition"
      >
        <template v-slot:activator="{ on, attrs }">
          <v-btn v-bind="attrs" v-on="on" class="mt-2" color="red" dark>
            Delete
          </v-btn>
        </template>

        <v-card>
          <v-card-title class="text-h5"> Delete file? </v-card-title>

          <v-card-text> Do you really want to delete this file? </v-card-text>

          <v-card-actions>
            <v-spacer></v-spacer>
            <v-btn text @click="dialog = false"> Cancel </v-btn>
            <v-btn color="red" text @click="dialog = false"> Delete </v-btn>
          </v-card-actions>
        </v-card>
      </v-dialog>
    </div>
  </v-app>
</template>
...

If we wanted to make it slide in from the top, we could have set the same prop to dialog-top-transition:



<template>
  <v-app>
    <div class="text-center">
      <v-dialog
        v-model="dialog"
        width="500"
        transition="dialog-bottom-transition"
      >
        <template v-slot:activator="{ on, attrs }">
          <v-btn v-bind="attrs" v-on="on" class="mt-2" color="red" dark>
            Delete
          </v-btn>
        </template>

        <v-card>
          <v-card-title class="text-h5"> Delete file? </v-card-title>

          <v-card-text> Do you really want to delete this file? </v-card-text>

          <v-card-actions>
            <v-spacer></v-spacer>
            <v-btn text @click="dialog = false"> Cancel </v-btn>
            <v-btn color="red" text @click="dialog = false"> Delete </v-btn>
          </v-card-actions>
        </v-card>
      </v-dialog>
    </div>
  </v-app>
</template>
...

How to Make Dialogs Persistent

By default, Vuetify dialogs can be dismissed by clicking or tapping somewhere outside of it. If we don’t want this to be the case, we can set the persistent prop to true:



<template>
  <v-app>
    <div class="text-center">
      <v-dialog
        v-model="dialog"
        width="500"
        persistent
      >
        <template v-slot:activator="{ on, attrs }">
          <v-btn v-bind="attrs" v-on="on" class="mt-2" color="red" dark>
            Delete
          </v-btn>
        </template>

        <v-card>
          <v-card-title class="text-h5"> Delete file? </v-card-title>

          <v-card-text> Do you really want to delete this file? </v-card-text>

          <v-card-actions>
            <v-spacer></v-spacer>
            <v-btn text @click="dialog = false"> Cancel </v-btn>
            <v-btn color="red" text @click="dialog = false"> Delete </v-btn>
          </v-card-actions>
        </v-card>
      </v-dialog>
    </div>
  </v-app>
</template>
...

Summary

Vuetify provides the v-dialog component for creating dialogs in a user interface. We can change certain properties of these dialogs, such as making them fullscreen or changing the transition they used to appear on the screen.