quiero usar vue-material al momento de colocar etiquetas como mg-avatar etc funciona en el componente App.vue y luego cuando creo un componente llamado Home.vue y quiero colocar otras etiquetas como md imput o culquier otra me tira un error de que el template funciona para una ruta que es la de app.vue y no me deja colocar nada en otros componentes
Mi main.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'
import Home from './components/Home.vue'
import VueMaterial from 'vue-material'
Vue.use(VueRouter);
Vue.use(VueMaterial);
Vue.component('home',Home);
const routes = [
{
path:'/',
component: Home
},
{
path:'/home',
component: Home
}
];
const router = new VueRouter({
routes,
mode: 'history'
});
new Vue({
el: '#app',
router,
render: h => h(App)
});
Vue.material.registerTheme('default', {
primary: 'blue',
accent: 'red',
warn: 'red',
background: 'grey'
})
mi App.vue
<template>
<div id="app">
<md-toolbar>
<h1 class="md-title" style="flex: 1">MichiGuau</h1>
<md-avatar class='md-large'>
<img src="./assets/logo.png" alt="Avatar">
</md-avatar>
<md-button class="md-icon-button">
<md-icon>more_vert</md-icon>
</md-button>
</md-toolbar>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
}
}
}
</script>
mi Home.vue // es mi componente nuevo al cuel no le funcionan las etiquetas de vue-material
<template>
<h1 class="md-title" style="flex: 1">{{title}}</h1>
</template>
<script>
export default {
name: 'home',
data(){
return{
title: 'Bienvenido a MichiGuau'
}
}
}
</script>