How to Use Vuetify and Learn its components

Image source


This tutorial I will discuss about Vuetify. what is Vuetify? may sound unfamiliar to those of you who have not known vue.js. according to my interpretation Vuetify is a frontend framework consisting of vue.js, semantic and material design. Vuetify makes it easier for you to build the Web. especially if you work fullstack busy with backend. you will be very helpful in the frontend if you use Vuetify. For UI will look powerful and flexible because of using Design material. just take a look at how to use it in Vue.js and how cool the look of the website by using Vuetify

What Will I Learn?

• Install and Use Vuetify in Vuejs
• Layout Vuetify
• Components Vuetify

Requirements

Write here a bullet list of the requirements for the user in order to follow this tutorial.

• Install Vue-Cli and Install Nodejs
• Intermediate Css and Html
• Basic Javascript Es6

Difficulty

• Intermediate

Install and Use Vuetify in Vuejs

The first step we will do is install vuetify.js in vue js. we can use CDN or install it directly on our Vue-cli.


With CDN
< script src="https://unpkg.com/vuetify/dist/vuetify.js" >< /script >

With Npm
npm install vuetify

After installing n ya via npm, we need to register in main.js

import Vue from 'vue'
import App from './App'
import Vuetify from 'vuetify'
Vue.use(Vuetify)
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
  el: '#app',
  template: '',
  components: { App }
})

We have installed vuetify in vue.js, next we need to import css from vuetify . Here is how to import it.


1.Import css in main.js
import('../node_modules/vuetify/dist/vuetify.min.css')

2.Import css stylus-loader main.styl
@import '../node_modules/vuetify/src/stylus/main.styl'

Layout Vuetify

Vuetify provides a UI layout to facilitate the process of developing a web frontend. to make it easier for development. I will introduce layout layout provided by Vuetify.

1.Baseline Layout

<template>
  <v-app id="inspire">
    <v-navigation-drawer
      fixed
      v-model="drawer"
      app
    >
      <v-list dense>
        <v-list-tile @click="">
          <v-list-tile-action>
            <v-icon>home</v-icon>
          </v-list-tile-action>
          <v-list-tile-content>
            <v-list-tile-title>Home</v-list-tile-title>
          </v-list-tile-content>
        </v-list-tile>
        <v-list-tile @click="">
          <v-list-tile-action>
            <v-icon>contact_mail</v-icon>
          </v-list-tile-action>
          <v-list-tile-content>
            <v-list-tile-title>Contact</v-list-tile-title>
          </v-list-tile-content>
        </v-list-tile>
      </v-list>
    </v-navigation-drawer>
    <v-toolbar color="indigo" dark fixed app>
      <v-toolbar-side-icon @click.stop="drawer = !drawer"></v-toolbar-side-icon>
      <v-toolbar-title>Application</v-toolbar-title>
    </v-toolbar>
    <v-content>
      <v-container fluid fill-height>
        <v-layout
          justify-center
          align-center
        >
          <v-tooltip right>
            <v-btn icon large :href="source" target="_blank" slot="activator">
              <v-icon large>code</v-icon>
            </v-btn>
            <span>Source</span>
          </v-tooltip>
        </v-layout>
      </v-container>
    </v-content>
    <v-footer color="indigo" app>
      <span class="white--text">&copy; 2017</span>
    </v-footer>
  </v-app>
</template>

2.Google You tube

<template>
  <v-app
    dark
    id="inspire"
  >
    <v-navigation-drawer
      fixed
      :clipped="$vuetify.breakpoint.width > 1264"
      v-model="drawer"
      app
    >
      <v-list dense>
        <v-list-tile v-for="item in items" :key="item.text" @click="">
          <v-list-tile-action>
            <v-icon>{{ item.icon }}</v-icon>
          </v-list-tile-action>
          <v-list-tile-content>
            <v-list-tile-title>
              {{ item.text }}
            </v-list-tile-title>
          </v-list-tile-content>
        </v-list-tile>
        <v-subheader class="mt-3 grey--text text--darken-1">SUBSCRIPTIONS</v-subheader>
        <v-list-tile class="mt-3" @click="">
          <v-list-tile-action>
            <v-icon color="grey darken-1">add_circle_outline</v-icon>
          </v-list-tile-action>
          <v-list-tile-title class="grey--text text--darken-1">Browse Channels</v-list-tile-title>
        </v-list-tile>
        <v-list-tile @click="">
          <v-list-tile-action>
            <v-icon color="grey darken-1">settings</v-icon>
          </v-list-tile-action>
          <v-list-tile-title class="grey--text text--darken-1">Manage Subscriptions</v-list-tile-title>
        </v-list-tile>
      </v-list>
    </v-navigation-drawer>
    <v-toolbar color="red" dense fixed clipped-left app>
      <v-toolbar-title
        :style="$vuetify.breakpoint.width > 1264 && 'width: 300px'"
        class="ml-0 pl-3"
        :class="$vuetify.breakpoint.width <= 1264 && 'pr-3'"
      >
        <v-toolbar-side-icon @click.stop="drawer = !drawer"></v-toolbar-side-icon>
        <v-icon class="ml-3">fa-youtube</v-icon>
      </v-toolbar-title>
      <v-layout row align-center style="max-width: 650px">
        <v-text-field
          placeholder="Search..."
          single-line
          append-icon="search"
          :append-icon-cb="() => {}"
          class="white--text"
          hide-details
        ></v-text-field>
      </v-layout>
    </v-toolbar>
    <v-content>
      <v-container fill-height>
        <v-layout justify-center align-center>
          <v-tooltip right>
            <v-btn icon large :href="source" target="_blank" slot="activator">
              <v-icon large>code</v-icon>
            </v-btn>
            <span>Source</span>
          </v-tooltip>
        </v-layout>
      </v-container>
    </v-content>
  </v-app>
</template>

<script>
  export default {
    data: () => ({
      drawer: null,
      items: [
        { icon: 'trending_up', text: 'Most Popular' },
        { icon: 'subscriptions', text: 'Subscriptions' },
        { icon: 'history', text: 'History' },
        { icon: 'featured_play_list', text: 'Playlists' },
        { icon: 'watch_later', text: 'Watch Later' }
      ],
    }),
    props: {
      source: String
    }
  }
</script>

<style>
  .input-group__details:after {
    background-color: rgba(255, 255, 255, 0.32) !important;
  }
</style>

Components Vuetify

Vuetify provides components that are ready to use and can be used repeatedly.

1.Alerts
If usual we display alerts with library support, then in vuetify we have provided komponent alerts that you can call anywhere, here is how to use it.

 <template>
  <div>
    <v-alert color="success" icon="check_circle" value="true">
      This is a success alert.
    </v-alert>
    <v-alert color="info" icon="info" value="true">
      This is a info alert.
    </v-alert>
    <v-alert color="warning" icon="priority_high" value="true">
      This is a warning alert.
    </v-alert>
    <v-alert color="error" icon="warning" value="true">
      This is a error alert.
    </v-alert>
  </div>
</template>

We can use component alerts with v-alert There are 4 different color options and types are success, error, info, warning

2. Forms

<template>
  <v-form v-model="valid">
    <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-form>
</template>

3. Bottom navigation


In the mobile web version we often find bottom navigation. because it vuetify provides that component.

<template>
  <div id="app">
    <v-card height="200px">
    <div class="headline text-xs-center pa-5">Active: {{ e1 }}</div>
    <v-bottom-nav absolute :value="true" :active.sync="e1" color="transparent">
      <v-btn flat color="teal" value="recent">
        <span>Recent</span>
        <v-icon>history</v-icon>
      </v-btn>
      <v-btn flat color="teal" value="favorites">
        <span>Favorites</span>
        <v-icon>favorite</v-icon>
      </v-btn>
      <v-btn flat color="teal" value="nearby">
        <span>Nearby</span>
        <v-icon>place</v-icon>
      </v-btn>
    </v-bottom-nav>
  </v-card>
  </div>
  
</template>
  
</template>

<script>
  export default {
    data () {
      return {
        e1: 'recent'
      }
    }
  }
</script>
<style>
#app{
  max-width: 500px;
  text-align: center;
  margin:auto;
}
</style>

4. DatePicker
Vuetify also provides components for the datepicker .

<template>
  <v-layout row wrap>
    <v-flex md12 lg4>
      <v-date-picker v-model="picker"></v-date-picker>
    </v-flex>
    <v-flex md12 lg8 class="hidden-xs-only">
      <v-date-picker v-model="picker2" landscape></v-date-picker>
    </v-flex>
  </v-layout>
</template>

5. Stepper


Vuetify also provides a component for a user interface stepper to indicate the user's step.

<template>
<div id="app">
  <v-app id="inspire">
     <v-stepper v-model="e1">
      <v-stepper-header>
        <v-stepper-step step="1" :complete="e1 > 1">Name of step 1</v-stepper-step>
        <v-divider></v-divider>
        <v-stepper-step step="2" :complete="e1 > 2">Name of step 2</v-stepper-step>
        <v-divider></v-divider>
        <v-stepper-step step="3">Name of step 3</v-stepper-step>
      </v-stepper-header>
      <v-stepper-items>
        <v-stepper-content step="1">
          <v-card color="grey lighten-1" class="mb-5" height="200px"></v-card>
          <v-btn color="primary" @click.native="e1 = 2">Continue</v-btn>
          <v-btn flat>Cancel</v-btn>
        </v-stepper-content>
        <v-stepper-content step="2">
          <v-card color="grey lighten-1" class="mb-5" height="200px"></v-card>
          <v-btn color="primary" @click.native="e1 = 3">Continue</v-btn>
          <v-btn flat>Cancel</v-btn>
        </v-stepper-content>
        <v-stepper-content step="3">
          <v-card color="grey lighten-1" class="mb-5" height="200px"></v-card>
          <v-btn color="primary" @click.native="e1 = 1">Continue</v-btn>
          <v-btn flat>Cancel</v-btn>
        </v-stepper-content>
      </v-stepper-items>
    </v-stepper>
  </v-app>
</div>
</template>

<script>
  export default {
    data () {
      return {
        e1: 0
      }
    }
  }
</script>
<style>
#app{
  max-width: 800px;
  height: 500px;
  text-align: center;
  margin:auto;
}
</style>

Finally we can finish this tutorial, we have become acquainted with Vuetify and use it in Vue.js, there are many components that are in vuetify, but not all the components we use in our web application. you can mix and match with your needs. just so much of me hopefully this tutorial can help you in building a better web frontend again. thank you

---

Posted on Utopian.io - Rewarding Open Source Contributors

---