Vue.js

Using Material Design with Vue.js 2


Created and designed by Google, Material Design is a design language that combines the classic principles of successful design along with innovation and technology. Google’s goal is to develop a system of design that allows for a unified user experience across all platform.

A general introduction and overview of Google’s Material Design can be found at https://material.google.com/.

As Vue.js 2 is great for building the view layer of single page web applications Material Design is a great fit. In the following you’ll learn how to add Material Design to your Vue.js 2 project.

vue-material

The vue-material library is available at https://github.com/marcosmoura/vue-material and can be used to install the Material Design libraray in your Vue.js project.

Setting Up Your Vue.js 2 Project with Vue CLI

Before starting to use Material Design, let’s start with a new Vue.js 2 project. By using the Vue command line interface (CLI) this process is straight forward. First execute the following command:

$ vue init webpack vuejs-md-01

This command downloads the Webpack-based Vue.js project template and installs this template into the new folder vuejs-md-01. Change into that directory and complete the project setup by installing the dependencies via:

$ npm install

Now you can start up the web server in development mode:

$ npm run dev

Add vue-material Library To The Project

Let’s install the vue-material library next:

$ npm install --save vue-material

This command makes sure that vue-material is installed into the node_modules subfolder and that the dependency is added to package.json.

Next, include the following link elements into the head section of index.html:

<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
<link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons">

Then, we need to include two import statements in the script section of main.js to make vue-material available in the project:

import VueMaterial from 'vue-material'
import 'vue-material/dist/vue-material.css'

Finally we’re activating VueMaterial by executing the Vue.use method:

Vue.use(VueMaterial)

Use Material Design Components In Your Template

What We’re Going To Build

With the vue-material library added to our project we’re now ready to make use of Material Design components to implement the user interface of our application.

Let’s first take a look at the application we’re going to build in the next steps:


As you can see the sample application consists of a headline, two buttons and an empty table. By using the button Fill Table you can add some entries to the table:


The button Clear Table removes all table entries.

Implementation of App Component Template

Let’s use the existing file App.vue from the default project template to implement the Material Design user interface. First delete the existing template code from App.vue and replace it by the following code:

<template>
  <div id="app">
    <md-card>
      <md-card-header>
        <div class="md-title">Material Design with Vue.js 2 Demo</div>
        <div class="md-subhead">by CodingTheSmartWay.com</div>
      </md-card-header>

      <md-card-content>
        
        <md-button class="md-raised md-primary" v-on:click="fillTable()">Fill table</md-button>
        <md-button class="md-raised md-primary" v-on:click="clearTable()">Clear table</md-button>
        <br />

         <md-table>
          <md-table-header>
            <md-table-row>
              <md-table-head>First name</md-table-head>
              <md-table-head>Last name</md-table-head>
              <md-table-head>Email</md-table-head>
            </md-table-row>
          </md-table-header>
          <md-table-body>
            <md-table-row v-for="contact in contacts">
              <md-table-cell>{{contact.firstname}}</md-table-cell>
              <md-table-cell>{{contact.lastname}}</md-table-cell>
              <md-table-cell>{{contact.email}}</md-table-cell>
            </md-table-row>
          </md-table-body>
        </md-table>
      </md-card-content>
    </md-card>
  </div>
</template>

As you can see we’re using various Material Design components to build up the user interface. A complete overview of components included in vue-material is available at: https://vuematerial.github.io/#/.

The buttons are included by using the <md-button> element. By using the v-on:click directive we’re able to add event handlers to the click events of both buttons (fillTable and clearTable).

The content of the table is printed out by generating a new <md-table-row> element for each element contained in the contacts array. To do so we’re using the v-for directive.

Implement Event Handler methods

To make the buttons work as expected we now need to add both event handler methods to our application. We’re adding both methods inside of object which is assigned to the methods property inside of the component configuration object:

<script>
export default {
    name: 'app',
    data: function () {
      return {
        contacts: []
      }
    },
    methods: {
      fillTable: function() {
        this.contacts.push({firstname: 'Sebastian', lastname: 'Eschweiler', email: 's.eschweiler@mail.com'});
        this.contacts.push({firstname: 'Bill', lastname: 'Smith', email: 'b.smith@mail.com'});
        this.contacts.push({firstname: 'Ann', lastname: 'Parker', email: 'a.parker@mail.com'});
      },
      clearTable: function() {
        this.contacts.splice(0, this.contacts.length);  
      }
    }
}
</script>

As the content of the table is generated from the contacts array, in method fillTable we’re using the push method to add new objects to the array and therewith fill the table.

The clearTable method is implemented by using the splice method to delete all entries form the array. Therefore two paramaters need to be passed to the method: 0 and the current length of the array (available via length property).

Summary

Using the vue-material package makes it easy to integrate Google’s Material Design language into your Vue.js project and make Material Design components available to your component’s template.

ONLINE COURSE: Vue.js 2 – The Complete Guide

Check out the great Vue.js online course by Maximilian Schwarzmüller with over 6800 students already enrolled:

Vue JS 2 – The Complete Guide 

  • Build amazing Vue.js Applications – all the Way from Small and Simple Ones up to Large Enterprise-level Ones
  • Leverage Vue.js in both Multi- and Single-Page-Applications (MPAs and SPAs)
  • Understand the Theory behind Vue.js and use it in Real Projects

Go To Course


Using and writing about best practices and latest technologies in web design & development is my passion.

    View Comments


    *

    Free ebook | Essentials - ECMAScript 6 and TypeScript - Get Your Copy Now

    x