# Vue.js Material
> Material Design for Vue.js
Vue Material is lightweight framework built exactly according to the Material Design specs. It aims to deliver a collection of reusable components and a series of UI Elements to build applications with support to modern Web Browsers through Vue 2.0. Build powerful and well-designed web apps that can can fit on every screen. You can generate and use themes dynamically, use components on demand, take advantage of UI Elements and Components with an ease-to-use API.
## Demo and Documentation
Demo
## Installation
Import Roboto and Google Icons from Google CDN:
``` html
```
Install Vue Material through npm or yarn
``` bash
npm install --save vue-material
yarn add vue-material
```
* Others package managers like JSPM and Bower are not supported yet.
Import or require Vue and Vue Material in your code:
``` javascript
import Vue from 'vue'
import VueMaterial from 'vue-material'
import 'vue-material/dist/vue-material.css'
// OR
var Vue = require('vue')
var VueMaterial = require('vue-material')
require('vue-material/dist/vue-material.css')
```
Alternativelly you can download and reference the script and the stylesheet in your HTML:
``` html
```
## Usage
Enable Vue Material in your application using ```Vue.use()```. You can always enable individual components:
``` javascript
Vue.use(VueMaterial)
// OR
Vue.use(VueMaterial.mdCore) //Required to boot vue material
Vue.use(VueMaterial.mdButton)
Vue.use(VueMaterial.mdIcon)
Vue.use(VueMaterial.mdSidenav)
Vue.use(VueMaterial.mdToolbar)
```
To get Vue Material working properly, you'll need to configure and apply a default theme.
``` javascript
Vue.material.theme.register('default', {
primary: 'cyan',
accent: 'pink'
})
```
Or you can register multiple themes at once.
``` javascript
Vue.material.theme.registerAll({
default: {
primary: 'cyan',
accent: 'pink'
},
phone: {
primary: 'indigo',
accent: 'pink'
}
})
```
Apply your theme using v-md-theme directive:
``` html