Simple, lightweight, and constructed strictly to the Google Material Design specifications, Vue Material is a great choice. Create well-designed apps that fit on any screen, support all current web browsers, have dynamic themes, demand-driven components, and an intuitive API.
Step 1: Set up your VUE project.
Goto your desired folder location and run the following command to create a new Vue project.
vue create vue-material
It will take some time. After creating the project, run the following command to check project is successfully established or not.
npm run serve
Step 2: Installation of Material UI
You can install Material UI by running this command.
npm install vue-material --save
After installing Material UI, import the components in the main.js file
import VueMaterial from 'vue-material' import 'vue-material/dist/vue-material.min.css' import 'vue-material/dist/theme/default.css' Vue.use(VueMaterial)
Step 3: Use Material UI components.
Go to your desired component and add a simple text box and button for demo UI.
Here is the code,
<template> <div class="hello"> <div class="input-box"> <md-field> <label>Type here!</label> <md-input v-model="type"></md-input> <span class="md-helper-text">Helper text</span> </md-field> </div> <md-button class="md-raised md-primary">Default</md-button> </div> </template>
You can use more UI components like this by clicking here.