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
Finished installation of vue cli.

Step: 2

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

vue create danyal.dk_app
I am choosing the first option with vue 2 by pressing up & down arrow key, press enter key after selecting Vue 2.
Vuejs 2 project is created successfully with the name danyal.dk_app, you can ofcouse choose name of your choice. Go to the project directory and serve the application’s first look.
cd danyal.dk_app
npm run serve
Server is now serving vue2 application at localhost with port 8080, in your machine this port could be differnet; depending on it’s availbility. Alright let’s open app in the browser and you can see the screenshot as below.
Vue2 application is runnig with default page and component. From here on it’s 100% up to you to add any kind of CSS framework like bootstrap, tailwind css or Vuetifyjs, In my currect projects I am using bootstrap-vue that works also great.

But today we will try vuetifyjs, that is also known as Material Component Framework for VueJS 2. Vuetify is a component framework for Vue.js 2. It aims to provide clean, semantic and reusable components that make building your application a breeze.

Vuetify utilizes Google’s Material Design design pattern, taking cues from other popular frameworks such as Materialize.css, Material Design Lite, Semantic UI and Bootstrap 4.

Step: 3

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

vue add vuetify
Vuetify is successfully added to the vue app, and basic Vuetify app is up&running in following screenshot.
Vuetify Basic App

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

Author: Danyal
I'm working as programmer since 2002. Born, grew up, studied and worked in Pakistan now Im located in Denmark since 2006.