Material design is the world’s most popular design language built by Google Inc. It provides a huge number of components or design templates to give a Material look to your application. Some material design-based front-end frameworks are created by the community and used for creating interactive and intuitive web applications. This post will learn about the installation of ‘vue-material’ and learn to use it in the Vue.js Framework.
Vue Material is a Google Material Design-inspired library used for building web apps.
Installation of Vue Material
Setup Vue Project
To set up the Vue project, first, check whether Vue.js is installed on your system or not by typing the command given below:
If you have not installed it yet, type the command given below to install Vue.js globally on your Operating system:
$ npm install -g @vue/cli
After successfully installing Vue.js globally on your Operating system, create the Vue project by typing the “vue create” command given below, followed by the project name:
$ vue create vueprojectname
It will ask you to either select the preset or select your own custom preset for the Vue project.
After configuring or selecting the default preset, the Vue project will be created in a while.
After creating the Vue project, navigate to the newly created project’s directory using the “cd” command.
At this stage, you have successfully set up the Vue project.
Install Vue Material
Once your system is ready, and the Vue project is set up! You can install the “vue-material” using the Yarn or NPM.
For installing ‘vue-material’ using the Yarn package manager, type the command given below:
For installing ‘vue-material’ using the NPM package manager, type the command given below:
$ npm install vue-material –save
Alright! Once the ‘vue-material’ isinstalled, You have to enable it in the main.js file.
After enabling the “vue-material,” you can now use it in your Vue project.
How to Use Vue Material in Vue
To use Vue Material with Vue, ‘vue-material’ provides various components to use as a Vue component. For example, a button can be created using the ‘vue-material’ like this.
<md-button class=“md-raised md-primary”>Primary</md-button>
For knowing about further components, feel free to visit the official getting started page of Vue Material.
This is how simple it is to install and start using Vue Material in a Vue project.
Vue Material is a trendy material design component library used for building web apps. In this post, we walk through Vue Material’s installation in a Vue.js project and see how to enable it and use it. With the combination of such two robust libraries, we can speed up the development process and beautify our web application to the highest limits.