Vue-material: md-app and md-app-toolbar in extra vue component

Created on 21 Nov 2017 · 5Comments · Source: vuematerial/vue-material

Steps to reproduce

What I try to do:

I have a SPA with the entrance Root.vue

`<div class="page-container" id="app">`
    `<md-app md-waterfall md-mode="fixed">`
        `<my-navbar></my-navbar>`
        `<md-app-content>`
            `<router-view class="router"></router-view>`
        `</md-app-content>`
    `</md-app>`
`</div>`

I of course import into the Root.vue

import MyNavbar from './components/general/navbar

And in the navbar.vue I try to add the Toolbar

`<template>`
  `<div>`
      `<md-app-toolbar class="md-large md-primary">`
        `<div class="md-toolbar-row">`
          `<div class="md-toolbar-section-start">`
            `<md-button class="md-icon-button" @click="menuVisible = !menuVisible">`
             ` <md-icon>menu</md-icon>`
            `</md-button>`
          `</div>`
      `</md-app-toolbar>`
      `<md-app-drawer :md-active.sync="menuVisible">`
        `<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>`
      `</md-app-drawer>`
  `</div>`
`</template>`

Somehow this is not working, it is working well if I add the md-app-toolbar directly in the md-app tag,
but it think it is pretty useful, to separate the navigation to another file.

The drawer is working fine, but the toolbar is just not rendered.

Am I doing something wrong, or is this not featured?
Thanks in advance

documentation

Source

jackovsky8

Most helpful comment

You can try this:

<div class="page-container" id="app">
    <md-app md-waterfall md-mode="fixed">
        <my-navbar slot="md-app-toolbar"></my-navbar>
        <md-app-content>
            <router-view class="router"></router-view>
        </md-app-content>
    </md-app>
</div>

It's undocumented, but slot="md-app-toolbar" should work. I will add a not on the documentation website. For most users the <md-app-toolbar> as a child element will work just fine, but I agree that is better to separate the content.

marcosmoura on 24 Nov 2017

👍4 😄2

All 5 comments

You won't be able to use md-app-toolbar correctly if you choose to extract it out. I agree that it would be nice to separate into another component, but unfortunately referring to ducmentation at https://vuematerial.io/components/app says

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

md-app-toolbar: Creates the toolbar accepting any options from the md-toolbar
md-app-drawer: Places the drawer panel, that also accepts any options from the md-drawer. You can have a left or right placed drawers. Or both.
md-app-content: Here you will add any content for your page.
Any other tag passed as a direct child of the md-app tag will be ignored. The component will only look for those three tags and choose the right placement for them.

You can possibly work around this by moving your toolbar into the md-app-content component and using a regular md-toolbar instead, though you probably lose some of the functionalities of md-app-toolbar

emman27 on 22 Nov 2017

Okay, thanks! Did not see that.

jackovsky8 on 22 Nov 2017

You can try this:

<div class="page-container" id="app">
    <md-app md-waterfall md-mode="fixed">
        <my-navbar slot="md-app-toolbar"></my-navbar>
        <md-app-content>
            <router-view class="router"></router-view>
        </md-app-content>
    </md-app>
</div>

marcosmoura on 24 Nov 2017

👍4 😄2

What does the child component code look like with the slot example? I'm having trouble.