Vue-material: Vue Material components don't render inside Vue single file components

[Akhawais]

Whenever I try to use Vue Material components inside a .vue file, they seem to load fine (Checked via Vuejs Devtools) but they don't render anything in the DOM.

<template>
    <div>
        Test
    <md-layout md-gutter v-for="chunk in entries">
        <md-layout md-flex-xsmall="100" md-flex-small="33" md-flex-medium="33"  md-flex-large="33" v-for="entry in chunk">
            <md-card>
                <md-card-area>
                    <md-card-header>
                        <div class="md-title"><a href="">{{ entry.test }}</a></div>
                    </md-card-header>

                    <md-card-content>
                        Test
                    </md-card-content>
                </md-card-area>
            </md-card>
        </md-layout>
    </md-layout>
    </div>
</template>
<style>
</style>
<script>
    export default{
        data(){
            return{
                entries: app.entries,
            }
        }
    }
</script>

Test.vue

window.Vue = require('vue');
window.VueMaterial = require('vue-material');
Vue.use(VueMaterial);
...
import Test from './components/Test.vue';

var app = new Vue({
    el: '#app',
    data: {
         entries: []
    },

    components: {
        'test':     Test
    }
});

app.js

Using Laravel Mix to compile everything (which is basically a wrapper for Webpack)

Any help would be appreciated

[d3radicated]

You forgot to import Vue Material itself.

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