20+ Useful Vuetify Components 2022

vuetify components

Want to know what Vuetify components offer that you can use in your next Vuetify projects? Then this collection of Vuetify components is for you. Before we start the collection, let’s get to know what is Vuetify and what advantages it offers.

What is Vuetify?

VuetifyJS is a complete UI framework built on top of Vue.js. The project aims to provide developers with the tools they need to build rich and engaging user experiences. Besides, Vuetify is designed from the ground up to be easy to learn and rewarding to master with hundreds of carefully crafted components from the Material Design specification.

Furthermore, it is designed based on a mobile-first approach to design, which means your application just works out of the box, whether on a phone, tablet, or desktop computer.

Besides, Vuetify has a very active development cycle and is patched weekly, responding to community issues and reports at breakneck speed, allowing you to get your hands on bug fixes and enhancements more often. In addition, every major release is accompanied by 18 months of Long-term support for the previous minor version.

Advantages of Vuetify:

Following are some of the advantages of Vuetify:

  • New age components
  • Easy integration
  • Responsiveness
  • Internalization
  • Awesome documentation

Before you move forward, have a look at some awesome collections: Best 20+ Vuetify examples, Vuetify admin template Github.

You can check Materio – Vuetify Vuejs Admin Template for example. It is the latest most developer-friendly 🤘🏻 & highly customizable✨ Admin Dashboard Template based on Vuetify. Besides, the highest industry standards are considered to bring you one of the best Vuetify admin templates that are not just fast 🚀 and easy to use, but highly scalable

Materio also offers invaluable features that aim to help you create premium quality single-page apps exactly as you imagine them🤘🏻. Furthermore, it comes with unique and useful tools such as fuzzy search, Dark, Semi-Dark & Bordered layout options, Advanced cards, and Charts. In addition, it offers amazing features as follows.

Features:

  • Pure Vue js, No Jquery Dependency
  • Created with Vue CLI
  • Utilizes Vuex, Vue Router, Webpack
  • Code Splitting, Lazy loading
  • JWT Authentication
  • Access Control (ACL)
  • i18n Page
  • Multi-lingual Support
  • 2 chart libraries
  • 3 Dashboard
  • SASS Powered and many more.

Also available in Laravel version:

vuejs laravel admin template

Now let’s start the collection.

UI Components

Alerts

The v-alert component is used to convey important information to the user through the use of contextual types icons and color.  Besides, these default types come in 4 variations: success, info, warning, and error. Furthermore, Default icons are assigned which help represent different actions each type portrays. In addition, many parts of an alert such as bordericon, and color can also be customized to fit almost any situation.

Props:

  • Border
  • Colored border
  • Dense
  • Dismissible
  • Icon
  • Outlined
  • Prominent
  • Transition
  • Type
  • Accessibility

API

Application

In Vuetify, the v-app component and the app prop on components like v-navigation-drawerv-app-barv-footer and more, help bootstrap your application with the proper sizing around <v-main> the component. Besides, this allows you to create truly unique interfaces without the hassle of managing your layout sizing. Furthermore, the v-app component is required for all applications. In addition, This is the mount point for many of Vuetify’s components and functionality and ensures that it propagates the default application variant (dark/light) to children components and also ensures proper cross-browser support for certain click events in browsers like Safari. v-app should only be rendered within your application once.

API:

Avatar

The v-avatar component is typically used to display circular user profile pictures. Besides, this component will allow you to dynamically size and add a border radius of responsive images, icons, and text. Furthermore, A tile variation is available for displaying an avatar without a border-radius.

Props:

  • Tile
  • Size

API:

Badges

The v-badge component superscripts or subscripts an avatar-like icon or text onto content to highlight information to a user or to just draw attention to a specific element. Besides, content within the badge usually contains numbers or icons.

API:

Banner

The v-banner component is used as a middle-interruptive message to the user with 1-2 actions. Besides, it comes in 2 variations single-line and multi-line (implicit). Furthermore, these can have icons that you can use with your message and actions.

Props:

  • App
  • Color
  • Dark
  • Elevation
  • Height
  • Icon
  • Icon Color
  • Light and many more

API:

Form inputs and controls

Autocomplete

The v-autocomplete component offers simple and flexible type-ahead functionality. Furthermore, this is also useful when searching large sets of data or even dynamically requesting information from an API.

Usage:

The autocomplete component extends v-select and adds the ability to filter items.

Props:

  • Dense
  • Filters

Slots:

  • Item and selection

API:

Checkboxes

The v-checkbox component provides users the ability to choose between two distinct values. Besides, These are very similar to a switch and can be helpful in complex forms and checklists. Furthermore, A simpler version, v-simple-checkbox is used primarily as a lightweight alternative in data-table components to select rows or display inline boolean data.

Usage:

v-checkbox in its simplest form provides a toggle between 2 values.

Props:

  • Color
  • Model as array
  • Model as boolean
  • States

Slot:

  • Label slot

API:

file inputs

The v-file-input component provides a clean interface for selecting files, showing detailed selection information, and upload progress. Besides, it is also a direct replacement for standard file input.

Usage:

At its core, the v-file-input component is a basic container that extends v-text-field.

Props:

  • Accept
  • Chips
  • Counter
  • Dense
  • Multiple
  • Prepend Icons
  • Show size
  • Validation

API:

fORMS

When it comes to form validation, Vuetify has a multitude of integrations and baked-in functionality.

Usage:

The internal v-form component makes it easy to add validation to form inputs. Besides, all input components have a rules prop that accepts a mixed array of types functionboolean and string. Furthermore, these allow you to specify conditions in which the input is valid or invalid. Moreover, the value of an input is changed, each function in the array will receive the new value and each array element will be evaluated. In addition, if a function or array element returns false or a string, validation has failed and the string value will be presented as an error message.

Props:

  • Rules

API:

Inputs

The v-input component gives you a baseline to create your own custom inputs. Besides. it also consists of a prepend/append slot, messages, and a default slot. Furthermore, it is recommended that you extend this component, but it can be used as a standalone.

Usage:

v-input has 4 main areas. The prepended slot, the appended slot, the default slot, and messages. These make up the core logic shared between all form components.

Props:

  • Errors
  • Hide details
  • Hints
  • Loading
  • Rule
  • Events etc.

API:

Groups

Button Groups

The v-btn-togglecomponent is a simple wrapper for v-item-group built specifically to work with v-btn.

Usage:

Toggle buttons allow you to create a styled group of buttons that can be selected or toggled under a single v-model.

Props:

  • Mandatory
  • Multiple
  • Rounded

API:

Chip Groups

The v-chip-group supercharges the v-chip component by providing groupable functionality.  Furthermore, It is also helpful for creating groups of selections using chips.

Usage:

Chip groups make it easy for users to select filtering options for more complex implementations. Besides, by default v-chip-group will overflow to the right but can be changed to a column-only mode.

Props:

  • Column
  • Filter result
  • Mandatory
  • Multiple

API:

Item Groups

The v-item-group provides the ability to create a group of selectable items out of any component. Besides, this is the baseline functionality for components such as v-tabs and v-carousel.

Usage:

The core usage of the v-item-group is to create groups of anything that should be controlled by a model.

Props:

  • Active class
  • Mandatory
  • Multiple

API:

Slide Groups

The v-slide-group component is useful to display pseudo paginated information. Besides, it uses a v-item-group at its core and provides a baseline for components such as v-tabs and v-chip-group.

Usage:

Similar to the v-window component, v-slide-group lets items take up as much space as needed, allowing the user to move horizontally through the provided information.

Props:

  • Active class
  • Centre Active
  • Custom Icons
  • Mandatory
  • Multiple

API:

Bars

App Bars

The v-app-bar component is pivotal to any graphical user interface (GUI), as it generally is the primary source of site navigation. Besides, the app-bar component works great in conjunction with a v-navigation-drawer for providing site navigation in your application.

Usage:

The v-app-bar component is used for application-wide actions and information.

Props:

  • Collapsible bars
  • Dense
  • Elevate on scroll
  • The fade image on scroll
  • Hiding on scroll
  • Images
  • Inverted scrolling

API:

Toolbars

The v-toolbar component is pivotal to any GUI, as it generally is the primary source of site navigation. Besides, the toolbar component works great in conjunction with v-navigation-drawer and v-card.

Usage:

A toolbar is a flexible container that can be used in a number of ways. Besides, by default, the toolbar is 64px high on desktop and 56px high on mobile. Furthermore, there are a number of helper components available to use with the toolbar. In addition, The v-toolbar-title is used for displaying a title and v-toolbar-items allow v-btn to extend the full height.

Props:

  • Background
  • Collapse
  • Dense toolbars
  • Extended
  • Extension height
  • Prominent toolbars

API:

System Bars

You can use the v-system-bar component for displaying statuses to the user. Besides, It also looks like the Android system bar and can contain icons, spacers, and some text.

Usage:

v-system-bar in its simplest form displays a small container with the default theme.

Props:

  • Colors
  • Lightsout
  • Themes
  • Window

API:

Pickers

Color Pickers

The v-color-picker allows you to select a color using a variety of input methods.

Props:

  • Canvas
  • Elevation
  • Inputs
  • Model
  • Swatches

API:

Date Pickers

v-date-picker is a fully-featured date selection component that lets users select a date or range of dates.

Usage:

Date pickers come in two orientation variations, portrait (default) and landscape. Besides, by default, they are emitting input events when the day (for date picker) or month (for month picker), but with the reactive prop, they can update the model even after clicking year/month.

Props:

  • Allowed dates
  • Colors
  • Elevation
  • Icons
  • Multiple
  • Picker date
  • Range etc.

API:

Time Pickers

The v-time-picker is a stand-alone component that can be utilized in many existing Vuetify components. Besides, It also offers the user a visual representation for selecting the time.

Usage:

Time pickers have the light theme enabled by default.

Props:

  • Allowed times
  • AM/PM in title
  • Colors
  • Disabled
  • Elevation
  • Format
  • No Title etc.

API:

Bottom Navigation

The v-bottom-navigation component is an alternative to the sidebar. Besides, It is also primarily helpful for mobile applications and comes in three variants, icons, and text, and shift.

Usage:

While v-bottom navigation is meant to be used with Vue-router, you can also programmatically control the active state of the buttons by using the value property. A button is given a default value of its index with v-bottom-navigation.

Props:

  • Color
  • Grow
  • Hide on scroll
  • Horizontal
  • Scroll Threshold
  • Shift
  • Toggle

API:

Bottom sheet

The bottom sheet is a modified v-dialog that slides from the bottom of the screen, similar to a v-bottom-navigation. Besides, a bottom navigation component is for buttons and specific application-level actions, a bottom sheet can contain anything.

Props:

  • Inset
  • Model
  • Persistent

API:

Breadcrumbs

The v-breadcrumbs component is a navigational helper for pages. Besides, It can also accept a Material Icons icon or text characters as a divider. In addition, An array of objects can be passed to the items property of the component. furthermore, slots exist for more control of the breadcrumbs, either utilizing v-breadcrumbs-item or other custom markups.

Usage:

By default, breadcrumbs use a text divider. This can be any string.

Props:

  • Divider
  • Large

Slot:

  • Icon dividers
  • Item

API:

Buttons

The v-btn component replaces the standard HTML button with a material design theme and a multitude of options. Besides, any color helper class can be used to alter the background or text color.

Usage:

Buttons in their simplest form contain uppercase text, a slight elevation, hover effect, and a ripple effect on click.

Props:

  • Block
  • Depressed
  • Floating
  • Icon
  • Loader
  • Outlined
  • Plain
  • Rounded
  • Sizing
  • Text
  • Tile

API:

Calendars

The v-calendar component is used to display information in a daily, weekly, monthly, or category view. Besides, the daily view has slots for all-day or timed elements, and the weekly and monthly view has a slot for each day. In addition, the category view has a slot for each category in the day and timed sections based on the categories given or the categories in the given events. Furthermore, you can also pass in an array of events and they will be rendered over the appropriate days and times.

Usage

A calendar has a type and a value that determines what type of calendar is shown over what span of time. Furthermore, this shows the bare minimum configuration, an array of events with name, start, and end properties. Also, the end is optional, it defaults to the start. Besides, if the start has a time it’s considered a timed event and will be shown accordingly in the day views. In addition, an event can span multiple days and will be rendered accordingly.

Props:

  • Type category
  • And Type day
  • Type week

API:

Cards

The v-card component is a versatile component that can be used for anything from a panel to a static image. Besides, the card component has numerous helper components to make markup as easy as possible. In addition, components that have no listed options use Vue’s functional component option for faster rendering and serve as markup sugar to make building easier.

Usage:

A card has 4 basic components, v-card-titlev-card-subtitlev-card-text and v-card-actions.

Props:

  • Loading
  • Outlined

API:

Grid system

Vuetify comes with a 12 point grid system built using flexbox. The grid is used to create specific layouts within an application’s content. It contains 5 types of media breakpoints that are used for targeting specific screen sizes or orientations, xs, sm, md, lg, and xl. Furthermore, these resolutions are defined below in the Viewport Breakpoints table and can be modified by customizing the Breakpoint service.

Usage:

The Vuetify grid is heavily inspired by the Bootstrap grid. Besides, It is integrated by using a series of containers, rows, and columns to layout and align content.

Props:

  • Align
  • Breakpoint sizing
  • Justify
  • No gutters
  • Offset
  • Offset breakpoint
  • Order

API:

Navigation drawers

The v-navigation-drawer component is what your users will utilize to navigate through the application. Besides, the navigation drawer is pre-configured to work with or without Vue-router right out the box. Furthermore, for the purpose of display, some examples are wrapped in an v-card element. In addition, within your application, you will generally place the v-navigation-drawer as a direct child of v-app.

Usage:

The navigation drawer is one of the useful vuetify components to house links to the pages in your application. Besides, using null as the starting value for its v-model will initialize the drawer as closed on mobile and as open on the desktop. FurthermoreIt is common to pair drawers with the v-list component using the nav property.

Props:

  • Bottom Drawer
  • Expand on hover
  • Images
  • Mini Variant
  • Permanent and floating
  • Right
  • Temporary

API:

3rd Party Components:

i18n

Vue I18n is an internationalization plugin for Vue.js.  It easily integrates some localization features into your Vue.js application. Besides, it is component-oriented, thus you can manage locale messages on a single file component.

veevalidate

Vee-validate is a form validation library for Vue.js that allows you to validate inputs and build better form UIs in a familiar declarative style or using composition functions.

Features:

  • Easy
  • Flexible
  • Fast
  • Minimal
  • UI Agnostic
  • Progressive
  • Built-in Rule
  • i18n
Vuelidate

Vuelidate is a simple, lightweight model-based validation for Vue.js 2.0.

Features:

  • Model base
  • Decoupled from templates
  • Dependency free, minimalistic library
  • Support for collection validations
  • Support for nested models
  • Contextified validators
  • Easy to use with custom validators (e.g. Moment.js)
  • Support for function composition
  • Validates different data sources: Vuex getters, computed values, etc.
  • High test coverage

Other Components:

Conclusion:

So, here was the collection of the best Vuetify Components, that you can use in your next Vuetify based project.

Well, the Internet is no longer about simply static web pages and longer loading times. In current times, the Internet has made a shift towards active user engagement as well as extended functionality by means of visually pleasing and powerful web applications.

As everyone is on the web these days, most developers are looking to benefit from web apps and attract as many users as possible via opportune offerings. Here, components come to the rescue. They make an app eye-catchy and visually appealing.

Before venturing into a web application development project, it is important to choose the type of web application architecture as well as the model of web app components. Making the right picks are important for the success of a web app.

We hope this collection helps you to choose the right components. Also, don’t forget to share this collection.

Related Posts

Register to ThemeSelection 🚀
faceface
emailemail
visibilityvisibility

By Signin or Signup to ThemeSelection.com using social accounts or login/register form, You are agreeing to our Terms & Conditions and Privacy Policy

Already have account?
Reset Your Password
Enter your username/email address, we will send you reset password link on it. 🔓

Looking for more Freebies  ! 

Get notified 💌 about upcoming Free Admin Themes, UI-Kits, 
Unique promo codes  and Sales ! 🥳
SUBSCRIBE NOW
We promise not to spam you. You can unsubscribe at any time.
10% Off 🥳  when you use promo code 10PERCENTOFF and complete your order today!
close-image
Privacy Preferences
When you visit our website, it may store information through your browser from specific services, usually in form of cookies. Here you can change your privacy preferences. Please note that blocking some types of cookies may impact your experience on our website and the services we offer.