Call + (44) 0843 289 4539

0
  • No products in the cart.

How to use a Material Design Component Framework with Vue

In a previous post I discussed the basic building blocks of Building a Vue SPA with Laravel providing steps how to configure Vue and Laravel together. I have also previously discussed How to add Vuetify to Laravel Project, which is a great way to get started with using Material Component Framework to develop a Laravel and Vue project.

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 teething problems and the usual minor frustrations one will experience with any software framework I have been able to produce great looking and scale-able line of business 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. 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

Shell
Shell

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

JS

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.

Plain Text

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

JS

We are now good to go!

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

JS

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

HTML

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 with laravel. This is a great way to speed up your Laravel development workflow.

Follow Me

Gary Woodfine

Helps businesses by improving their technical proficiencies and eliminating waste from the software development pipelines.

A unique background as business owner, marketing, software development and business development ensures that he can offer the optimum business consultancy services across a wide spectrum of business challenges.
Follow Me
Advertisements