How to use a Material Design Component Framework with Vue

Experienced software developers soon realise that no two projects are the same and often there is a need to do things differently or even a need to introduce different libraries in order to achieve customer objectives .

In this post I will discuss the process of incorporating ,MDB Vue : A Material Design Component for Vue Pro which is a powerful and free UI KIT for the newest Bootstrap 4 and Material Design. However in this article I will be discussing making use of the MDB Vue Pro which is the paid for premium offering, which includes 500 material UI elements, 600+ material icons, 74 CSS animations, SASS files, templates, tutorials and more to help propel your development efforts.

Why use a Material Design Component Framework

A Material Design Component helps you to get started a new project using Vue.js with a set of rules, guidelines, components and best practises for creating websites and apps.

Google developed Material Design to create a consistent visual language for all of their products because they didnâ€™t want to do the same design work many times across different productsâ€Šâ€”â€Šand besides, it creates a consistent Google Look that their users can become accustomed to while navigating between Google products.

By using Material Design, you are tapping into this ecosystem which means that your users subconsciously attribute a level of trust and security to your app beyond its station because they will associate your app with Google.

Why use MDB Vue Pro

In development there are always a million and one reasons why you should use some kind of framework or other. Frameworks are always often touted as a cure for some issues within the development process. However, the reality is using a framework or tool is always going to come down to personal preference or choice, there never really is a the best framework there is only the best framework you choose.

I happen to like MDB Vue : A Material Design Component for Vue Pro purely because it does everything I need it to do, it was also fairly easy and quick to get up to speed with it.

After a few initial teething problems and the usual minor frustrations one will experience with any new software framework I have been able to produce great looking and scale-able line of business applications and good looking websites very quickly.

One has to bear in mind, that although I am full-stack web developer, this does not necessarily translate to that I am great at web design or even have the necessary design skills. My design skills are adequate enough to work with a design, that somebody else has designed and tweak it.

If you want a web application to look like it was designed by an engineer then I'm your man, but if you want it to look pretty and aesthetically pleasing then no so much! So I need all the help I can get when it comes to design and having some kind of framework in the background I can just tweak a couple of things and its all done for me then its a big bonus.

Getting started with a Material Design

For this tutorial I am going to assume you have some understanding of using Yarn or NPM. You may also want to take a look at How to start a new project using Vue.js especially if you want a broader understanding of MDB Vue : A Material Design Component for Vue Pro.

The steps outlined here also assume you have a valid MDB Vue : A Material Design Component for Vue Pro account.

After you have purchased MDB Vue : A Material Design Component for Vue Pro and created your GitLab account, you will be provided with an account ID which the instructions will prompt you to simply install the framework using a yarn or npm install

npm install git+https://oauth2:jFzMYzqSBUmGm3Z1ZA9s@git.mdbootstrap.com/mdb/vue/vu-pro.git â€“save

yarn add git+https://oauth2:jFzMYzqSBUmGm3Z1ZA9s@git.mdbootstrap.com/mdb/vue/vu-pro.git

Information

Please note the account id included here is a fictional generated ID and will not work. You will need to insert your own ID

This is really simple and works great, BUT .....

You don't really want to be including your Account Id in your package.json especially if like me you are going to commit your code to a Public GitHub Repository for the world to see!

Fortunately a Laravel project already has a number of great features to help in this regard and with just a few minor tweaks we can add some additional security.

If you want some background or understanding check out my Using Environment Variables in Vue.js

We are also add an additional JavaScript file so we can enable Yarn or npm use our .env file enabling us to store sensitive information.

The first thing we need to do is add a new JavaScript f ile which we will call preinstall.js and then we will add the following code to this file

require('dotenv').config();
const package = require('./package.json');
const fs = require('fs');


package.dependencies["mdbvue"] = package.dependencies["mdbvue"]
    .replace("${$MDB_VUE_PRO_ID}", process.env.MDB_VUE_PRO_ID);

fs.writeFileSync('package.json', JSON.stringify(package, null, 4));

You will notice we have imported dotenv so we can access our environment specific configuration. We are also going to preform a replace using a tag within out package.json file. The specific attribute we are looking for mdbvue and the tag we are going to replace is ${$MDB_VUE_PRO_ID} with a value will now declare in our .env file

In our .env file lets now add our new environment variable with the value we want to use.

APP_NAME=sourcelink
APP_ENV=local
APP_KEY=base64:aP3/5oe/7PxiXQy1/Th9qXAqUm3kR1qxg4VNuvSQHns=
APP_DEBUG=true
APP_URL=http://sourcelink.test
MDB_VUE_PRO_ID=jFzMYzqSBUmGm3Z1ZA9s

......

We now edit our package.json file to include a reference to our preisntall.js we will also add the dependency.

"private": true,
    "scripts": {
        "preinstall": "node preinstall.js",
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "devDependencies": {
        "axios": "^0.19",
        "bootstrap": "^4.1.0",
        "cross-env": "^5.1",
        "jquery": "^3.2",
        "laravel-mix": "^4.0.7",
        "lodash": "^4.17.5",
        "popper.js": "^1.12",
        "resolve-url-loader": "^2.3.1",
        "sass": "^1.15.2",
        "sass-loader": "^7.1.0",
        "vue": "^2.5.17",
        "vue-template-compiler": "^2.6.10"
    },
    "dependencies": {
        "vue-router": "^3.0.6",
        "mdbvue": "git+https://oauth2:${$MDB_VUE_PRO_ID}@git.mdbootstrap.com/mdb/vue/vu-pro.git"
    }
}

We can now simply run yarn install and our dependency will be installed and you'll notice your package.json the value will be replaced.

Warning

Careful you do not commit this new package.json to your repository, because as you'll notice your Account ID will still be visible.

I usually make a copy of my pre-converted package.json and name it example.package.json

Configure Vue to use MDB Vue Pro

After the dependency has installed we can now configure our project to make use of the MDB Vue : A Material Design Component for Vue Pro we can now register it with our application.

The first step is edit resources/js/app.js and the references we need

import 'bootstrap-css-only/css/bootstrap.min.css';
import 'mdbvue/build/css/mdb.css';
import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter);

import App from './views/App'
import About from './views/About'
import Home from './views/Home'

const router = new VueRouter({
    mode: 'history',
    routes: [
        {
            path: '/',
            name: 'home',
            component: Home
        },
        {
            path: '/about',
            name: 'about',
            component: About,
        },
    ],
});

const app = new Vue({
    el: '#app',
    components: { App },
    router,
});

Information

MDB Vue Pro includes the Bootstrap therefore you can delete the bootstrap.js as it is now superfluous to our needs

Edit the resources/js/views/App.vue to add a header for our application

<template>
    <div class="flexible-content">
        <mdb-navbar light position="top" dark color="orange" scrolling>
            <mdb-navbar-brand href="https://threenine.dev" target="_blank">
                Sourcelink
               </mdb-navbar-brand>

            <mdb-navbar-toggler>
                <mdb-navbar-nav right>
                    <mdb-nav-item :to="{ name: 'home' }" waves-fixed active class="active"
                    >Home</mdb-nav-item>
                    <mdb-nav-item :to="{ name: 'about' }" waves-fixed active class="active"
                    >About</mdb-nav-item>
                </mdb-navbar-nav>
            </mdb-navbar-toggler>
        </mdb-navbar>

        <main>
            <div class="mt-5 p-5">
                <mdb-container fluid grid-list-xl>
                    <mdb-row>
                        <mdb-col col="9"><router-view></router-view></mdb-col>
                        <mdb-col col="3"></mdb-col>
                    </mdb-row>
                </mdb-container>
            </div>
        </main>
    </div>

</template>
<script>
    import {
        mdbContainer,
        mdbRow,
        mdbCol,
        mdbNavbar,
        mdbNavbarBrand,
        mdbNavItem,
        mdbNavbarNav,
        mdbNavbarToggler
    } from "mdbvue";

    export default {
        name: "App",
        components: {
            mdbContainer,
            mdbRow,
            mdbCol,
            mdbNavbar,
            mdbNavbarBrand,
            mdbNavItem,
            mdbNavbarNav,
            mdbNavbarToggler
        }
    }
</script>

We can now use yarn watch and view the results in our browser

Summary

In this post we covered the basics of including a Material Component Design Framework to our Vue.JS SPA project. This is a great way to speed up your Frontend Design development workflow.

About
Latest Posts

Gary Woodfine

Technical Director at threenine.co.uk

Gary is Technical Director at threenine.co.uk, an independent software vendor specialising in IoT, Field Service and associated managed services,enabling customers to be efficient, productive, secure and scale-able.