AppDividend
Latest Code Tutorials

Vuetify Tutorial Example From Scratch

19,756

Get real time updates directly on you device, subscribe now.

Vuetify Tutorial With Example From Scratch is today’s topic. For this tutorial, We need to some knowledge on Vue cli. Vuetify is a Material Component Framework for Vue applications. Vuetify is a semantic component framework for Vue. It aims to provide clean, semantic and reusable components that make building your application fast.

Vuetify Tutorial Example

We will start this tutorial by installing the Vuetify. If you want to learn more about specific components, then check out its official documentationVuetify has eight pre-made Vue CLI templates. We will use vuetifyjs/webpack template.

Step 1: Install Vuetify.

Install it by the following command.
Book your flight to a top destination on this special promo! Get up to $40◊ off with promo code TOP40 Book Now!

npm install -g vue-cli
vue init vuetifyjs/webpack vuetify-tutorial
cd vuetify-tutorial
npm run dev

After installed, I will open up the server at port: 8080. In that, you can see the starter template page.

 

Vuetify Material Tutorial

Step 2: Figure out folder structure.

Here is our folder structure. Our main folder is src. In that, we need to put our code in a well-organized manner.

 

Vue Material Tutorial

If you will go to src  >>  App.vue file, it looks like this.

// App.vue

<template>
  <v-app>
    <v-navigation-drawer
      persistent
      :mini-variant="miniVariant"
      :clipped="clipped"
      v-model="drawer"
      enable-resize-watcher
      fixed
      app
    >
      <v-list>
        <v-list-tile
          value="true"
          v-for="(item, i) in items"
          :key="i"
        >
          <v-list-tile-action>
            <v-icon v-html="item.icon"></v-icon>
          </v-list-tile-action>
          <v-list-tile-content>
            <v-list-tile-title v-text="item.title"></v-list-tile-title>
          </v-list-tile-content>
        </v-list-tile>
      </v-list>
    </v-navigation-drawer>
    <v-toolbar
      app
      :clipped-left="clipped"
    >
      <v-toolbar-side-icon @click.stop="drawer = !drawer"></v-toolbar-side-icon>
      <v-btn icon @click.stop="miniVariant = !miniVariant">
        <v-icon v-html="miniVariant ? 'chevron_right' : 'chevron_left'"></v-icon>
      </v-btn>
      <v-btn icon @click.stop="clipped = !clipped">
        <v-icon>web</v-icon>
      </v-btn>
      <v-btn icon @click.stop="fixed = !fixed">
        <v-icon>remove</v-icon>
      </v-btn>
      <v-toolbar-title v-text="title"></v-toolbar-title>
      <v-spacer></v-spacer>
      <v-btn icon @click.stop="rightDrawer = !rightDrawer">
        <v-icon>menu</v-icon>
      </v-btn>
    </v-toolbar>
    <v-content>
      <router-view/>
    </v-content>
    <v-navigation-drawer
      temporary
      :right="right"
      v-model="rightDrawer"
      fixed
      app
    >
      <v-list>
        <v-list-tile @click="right = !right">
          <v-list-tile-action>
            <v-icon>compare_arrows</v-icon>
          </v-list-tile-action>
          <v-list-tile-title>Switch drawer (click me)</v-list-tile-title>
        </v-list-tile>
      </v-list>
    </v-navigation-drawer>
    <v-footer :fixed="fixed" app>
      <span>&copy; 2017</span>
    </v-footer>
  </v-app>
</template>

<script>
export default {
  data () {
    return {
      clipped: false,
      drawer: true,
      fixed: false,
      items: [{
        icon: 'bubble_chart',
        title: 'Inspire'
      }],
      miniVariant: false,
      right: true,
      rightDrawer: false,
      title: 'Vuetify.js'
    }
  },
  name: 'App'
}
</script>

There is already the bunch of components are there. All the other header, sidebar, drawer and footer elements are tied together here. We have also initialized the vue-router. App.vue file is included in the main.js file.

// main.js

// 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 Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'

Vue.use(Vuetify)

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

In the content area of this application, we have already included one component. You can see this component in the src  >>  components  >>  HelloWorld.vue file.

// HelloWorld.vue

<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">
        <blockquote>
          &#8220;First, solve the problem. Then, write the code.&#8221;
          <footer>
            <small>
              <em>&mdash;John Johnson</em>
            </small>
          </footer>
        </blockquote>
      </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>

So in the future, if we need to build more and more components then we need to place those components in here. Now remove the other components inside the App.vue file. We will include and configure some components from scratch. After removing some built-in components, our App.vue file looks like this.

// App.vue

<template>
  <v-app>
    <v-content>
      <router-view/>
    </v-content>
  </v-app>
</template>

<script>
export default {

}
</script>

<v-app> component holds our entire vuetify material application. <router-view> handles the different routes for our app.

Step 3: Create toolbar for the header.

In App.vue file, write the following code.

// App.vue

<template>
  <v-app dark>
    <v-toolbar></v-toolbar>
    <v-content>
      <router-view/>
    </v-content>
  </v-app>
</template>

<script>
export default {

}
</script>

<v-app dark> means our background theme becomes black or dark. Also <v-toolbar> defines the header navigation items for our Vue application. Also, you can change either the background color or only the v-toolbar component color by adding the class property and color name included in Vuetify.

// App.vue

<template>
  <v-app>
    <v-toolbar class="deep-purple"></v-toolbar>
    <v-content>
      <router-view/>
    </v-content>
  </v-app>
</template>

<script>
export default {

}
</script>

It displays the following interface.

 

Vuetify Tutorial 2018 From Scratch

For more color combinations, check out Material Color Palette.

Now, add the logo or navbar brand for speak to say to the header file. To do that, we need to add one more element inside the v-toolbar element.

<v-toolbar class="deep-purple">
   <v-toolbar-title>Vuetify Tutorial</v-toolbar-title>
</v-toolbar>

Next step is to add the items to our navigation bar.

// App.vue

<v-app>
  <v-toolbar class="deep-purple">
    <v-toolbar-title>Vuetify Tutorial</v-toolbar-title>
      <v-toolbar-items>
        <v-btn flat dark>Vue</v-btn>
        <v-btn flat dark>Vuex</v-btn>
        <v-btn flat dark>Nuxt</v-btn>
      </v-toolbar-items>
    </v-toolbar>
    <v-content>
      <router-view/>
  </v-content>
</v-app>

For more details on a button, please check out the Vuetify documentation.

Related Posts
1 of 14

Step 4: Add Navigation Drawer.

First, we need to add the drawer component in our App.vue file. So add that component just above v-app component.

// App.vue

 <v-navigation-drawer
      temporary
      v-model="drawer"
      :mini-variant="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>

Now, we need to connect this component to the drawer icon. So first define the model data for it. The data is simple. We just need to toggle the navigation. So we can take one property called “drawer.” When the user clicks on the drawer icon, it will be opposite of what it is in the current state. We can do that via v-model to change the property of the “drawer” attribute.

// App.vue

<script>
export default {
  data() {
    return {
      drawer: false
    }
  }
}
</script>

By default, a drawer is false. Also, we need to attach this property to that v-toolbar-icon.

// App.vue

<v-toolbar-side-icon @click.stop="drawer = !drawer" dark></v-toolbar-side-icon>

Above line of code is inserted just inside <v-toolbar class=”deep-purple”> component. So our whole file App.vue looks like this.

// App.vue

<template>
  <v-app>
    <v-toolbar class="deep-purple">
      <v-toolbar-side-icon @click.stop="drawer = !drawer" dark></v-toolbar-side-icon>
      <v-toolbar-title dark>Vuetify Tutorial</v-toolbar-title>
      <v-toolbar-items>
        <v-btn flat dark>Vue</v-btn>
        <v-btn flat dark>Vuex</v-btn>
        <v-btn flat dark>Nuxt</v-btn>
      </v-toolbar-items>
    </v-toolbar>
    <v-content>
      <router-view/>
    </v-content>
    <v-navigation-drawer
      temporary
      v-model="drawer"
      :mini-variant="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>
  </v-app>
</template>

<script>
export default {
  data() {
    return {
      drawer: false
    }
  }
}
</script>

So this is how you can build components, one after another. You can review whole the components in their main documentation. This Vuetify Tutorial is just an overview of how you can use this Materialize powered Vue.js components.

2 Comments
  1. Alugbin Abiodun says

    Hi Krunal.

    Please can u give a tutorial on how to design d login page before directing to the page with the app drawer.

    I cant seem to understand how to arrange the files.
    Thanks.

    1. Renan Coelho says

      Hi Alugbin!

      Recently I’ve made a project base using Vuetify & Firebase.

      If you are interested, please look at my repo https://github.com/sayhicoelho/vue-firebase and the prod running application https://example-vue-firebase.firebaseapp.com.

      Before reach here I had the same problem which you were facing and solved it by my own.

Leave A Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.