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.
|
1 2 3 4 |
npm install --global vue-cli vue init webpack vuetify-tutorial cd vuetify-tutorial npm run dev |
#2: Install Vuetify
To install Vuetify in your existing project or newly created project then run the following command.
|
1 |
npm install 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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App' import router from './router' //import and use vuetify import Vuetify from 'vuetify' Vue.use(Vuetify); //import CSS of Vuetify import 'vuetify/dist/vuetify.min.css'; Vue.config.productionTip = false; /* eslint-disable no-new */ new Vue({ el: '#app', router, components: { App }, template: '<App/>' }); |
You can also directly attach Vuetify CDN in your index.html file.
|
1 |
<script src="https://unpkg.com/vuetify/dist/vuetify.js"></script> |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<template> <v-app> <v-toolbar class="deep-purple"> <v-toolbar-title class="text--darken-1">Artixun Softwares</v-toolbar-title> <v-toolbar-items> <v-btn flat dark><router-link :to="{name: 'home' }">Home</router-link></v-btn> </v-toolbar-items> </v-toolbar> <v-content> <router-view/> </v-content> <v-footer class="pa-3 deep-purple"> <v-spacer></v-spacer> <div>© {{ new Date().getFullYear() }}</div> </v-footer> </v-app> </template> |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<template> <v-container fluid> <v-slide-y-transition mode="out-in"> <v-layout column align-center> <img src="@/assets/logo.png" alt="Vuetify.js" class="mb-5"> </v-layout> </v-slide-y-transition> </v-container> </template> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> h1, h2 { font-weight: normal; } ul { list-style-type: none; padding: 0; } li { display: inline-block; margin: 0 10px; } a { color: #42b983; } </style> |
#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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<template> <v-container fluid> <v-alert :value="true" type="success"> This is a success alert. </v-alert> <v-alert :value="true" type="info"> This is a info alert. </v-alert> <v-alert :value="true" type="warning"> This is a warning alert. </v-alert> <v-alert :value="true" type="error"> This is a error alert. </v-alert> </v-container> </template> |
#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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 |
<template> <v-container fluid> <v-data-table :headers="headers" :items="desserts" class="elevation-1" > <template slot="items" slot-scope="props"> <td>{{ props.item.name }}</td> <td class="text-xs-right">{{ props.item.calories }}</td> <td class="text-xs-right">{{ props.item.fat }}</td> <td class="text-xs-right">{{ props.item.carbs }}</td> <td class="text-xs-right">{{ props.item.protein }}</td> <td class="text-xs-right">{{ props.item.iron }}</td> </template> </v-data-table> </v-container> </template> <script> export default { data () { return { headers: [ { text: 'Dessert (100g serving)', align: 'left', sortable: false, value: 'name' }, { text: 'Calories', value: 'calories' }, { text: 'Fat (g)', value: 'fat' }, { text: 'Carbs (g)', value: 'carbs' }, { text: 'Protein (g)', value: 'protein' }, { text: 'Iron (%)', value: 'iron' } ], desserts: [ { value: false, name: 'Frozen Yogurt', calories: 159, fat: 6.0, carbs: 24, protein: 4.0, iron: '1%' }, { value: false, name: 'Ice cream sandwich', calories: 237, fat: 9.0, carbs: 37, protein: 4.3, iron: '1%' }, { value: false, name: 'Eclair', calories: 262, fat: 16.0, carbs: 23, protein: 6.0, iron: '7%' }, { value: false, name: 'Cupcake', calories: 305, fat: 3.7, carbs: 67, protein: 4.3, iron: '8%' }, { value: false, name: 'Gingerbread', calories: 356, fat: 16.0, carbs: 49, protein: 3.9, iron: '16%' }, { value: false, name: 'Jelly bean', calories: 375, fat: 0.0, carbs: 94, protein: 0.0, iron: '0%' }, { value: false, name: 'Lollipop', calories: 392, fat: 0.2, carbs: 98, protein: 0, iron: '2%' }, { value: false, name: 'Honeycomb', calories: 408, fat: 3.2, carbs: 87, protein: 6.5, iron: '45%' }, { value: false, name: 'Donut', calories: 452, fat: 25.0, carbs: 51, protein: 4.9, iron: '22%' }, { value: false, name: 'KitKat', calories: 518, fat: 26.0, carbs: 65, protein: 7, iron: '6%' } ] } } } </script> <style scoped> a{ color:#1976d2 !important; } </style> |
#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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 |
<template> <v-container fluid> <v-form v-model="valid" lazy-validation> <v-text-field label="Name" v-model="name" :rules="nameRules" :counter="10" required ></v-text-field> <v-text-field label="E-mail" v-model="email" :rules="emailRules" required ></v-text-field> <v-menu v-model="menu1" :close-on-content-click="false" full-width max-width="290" > <v-text-field slot="activator" :value="computedDateFormattedMomentjs" clearable label="Birth Date" readonly ></v-text-field> <v-date-picker v-model="date" @change="menu1 = false" ></v-date-picker> </v-menu> <v-btn class="v-btn--block" color="success">Submit</v-btn> </v-form> </v-container> </template> <script> import moment from 'moment' export default { data: () => ({ valid: true, name: '', nameRules: [ v => !!v || 'Name is required', v => (v && v.length <= 10) || 'Name must be less than 10 characters' ], email: '', emailRules: [ v => !!v || 'E-mail is required', v => /.+@.+/.test(v) || 'E-mail must be valid' ], newDate: '', dateRule: [ v => !!v || 'Date is required' ], select: null, items: [ 'Item 1', 'Item 2', 'Item 3', 'Item 4' ], date: '', menu1: false, menu2: false }), computed: { computedDateFormattedMomentjs() { return this.date ? moment(this.date).format('DD/MM/YYYY') : '' }, } } </script> |
#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.
|
1 |
npm install moment |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<v-menu v-model="menu1" :close-on-content-click="false" full-width max-width="290" > <v-text-field slot="activator" :value="computedDateFormattedMomentjs" clearable label="Birth Date" readonly ></v-text-field> <v-date-picker v-model="date" @change="menu1 = false" ></v-date-picker> </v-menu> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
<script> import moment from 'moment' export default { data: () => ({ valid: true, name: '', nameRules: [ v => !!v || 'Name is required', v => (v && v.length <= 10) || 'Name must be less than 10 characters' ], email: '', emailRules: [ v => !!v || 'E-mail is required', v => /.+@.+/.test(v) || 'E-mail must be valid' ], newDate: '', dateRule: [ v => !!v || 'Date is required' ], select: null, items: [ 'Item 1', 'Item 2', 'Item 3', 'Item 4' ], date: '', menu1: false, menu2: false }), computed: { computedDateFormattedMomentjs() { return this.date ? moment(this.date).format('DD/MM/YYYY') : '' }, } } </script> |
#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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<!--Vue drawer component--> <v-navigation-drawer temporary v-model="drawer" :mini-variant.sync="mini" light absolute > <v-toolbar flat class="transparent"> <v-list class="pa-0"> <v-list-tile avatar> <v-list-tile-avatar> <img src="https://randomuser.me/api/portraits/men/85.jpg" /> </v-list-tile-avatar> <v-list-tile-content> <v-list-tile-title>John Leider</v-list-tile-title> </v-list-tile-content> </v-list-tile> </v-list> </v-toolbar> <v-list class="pt-0" dense> <v-divider></v-divider> <v-list-tile> <v-list-tile-action> <v-icon></v-icon> </v-list-tile-action> </v-list-tile> </v-list> </v-navigation-drawer> |
Add a script for Drawer Component
|
1 2 3 4 5 6 7 8 9 10 |
<script> export default { data() { return { drawer: false, mini: false, } } } </script> |
#4.6: SnackBar Component
SnackBar Component is like a toaster package in Vue.js. It is used to display a prompt message to users.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 |
<template> <v-card> <v-card-text> <v-container fluid> <v-layout row wrap> <v-flex xs12> <v-radio-group v-model="color" row> <v-radio v-for="(colorValue, i) in ['success', 'info', 'error', 'cyan darken-2']" :color="colorValue" :key="i" :label="colorValue" :value="colorValue" ></v-radio> </v-radio-group> </v-flex> <v-flex xs12 sm3> <v-checkbox v-model="mode" label="Multi-line (mobile)" value="multi-line" ></v-checkbox> </v-flex> <v-flex xs12 sm3> <v-checkbox v-model="mode" label="Vertical (mobile)" value="vertical" ></v-checkbox> </v-flex> <v-flex xs12 sm4 offset-sm4> <v-text-field v-model="text" label="Text" type="text" ></v-text-field> </v-flex> <v-flex xs12 sm4> <v-text-field v-model.number="timeout" label="Timeout" type="number" ></v-text-field> </v-flex> </v-layout> </v-container> <v-btn block color="success" dark @click="snackbar = true" > Show Snackbar </v-btn> </v-card-text> <v-snackbar v-model="snackbar" :color="color" :multi-line="mode === 'multi-line'" :timeout="timeout" :vertical="mode === 'vertical'" > {{ text }} <v-btn dark flat @click="snackbar = false" > Close </v-btn> </v-snackbar> </v-card> </template> <script> export default { data () { return { snackbar: false, color: '', mode: '', timeout: 6000, text: 'Hello, I\'m a snackbar' } } } </script> |
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.
