Implement Material UI In Vue JS

Introduction:

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.

Get Started:

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.