Search code examples
vuetify.jsvuejs3vuetifyjs3

Vuetify: Make v-navigation-drawer take up all space to top left corner instead of v-app-bar

I have a VuetifyJS (v3) page with a v-app-bar and v-navigation-drawer both present, and both with the app prop set. The v-app-bar takes up all the horizontal space extending from the top left corner. The v-navigation-drawer starts from underneath the v-app-bar. How do reverse this relationship? I.e. make the v-navigation-drawer take up all vertical space starting from the top left corner and have the v-app-bar start from the side of the v-navigation-drawer? The vuetifyjs.com docs pages actually do this (see below). So my Q is how do I do what vuetifyjs.com is doing here?

enter image description here

enter image description here

Solution

  • Documentation for this is here: https://next.vuetifyjs.com/en/features/application-layout/

    The way layout components arrange themselves is controlled by the order they appear in the template, and can be adjusted with the order prop which behaves like order in CSS.