Material design for Vue js

Light and clean design with Material design for Vue.js

Leave a Comment / Vue.js / By

Another great way to design your project is Material design. It might sound like yet another CSS framework that is used by the developers, but in the reality, it is more than this. What is Material design? It is a design language that is developed by Google. And the design language means that it describes some kind of guidelines and best practices for the applications. The Material Design philosophy is to support consistency across different platforms. In this article you will learn about how to use Material Design with Vue.js and you will find out about the Vue js Material design implementation, but before this, let’s overview what is Material design and where it is being used.

Short history lesson: Material design was created for designing Android applications. With a new OS version being released yearly, it was an obvious decision for Google to create some kind of a standard regardless of design. The language was introduced on 2014-06-25, during the Google I/O conference. The language survived since then and now it is being used by the majority of the Google-owned applications. Moreover, Chrome OS implements this design, and even some of the desktop applications like Chrome browser, Google Drive, Docs, etc. are developed regardless of the Material guidelines. Material design provides features such as grid-based layout, effects for buttons and cards, various transitions, and so on.

Does that mean Material design is used only for developing Android applications? Does it is being used only by Google for its projects only?

It might was used for Android only at first, but not nowadays. Material design is widely adopted by many developers. There are many frameworks based on it. And one of the examples that it being used for the web, is that Material Design is often used with Vue.js. As we know, for every good library (design language, in this case), there is an implementation for Vue.js. And the component framework of Vue js with Material design is called Vuetify. Because Vue itself mainly focuses on the application logic and data manipulation, there is a need for some kind of framework to style your app.

Already mentioned that Vuetify is a component framework. And in short words, it means that Vuetify is an implementation of the Material Design guidelines. Similarly to Buefy, Vuetify eligibles us making good looking applications.

How popular is Vuetify?

Without a doubt, there are a lot of alternatives for Vuetify. All of them have their own advantages and disadvantages, but they are still being loved and hated. This is about every framework – they have their own fans and own haters. Right now, Vuetify.js has more than 22.3k stars on GitHub.

One of the biggest arguments of Material design haters is that the design fits only mobile apps. And for the desktop applications, it doesn’t look good as it makes them look like mobile programs. Of course, this is subjective and others might mitigate using the same guidelines for all platforms as it makes the design look clean.

Vuetify is a pretty popular Vue component framework. If you are an enterprise that wants to have a design for your project that is polished and better than competitors, then this framework might not be for you. However, it takes a lot of time and resources to create your own design for every component.

But if you are building a prototype or your project is not a world-class product, Vuetify is a great choice. And in the previous sentence, I already mentioned the reason why Vuetify is popular – it is great for prototyping. It eliminates the burden of building custom CSS components, it is fast, simple, and reliable. That’s all you might need.

Vue material vs Vuetify

While searching for a Material design implementation for Vue.js, you might come across two different libraries – Vue material and Vuetify. As these are both based on Material design, there is no big difference which one you will use.

However, Vuetify has better documentation, more examples and it is easier to use than Vue material. But, you can use Material with both libraries.

Let’s compare which one library is more popular and is more used by developers. While popularity is not the best indicator of quality, it still says something. So the Vue-material has over 8.3k stars on GitHub, while, Vuetify has over 23k. And here is a downloads comparison between Vue material and Vuetify, according to npmtrends.com:

Vue material vs Vuetify

We can make two conclusions from this chart:

  • Vuetify is way popular than Vue-material. What is the reason for this?
  • Material design for Vue.js is gaining popularity. There is a steady increase in downloads for both libraries.
  • Might not be obvious from the given chart, but Vuetify is a very popular library for Vue.js. And the popularity indicates this

Vuetify installation guide

If you are convinced and you decided to use this library, let’s see how can we install Vuetify. At this point, I will assume you already have a Vue project created with CLI. If not, see this as a reference.

There are few different approaches for the installation, it doesn’t matter which one you will use. Go to your project folder and install the package:

vue add vuetify

Another approach also can be used – npm install vuetify, however in this case you need to have Webpack. Unless you really need this, there is no need to create an additional overhead and I recommend you using the CLI method. Here is a guide from Vuetify documentation for Vuetify with Webpack installation

The difference between those two is that in the first case, Vue CLI is used. And with the second way, the node package manager is used. Did I answer the question? 🙂 If talking seriously, vue add can install additional packages – you will be guided through configuration with the vue add command. The process is similar to app creation with Vue CLI. You will be similarly asked questions if you want to install additional dependencies.

If you prefer, you might also install Vuetify with Vue UI. You can achieve this with vue ui in your terminal:

Vuetify installation with Vue ui

Just go to dependencies and search for Vuetify.

How to update Vuetify?

After the installation, you will have the newest version of the Vuetify. However, the current version will be the newest only for now, but it will depreciate after a while. And in order to use the latest and greatest version, you will have to update your installation. There is a simple way how to update Vuetify. First of all, you have to know what is the newest version that is published. You can find out this by executing npm info vuetify:

how to update Vuetify

As a result, you will get the information about current versions, maintainers of the project, packed size, and some technical details. From the picture above, you can see that the latest version is 2.1.10. Now all you need to do is to hit npm install –save vuetify@2.1.10 in your terminal. That’s it, you will have the newest Vuetify version after this.

Getting started with Vuetify

I hope the installiation went well, if so, let’s move on. It would be smart to check if the installaton succeded, wouldn’t it?

This is how you can check what version of Vuetify is installed. Navigate yo your project directory and run npm ls –depth 0 vuetify. This command searches for Vuetify by walking through a directory tree. And if it finds the library, it lists it to the terminal.

Now when you are assured that the installation went well, let’s see what does it come when running the app. This is what you should see after running project and visiting it in your localhost address (if you want to access it externally, here is a tutorial):

Vuetify default page

After vue add vuetify was used, there were some things that happened under the hood. First of all, Vuetify was installed, and secondly, App.vue, and main.js files were edited. 

<template>
  <v-app>
    <v-app-bar
      app
      color="primary"
      dark
    >
      <div class="d-flex align-center">
        <v-img
          alt="Vuetify Logo"
          class="shrink mr-2"
          contain
          src="https://cdn.vuetifyjs.com/images/logos/vuetify-logo-dark.png"
          transition="scale-transition"
          width="40"
        />

        <v-img
          alt="Vuetify Name"
          class="shrink mt-1 hidden-sm-and-down"
          contain
          min-width="100"
          src="https://cdn.vuetifyjs.com/images/logos/vuetify-name-dark.png"
          width="100"
        />
      </div>

      <v-spacer></v-spacer>

      <v-btn
        href="https://github.com/vuetifyjs/vuetify/releases/latest"
        target="_blank"
        text
      >
        <span class="mr-2">Latest Release</span>
        <v-icon>mdi-open-in-new</v-icon>
      </v-btn>
    </v-app-bar>

    <v-content>
      <HelloWorld/>
    </v-content>
  </v-app>
</template>

<script>
import HelloWorld from './components/HelloWorld';

export default {
  name: 'App',

  components: {
    HelloWorld,
  },

  data: () => ({
    //
  }),
};
</script>

And talking about main.js, it didn’t change that much. The main difference is that Vuetify was imported from the local directory, and it was used when creating an instance of Vue:

import Vue from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify';

Vue.config.productionTip = false

new Vue({
  vuetify,
  render: h => h(App)
}).$mount('#app')

So basically there it is, now you can edit code inside your .vue file and use any of the Material design components.

Final words

You don’t need to reinvent the wheel every time you want to have a good looking design. Especially, if you like front-end development more than designing (and you find thinking about how your app should look like is a headache for you). Sometimes the best choice is to choose a library like the Material design or Bootstrap or Bulma. One of the disadvantages of the libraries might be template’ ish design, but if you are building a prototype, that does not create a problem. After all, functionality is more important than design when building a prototype. It’s completely up to you what library or framework you will use for the UI. However, no one will argue that Material design and it’s implementation for Vue.js, Vuetify, is a great choice.

Leave a Comment