Import Roboto and Google Icons from Google CDN:
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
<link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons">
- Install Vue Material through npm or yarn:
npm install vue-material
yarn add vue-material
* Others package managers like JSPM and Bower are not supported yet.
import Vue from 'vue'
import VueMaterial from 'vue-material'
import 'vue-material/dist/vue-material.css'
var Vue = require('vue')
var VueMaterial = require('vue-material')
require('vue-material/dist/vue-material.css')
Or download from Github and reference the script and the stylesheet in your HTML:
<link rel="stylesheet" href="path/to/vue-material.css">
<script src="path/to/vue-material.js"></script>
Enable Vue Material in your application using Vue.use(). You can always enable individual components:
// To import the whole library
import Vue from 'vue'
import VueMaterial from 'vue-material'
import 'vue-material/dist/vue-material.css'
Vue.use(VueMaterial)
// Or to import individual components
import Vue from 'vue'
import VueMaterial from 'vue-material'
import 'vue-material/dist/components/mdCore/index.css' //Required to boot vue material
import 'vue-material/dist/components/mdButton/index.css'
import 'vue-material/dist/components/mdIcon/index.css'
import 'vue-material/dist/components/mdSidenav/index.css'
import 'vue-material/dist/components/mdToolbar/index.css'
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 import the whole library
var Vue = require('vue')
var VueMaterial = require('vue-material')
require('vue-material/dist/vue-material.css')
Vue.use(VueMaterial)
// Or to import individual components
var Vue = require('vue')
var VueMaterial = require('vue-material')
require('vue-material/dist/components/mdCore/index.css') //Required to boot vue material
require('vue-material/dist/components/mdButton/index.css')
require('vue-material/dist/components/mdIcon/index.css')
require('vue-material/dist/components/mdSidenav/index.css')
require('vue-material/dist/components/mdToolbar/index.css')
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 a default theme. You can also register multiple themes at once.
Vue.material.theme.register('default', {
primary: 'cyan',
accent: 'pink'
})
Vue.material.theme.registerAll({
default: {
primary: 'cyan',
accent: 'pink'
},
indigo: {
primary: 'indigo',
accent: 'pink'
}
})
Apply your theme on each code part that you want using v-md-theme directive:
<div id="app" v-md-theme="'default'">
<md-toolbar>
<div class="md-title">My App</div>
</md-toolbar>
<md-button v-md-theme="'indigo'">My Button</md-button>
</div>