Vuetify Layout with expandable navigationdrawer

Question

so I included Vuetify in my Vue project and wanted to build my basic layout featuring an Navigation Drawer like in the Example called "Mini" here.

So the navigation drawer only shows Icons but on click it expands to show some text too. You can see my current state here.

My Problem now is, that the actual content of the page should be placed on the right side next to this drawer and change in size when the drawer gets expanded. I placed one div with text there for testing, and it always gets placed beneath the navigation drawer. Also the navigation drawer should take up the whole screen height. What am I doing wrong here?

This is the template-segment of the component:

<template>
  <div>
    <v-navigation-drawer
      v-model="drawer"
      :mini-variant.sync="mini"
      permanent
    >
      <v-list-item class="px-2">
        <v-btn
            fab
            small
            onclick="window.location.href='/controlCenter'"
        >
            <v-icon>mdi-plus</v-icon>
        </v-btn>

        <v-list-item-title> Just some test stuff </v-list-item-title>

        <v-btn
          icon
          @click.stop="mini = !mini"
        >
          <v-icon>mdi-chevron-left</v-icon>
        </v-btn>
      </v-list-item>

      <v-divider></v-divider>

      <v-list dense>
        <v-list-item
          v-for="(block, index) in layouts2"
          v-bind:key="`layout-button-${block._uid}`">
          <v-list-item-icon>
            <v-icon
            v-on:click="switchLayouts(block._uid)">
                mdi-home-city
            </v-icon>
          </v-list-item-icon>

          <v-list-item-content>
            <v-list-item-title> Layout {{index + 1}} </v-list-item-title>
          </v-list-item-content>
        </v-list-item>
      </v-list>
    </v-navigation-drawer>

    <div>
      normal content here
    </div>

  </div>
</template>

I also saw this same question here but if I try this, i get quite some errors. So after reading this, I tested the following. But I must be doing something wrong.

<template>
  <div>
    <v-navigation-drawer
      app //use app like suggested
      v-model="drawer"
      :mini-variant.sync="mini"
      permanent
    >
      <v-list-item class="px-2">
        <v-btn
            fab
            small
            onclick="window.location.href='/controlCenter'"
        >
            <v-icon>mdi-plus</v-icon>
        </v-btn>

        <v-list-item-title> Just some test stuff </v-list-item-title>

        <v-btn
          icon
          @click.stop="mini = !mini"
        >
          <v-icon>mdi-chevron-left</v-icon>
        </v-btn>
      </v-list-item>

      <v-divider></v-divider>

      <v-list dense>
        <v-list-item
          v-for="(block, index) in layouts2"
          v-bind:key="`layout-button-${block._uid}`">
          <v-list-item-icon>
            <v-icon
            v-on:click="switchLayouts(block._uid)">
                mdi-home-city
            </v-icon>
          </v-list-item-icon>

          <v-list-item-content>
            <v-list-item-title> Layout {{index + 1}} </v-list-item-title>
          </v-list-item-content>
        </v-list-item>
      </v-list>
    </v-navigation-drawer>
    <v-content>  // use v-content like suggested
      <p>Hi</p>
    </v-content>
  </div>
</template>

The errors are

vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in created hook: "TypeError: Cannot read property 'register' of undefined" & [Vue warn]: Error in render: "TypeError: Cannot read property 'bar' of undefined" & [Vue warn]: Error in callback for watcher "isActive": "TypeError: Cannot read property 'register' of undefined" Some of them also appear several times.

Thanks for your help!

NotARobot NotARobot · Accepted Answer · 2020-05-25T11:15:07

I was able to solve this problem by simlpy moving the navigation drawer out of the component and instead using it directly in the App.vue file.

Vuetify Layout with expandable navigationdrawer

1 Answers