Getting Started With Vuetify Using It’s Examples

Vuetify Tutorial With Example: If you are a novice or intermediate user in Vue.js then you frequently heard about Vuetify Framework. Now, its time to start your developing with Vuetify Framework because you have come at Vue application.

Vue provides the best UI that will make our web design extra powerful and flexible using material design. In this place, you will learn about Vuetify, its usage and some of the best Vuetify Components.

Here, you can see a live demo on Vuetify Components Tutorial

Generally, Most of the users use bootstrap or other CSS frameworks in Vue.js application. Now, its time to take our web functionality to the next level with Vuetify. Let us start with what is vuetify? and why to use it with Vue.

What is Vuetify?

Vuetify is a material component framework consisting of Vue application. It is also a progressive framework. Vuetify renders the best reusable and ready to use components which will help us to make web application much faster. especially for those who are busy in the backend, developing. It also provides excellent UI look to a web application.

Here, we are going to furnish knowledge about Vuetify and its awesome reusable components with an example in step-by-step methods.

Getting Started With Vuetify Using It’s Examples

First, we need to create a new Vue.js project using Vue-cli. If you have already a Vue.js Project then skip this step-1.

#1: Install Vue-cli and Vue project

To install Vue-cli globally and fresh Vue.js project type the following commands one by one.

Installing New Vue.js Project

#2: Install Vuetify

To install Vuetify in your existing project or newly created project then run the following command.

Installing Vuetify

After Installing Vuetify you need to import and use Vuetify in your main.js which is located inside the src folder and also required to import Vuetify CSS. Like this.

You can also directly attach Vuetify CDN in your index.html file.

You have successfully installed Vuetify in your project.

Now, let start to make an excellent looking UI web application with awesome layouts and ready to use components of Vuetify. We have provided a tutorial on some of the best Vuetify Component which is used frequently in any web application.

#3: Define Layout for Web Application

First of all, We are going to create a layout for our web application. It is a skeleton of any web application. It consists of a Header, container, and footer. To create layout write the following code.

In the above code, we have included a v-toolbar component for navigation, v-content element, and v-footer component. The v-content element is the key component in all of this where any router’s content will be placed.

It is a default layout of Vuetify. We have implemented this default layout in our web application. But, you can get lots of pre-defined layout from Vuetify official site.

#4: Vuetify Components

There are lots of ready to use Components is available in Vuetify Framework. In this tutorial, we have used common components which are used repeatedly in any web application. So, you can learn from this tutorial and practice for other awesome Vuetify from its official site.

#4.1: Alert Component

Oftenly we need to display some success messages, failure messages, and any kind of custom messages in any web application. So, Alert is suitable for displaying this kind of messages. Vuetify provides Alert Component for various messages. Write the below code to use Alert Component in your application.

Vuetify Alert Component

#4.2: DataTable Component

DataTable is the most popular component to display records and contents in a tabular format. DataTable is not only displayed contents in a tabular format but it also provides various operation like sorting, searching, and pagination. It is commonly used in any web application. See the below code to create DataTable in Vuetify.

#4.3: Form Component

A form is necessary to process any operation in a web application. It is not possible to submit any user’s data without form. Hence, Vuetify provides Form Component with validation. It gives an attractive look to our web application with a label, input field, text area field, checkbox, radio button, etc.

#4.4: Date Picker Component

Date Picker is used frequently in most of the form. A form which has a date field. Vuetify renders Date Picker Component with attractive design to choose any date from it. To use Vuetify Date Picker Component in Vue.js you need to also install moment js file using npm. write the following code.

Vuetify Datepicker Component

#4.5: Drawer Component

Drawer Component is used for navigation sidebar. It is used to display navigation link on the sidebar in a small device like a tablet or mobile. We have included Vuetify Drawer Component.

Add a script for Drawer Component

#4.6: SnackBar Component

SnackBar Component is like a toaster package in Vue.js. It is used to display a prompt message to users.

Ultimately, This

Awesome Vuetify Components Tutorial

is finished. But, there are lots of Components is available on the Vuetify official website like this.

Here, we have introduced only those components which are used repeatedly in any web application to show you how Vuetify is awesome. You can use other Vuetify Components in your application as per your requirement.

We hope you liked this tutorial. This tutorial will help you to build an application with a great user interface. Thank you.



About the author

Parth Vakil

Full Stack Developer at Artixun Softwares. My specialty is web development with Laravel/Node development, using JS libraries such as JQuery, Angular, Vue, React and Ionic

Leave a Comment