How Do You Use Material Designs in Vue.js?

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

Vue material library can be used as Vue components in a Vue project. Before getting started with the Vue material installation, it is assumed that you are familiar with HTML, CSS, and Javascript. You have set up the Vue Project, and you have a good editor installed on your system like VS code. If you have not set up the Vue project yet, you can follow the procedure given below to set up a Vue project quickly.

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:

$ vue --version

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.

$ cd vueprojectname

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:

$ yarn add vue-material

OR

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.

import VueMaterial from 'vue-material'
import 'vue-material/dist/theme/default.css'
import 'vue-material/dist/vue-material.min.css'

Vue.use(VueMaterial)

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.

Conclusion

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.

from Linux Hint https://ift.tt/3dw0VnI