tutorial

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>

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>

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>

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>

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

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>

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 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>

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.

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.

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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.

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>

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

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 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 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>

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>

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>

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.

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>

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 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 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 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 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>

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>

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>

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>

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>

Summary

Textareas take textual data like text fields, but in larger amounts. Vuetify provides the v-textarea 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>

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>

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>

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 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 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>

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>

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>

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>

Summary

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

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:

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

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>

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>

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>

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>

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>

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>

Summary

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

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>

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>

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

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>

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

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>
...

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.

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:

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>

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>

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:

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:

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):

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.

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.

The dialog shows up 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:

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>
...

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.