Vuetify Navigation Drawer Starts Closed and Then Opens a Second Later

Question

I have set up a Vuetify Navigation Drawer on NuxtJS using Vuex to handle the state of the drawer. Everything works fine except for one problem -- namely, that when I load the page on a desktop, the drawer starts out closed and then a split second later opens up. Here is a video of my doing a hard refresh to see what I am referring to: https://www.loom.com/share/477eb0933b3840d2bf7a9b55aaa8e934

Here is my code:

//app-bar.vue
<template>
  <v-app-bar app color="indigo" dark>
    <v-app-bar-nav-icon @click.stop="mainDrawer = !mainDrawer" />
    <v-toolbar-title>Application</v-toolbar-title>
  </v-app-bar>
</template>

<script>
export default {
  computed: {
    mainDrawer: {
      get() {
        return this.$store.getters.getMainDrawer;
      },
      set(value) {
        this.$store.dispatch("toggleMainDrawer", value);
      }
    }
  }
};
</script>

// nav-drawer.vue
<template>
  <v-navigation-drawer v-model="mainDrawer" app>
    <v-list dense>
      ...LIST_ITEMS
    </v-list>
  </v-navigation-drawer>
</template>

<script>
export default {
  computed: {
    mainDrawer: {
      get() {
        return this.$store.getters.getMainDrawer;
      },
      set(value) {
        this.$store.dispatch("toggleMainDrawer", value);
      }
    }
  }
};
</script>

// index.js (vuex file)
import Vuex from "vuex";

const createStore = () => {
  return new Vuex.Store({
    state: {
      mainDrawer: null
    },
    getters: {
      getMainDrawer: state => state.mainDrawer
    },
    mutations: {
      toggleMainDrawer(state, value) {
        state.mainDrawer = value;
      }
    },
    actions: {
      toggleMainDrawer({ commit }, value) {
        commit("toggleMainDrawer", value);
      }
    }
  });
};

export default createStore;

Any idea why this is happening and what I can do to change it. I should note, that when I run the page using Android Studio Emulator it works just fine. It's only desktop that I have an issue.

Thanks.

Sutra

I just came across this same issue. Any chance you found an answer? – Pawl

Answer 1

I had the same issue and tried many ways to fix it. The only way i have found so far is to use the navigation drawer prop called disable-resize-watcher . Its default value is false, so when you reload the page for some reason the nav drawer opens up. Setting this prop's value to true will fix the problem.

Dugger

Thanks! It was driving me nuts; for me this issue popped after an update.. – Copycat

I am facing the same issue and disable-resize-watcher is not work for me – Crusted

adding disable-resize-watcher worked for me thanks – Tyro

disable-resize-watcher not working – Decoration

Answer 2

Few things that you should look into to fix this:

• Are you using v-app as the root of your appliacation. According to this doc, it is mandatory to do it.
• Do you really need app prop on your v-navigation-bar and v-app-bar. The documentation describes it's use:

  Designates the component as part of the application layout. Used for dynamically adjusting content sizing. Components using this prop should reside outside of v-content component to function properly.

Lankford