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.

I just came across this same issue. Any chance you found an answer? — berko

Kostadin Terziev Kostadin Terziev · Accepted Answer · 2021-01-03T08:12:18

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.

Vuetify Navigation Drawer Starts Closed and Then Opens a Second Later

2 Answers