How to add Vuetifyjs to Vuejs app?

Today we will learn how to implement vuetify in vuejs application, for those who are not familiar to vuetify and vuejs frameworks, plese do read following two paragraphs for quick understanding.

Vue.js is an open-source model–view–viewmodel front end JavaScript framework for building user interfaces and single-page applications. It was created by Evan You, and is maintained by him and the rest of the active core team members. Wikipedia

Vuetifyjs is a Vue UI Library with beautifully handcrafted Material Components. No design skills required everything you need to create amazing applications is at your fingertips.

Before we start, I asume you have Node & NPM up & runing in your machine, I am using the following versions, but you are welcome to use the latest:

Node: v14.18.1
NPM: 6.14.15

Once you have downloaded and installed the Node, we are ready to procced.

Step: 1

Install Vue CLI by running following command.

npm install -g @vue/cli

Step: 2

Let’s create a vue2 project by running the following command.

vue create danyal.dk_app

cd danyal.dk_app
npm run serve

Step: 3

Let’s add Vuetify to the danyal.dk_app we installed in previouse step.

vue add vuetify

Vuetify has some wireframes, that can really help us get started with our app layout. So let’s open vuetify site https://vuetifyjs.com/en/ and click on Wireframes from left menu bar under Getting started.

I am going to use the very first, the basic one that is very clean for the starter theme.

Source code for the basic wireframe is available at github at following link:

https://github.com/vuetifyjs/vuetify/blob/master/packages/docs/src/examples/wireframes/base.vue

Now open App.vue in code editor and replace the code with following one.

Note: official basic wireframe comes with top nav + size drawer, but in following code I have also addes the example Navigation items.

<template>
  <v-app id="inspire">
    <v-navigation-drawer
      v-model="drawer"
      app
    >
      <v-list-item>
        <v-list-item-content>
          <v-list-item-title class="text-h6">
            Application
          </v-list-item-title>
          <v-list-item-subtitle>
            subtext
          </v-list-item-subtitle>
        </v-list-item-content>
      </v-list-item>

      <v-divider></v-divider>

      <v-list
        dense
        nav
      >
        <v-list-item
          v-for="item in items"
          :key="item.title"
          link
        >
          <v-list-item-icon>
            <v-icon>{{ item.icon }}</v-icon>
          </v-list-item-icon>

          <v-list-item-content>
            <v-list-item-title>{{ item.title }}</v-list-item-title>
          </v-list-item-content>
        </v-list-item>
      </v-list>
    </v-navigation-drawer>

    <v-app-bar app>
      <v-app-bar-nav-icon @click="drawer = !drawer"></v-app-bar-nav-icon>

      <v-toolbar-title>Application</v-toolbar-title>
    </v-app-bar>

    <v-main>
      <!--  -->
    </v-main>
  </v-app>
</template>

<script>
  export default {
    data: () => ({
      drawer: null,
      items: [
            { title: 'Dashboard', icon: 'mdi-view-dashboard' },
            { title: 'Tasks', icon: 'mdi-image' },
            { title: 'Points', icon: 'mdi-help-box' },
          ]
        }),
  }
</script>

That’s it, hope you got basic understanding of the proccedure, remember to share the article.

See you in next time.
/ Danyal