Vue material - I don't see changes

Question

I am using http://vuematerial.io/#/getting-started in my vue project (webpack, hot reloads, babel and so on).

I've imported this library (via npm) and included it in main.js file hovewer i don't see any changes in my project. The browser doesnt render it.

What am i doing wrong?

main.js:

import Vue from 'vue'
import VueMaterial from 'vue-material'
import 'vue-material/dist/vue-material'
import App from './App.vue'

Vue.use(VueMaterial)

Vue.material.registerTheme('default', {
  primary: 'blue',
  accent: 'red',
  warn: 'red',
  background: 'grey'
})

/* eslint-disable no-new */
new Vue({
  el: 'body'
  components: { App },
  render: h => h(App)
})

App.vue:

<template>
  <div id="app">
    <hello></hello>
    <md-button>Default</md-button> // this doesnt work!
  </div>
</template>

<script>

export default {
  components: {
    'hello': Hello,
    'documents': Documents,
    'Home': Home
  },
  data: function () {
    return {

    }
  }
}
</script>

Answer 1

Have you tried terminating the job in node and serving again? I havent used vue-material myself but I find this issue cropped up a few times while I was dabbling in vue.

Answer 2

Is your vue-material.css being imported correctly?

Try changing import 'vue-material/dist/vue-material' to import 'vue-material/dist/vue-material.css'

I can't tell from your question if this is your problem or whether you are having problems with the hot reloading. Might try to describe what you see in the browser.