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. While working with Vuetify projects, it is advised to use the Vuetify Admin Templates. If you are unfamiliar with the admin templates, Admin dashboard templates are a collection of web pages created with HTML, CSS, and JavaScript or any JavaScript libraries used to construct the backend user interface of an online application. You can use them to build any kind of web app.
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.
Well, in case you are in search of project examples then you can check the 20+ Vuetify examples for inspiration.
Advantages of Vuetify:
Following are some of the advantages of Vuetify:
- New age components
- Easy integration
- Responsiveness
- Internalization
- Awesome documentation
You can check Materio – Free 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 the best Vuetify admin template Github.
Furthermore, this free admin template 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, this Vuetify-based VueJS admin Template offers amazing features as follows.
Features:
- Pure VueJS, No jQuery Dependency
- 1 Dashboard
- Material Icons
- Basic cards
- Fully Responsive Layout
- Organized Folder Structure and many more
Check Pro Version for premium features:
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 colors. 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 border, icon, 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-drawer, v-app-bar, v-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. Also, it 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:
A 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 uploading progress. Besides, it is also a direct replacement for standard file input.
Usage:
At its core, the v-file-input Vuetify component is a basic container that extends the v-text-field.
Props:
- Accept
- Chips
- Counter
- Dense
- Multiple
- Prepend Icons
- Show size
- Validation
API:
fORMS
When it comes to the 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 function, boolean 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:
If you are working on any bootstrap project then do check the Free bootstrap admin templates.
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 faded image on the 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 the 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, 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, a 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 also 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 Vuetify 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-title, v-card-subtitle, v-card-text and v-card-actions.
Props:
- Loading
- Outlined
API:
Grid system
Vuetify comes with a 12-point grid system built using flexbox. Besides, the grid is used to create specific layouts within an application’s content. In addition, it also 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 Vuetify 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 of 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. Furthermore, It is also 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 also 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:
- Timelines
- Icons
- Images
- Tooltips
- Treeview
- Progress Circular
- Progress Linear
- Data iterators
- Simple tables
- Data tables
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. Besides, In current times, the Internet has also 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. Besides, they make an app attractive and visually appealing. For best results, we recommend using Vue Admin, which is based on Vuetify like Materio. This Admin dashboard comes with pre-made & ready to use Vuetify components.
Now, before starting 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. Thus, making the right picks are important for the success of a web app.
Apart from this, we also suggest using UI kits while working on any web apps as UI kits are very helpful to create appealing web apps. You can use the free UI kits as well.
We hope this collection helps you to choose the right components. Also, don’t forget to share this collection.
