I have made a simple app bar and navigation drawer page. But my v-navigation-drawer ponent doesn't seem to be placed under my v-app-bar ponent. The official vuetify documentation on the v-app ponent makes it clear that this shouldn't be this way (How it should be).

My goal is to use the official layout because it is prettier than what I have now. I have tried using numerous props on both the v-app-bar and v-navigation-drawer ponent, but I can't seem to get it to work.

EDIT: My code is loaded as a ponent in my main App.vue

My current code:

<template>
  <div>
    <v-app-bar app clipped-leftS flat dark>
      <v-toolbar-title>
        <span class="first-word font uppercase">hi</span>
        <span class="second-word font uppercase">stackoverflow</span>
      </v-toolbar-title>
      <v-spacer></v-spacer>
    </v-app-bar>

    <v-navigation-drawer app flat dark mini-variant permanent expand-on-hover>
      <v-list>
        <v-list-item class="px-2">
          <v-list-item-avatar>
            <v-img src=".jpg"></v-img>
          </v-list-item-avatar>

          <v-list-item-title>John Doe</v-list-item-title>
        </v-list-item>
        <v-list-item v-for="item in navbarlist" :key="item.route" :to="item.route">
          <v-list-item-icon>
            <v-icon>{{ item.icon }}</v-icon>
          </v-list-item-icon>
          <v-list-item-content>{{ item.text }}</v-list-item-content>
        </v-list-item>
      </v-list>
    </v-navigation-drawer>
  </div>
</template>

<script>
export default {
  data: () => ({
    navbarlist: [
      { icon: "mdi-view-dashboard", text: "Dashboard", route: "/" },
      { icon: "mdi-upload", text: "Upload", route: "/upload" },
    ],
  }),
};
</script>

<style>
.font {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}
.uppercase {
  text-transform: uppercase;
}
.first-word {
  font-weight: 400;
}
.second-word {
  font-weight: 200;
  color: grey;
}
.item-tile-icon {
  color: black;
}
</style>

I have made a simple app bar and navigation drawer page. But my v-navigation-drawer ponent doesn't seem to be placed under my v-app-bar ponent. The official vuetify documentation on the v-app ponent makes it clear that this shouldn't be this way (How it should be).

My goal is to use the official layout because it is prettier than what I have now. I have tried using numerous props on both the v-app-bar and v-navigation-drawer ponent, but I can't seem to get it to work.

EDIT: My code is loaded as a ponent in my main App.vue

My current code:

<template>
  <div>
    <v-app-bar app clipped-leftS flat dark>
      <v-toolbar-title>
        <span class="first-word font uppercase">hi</span>
        <span class="second-word font uppercase">stackoverflow</span>
      </v-toolbar-title>
      <v-spacer></v-spacer>
    </v-app-bar>

    <v-navigation-drawer app flat dark mini-variant permanent expand-on-hover>
      <v-list>
        <v-list-item class="px-2">
          <v-list-item-avatar>
            <v-img src="https://randomuser.me/api/portraits/men/11.jpg"></v-img>
          </v-list-item-avatar>

          <v-list-item-title>John Doe</v-list-item-title>
        </v-list-item>
        <v-list-item v-for="item in navbarlist" :key="item.route" :to="item.route">
          <v-list-item-icon>
            <v-icon>{{ item.icon }}</v-icon>
          </v-list-item-icon>
          <v-list-item-content>{{ item.text }}</v-list-item-content>
        </v-list-item>
      </v-list>
    </v-navigation-drawer>
  </div>
</template>

<script>
export default {
  data: () => ({
    navbarlist: [
      { icon: "mdi-view-dashboard", text: "Dashboard", route: "/" },
      { icon: "mdi-upload", text: "Upload", route: "/upload" },
    ],
  }),
};
</script>

<style>
.font {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}
.uppercase {
  text-transform: uppercase;
}
.first-word {
  font-weight: 400;
}
.second-word {
  font-weight: 200;
  color: grey;
}
.item-tile-icon {
  color: black;
}
</style>

• javascript
• vue.js
• vuetify.js

• 1 You navigation-drawer is on the left, should it be clipped-left? vuetifyjs./en/ponents/app-bars/#api – Excalibaard Commented Jul 30, 2020 at 9:34
• If I clip it left, it overlays with the drawer. It seems that the two aren't 'connected' at all (if that makes sense). That's why I clipped it right. clipped-left – tjallo Commented Jul 30, 2020 at 9:55
• Okay, so in my App.vue this ponent is already wrapped in an v-app ponent. So I changed the v-app to div in my current code, and now the clipped-left does work as intended (not overlapping). But the layout is still not as intended. (edited the original post with my current code.) – tjallo Commented Jul 30, 2020 at 10:02
• I was getting the same error, just had to include 'app' on both <v-bar-app> and <v-navigation-drawer> and it worked – Huzaifa Commented Feb 4, 2021 at 10:00

1 Answer 1

I fixed it by adding clipped to my v-navigation-drawer ponent.

So my final code is:

<template>
  <div>
    <v-app-bar app clipped-left flat dark>
      <v-toolbar-title>
        <span class="first-word font uppercase">hi</span>
        <span class="second-word font uppercase">stackoverflow</span>
      </v-toolbar-title>
      <v-spacer></v-spacer>
    </v-app-bar>

    <v-navigation-drawer app clipped flat dark expand-on-hover>
      <v-list>
        <v-list-item class="px-2">
          <v-list-item-avatar>
            <v-img src="https://randomuser.me/api/portraits/men/11.jpg"></v-img>
          </v-list-item-avatar>

          <v-list-item-title>John Doe</v-list-item-title>
        </v-list-item>
        <v-list-item v-for="item in navbarlist" :key="item.route" :to="item.route">
          <v-list-item-icon>
            <v-icon>{{ item.icon }}</v-icon>
          </v-list-item-icon>
          <v-list-item-content>{{ item.text }}</v-list-item-content>
        </v-list-item>
      </v-list>
    </v-navigation-drawer>
  </div>
</template>