Vue.JS Component Not Appearing

Question

I'm attempting to use Vue Material on a Vue Router Dashboard page, but I'm trying to store the panel in a separate file. I'm absolutely clueless as to why this is not working, I've spent the last 2 hours googling this issue and I don't have anything. Even using the Vue chrome extension doesn't show it, which rules out styling. Putting a red background color on the component does work, yet it still does not work. And also, please forgive my bad code-- I'm about 3 days into Vue.

<template>
    <div class="page-container md-layout-row">
        <md-app>
            <md-app-toolbar class="md-primary">
                <span class="md-title">{{ usernameTitleCase }}</span>
            </md-app-toolbar>
            <PagePanel></PagePanel>
            <md-app-content>
                <div class="user">
                    <h1>{{ user.username }}</h1>
                    <h2>{{ user.customThing }}</h2>
                    <h3>{{ user.id }}</h3>
                </div>
            </md-app-content>
        </md-app>
    </div>
</template>

<script>
    import PagePanel from '@/components/panel.vue';

    export default {
        name: 'Dashboard',
        components: {
            PagePanel
        },
        data() {
            return {}
        },
        computed: {
            usernameTitleCase() {
                const letters = this.user.username.split('');
                letters[0] = letters[0].toUpperCase();
                return letters.join('')
            }
        },
        created() {
            this.user = JSON.parse(localStorage.getItem('user'));
        }
    }
</script>

<style>
    .md-app {
        min-height: 350px;
    }

    .md-drawer {
        width: 230px;
        max-width: calc(100vw - 125px);
    }
</style>

Component File Here:

<template>
    <md-app-drawer md-permanent="full">
        <md-toolbar class="md-transparent" md-elevation="0">
            Navigation
        </md-toolbar>

        <md-list>
            <md-list-item>
                <md-icon>move_to_inbox</md-icon>
                <span class="md-list-item-text">Inbox</span>
            </md-list-item>

            <md-list-item>
                <md-icon>send</md-icon>
                <span class="md-list-item-text">Sent Mail</span>
            </md-list-item>

            <md-list-item>
                <md-icon>delete</md-icon>
                <span class="md-list-item-text">Trash</span>
            </md-list-item>

            <md-list-item>
                <md-icon>error</md-icon>
                <span class="md-list-item-text">Spam</span>
            </md-list-item>
        </md-list>
    </md-app-drawer>
</template>

<script>
    export default {
        name: 'PagePanel'
    }
</script>

I'm also NOT in production mode and am not getting any errors in console.

Answer 1

It's not easy to spot, but towards the end of this page of the VueMaterial docs, it says:

In these examples we have 3 distinct areas: Toolbar, Drawer and Content. You should create them using the following tags:

• md-app-toolbar: ...
• md-app-drawer: ...
• md-app-content: ...

Any other tag passed as a direct child of the md-app tag will be ignored. The component will only look for these three tags and choose the right placement for them.

Fortunately, they added the ability to use slots (but didn't document them, you have to look at merge requests to see it). You can use them like so:

<template>
    <div class="page-container md-layout-row">
        <md-app>
            <md-app-toolbar> ... </md-app-toolbar>
            <page-panel slot="md-app-drawer"></page-panel>
            <md-app-content> ... </md-app-content>
        </md-app>
    </div>
</template>

However, note that the slot value can only be one of the 3 values defined above.