[Vuejs]-Vuetify, how to close drawer?

by

8👍

The drawer data key is looking for a boolean, if it’s truthy the navigation drawer will show. So, you can add @click="drawer = false" to your menu links, and it will close the draw when any link is clicked.

Example in the docs: https://vuetifyjs.com/components/navigation-drawers#example-6

👤Christopher Lawes

1👍

I handled this by making the drawer in my app a child of the route that uses it. The isOpen property is managed in the parent. I pass isOpen as a prop to the drawer and emit open and close events as appropriate.

Oh, I also found that timeouts are necessary to ensure the open / close animations work correctly. Someone please let me know if you found a better way to handle animations as this feels a little wonky.

I handle a few other things, like right/left justify and a return route, but ignore the noise if it isn’t helpful.

Here’s a parent loading the component

<my-drawer
  :iconName="'my_icon'"
  :isOpen="drawerIsOpen"
  :justify="'right'"
  :returnRoute="'home'"
  @close="drawerIsOpen = false"
  @open="drawerIsOpen = true"
>
// ...
</my-drawer>

Here are the methods from within the drawer component:

data() {
  return {
    closeDelay: 500,
    width: 0,
  };
},
methods: {      
  closeBtnClick() {
    this.$emit('close');
    setTimeout(() => { this.$router.push(this.returnRoute); }, this.closeDelay);
  },

mounted() {
  setTimeout(() => { this.$emit('open'); }, this.closeDelay);
},
👤Nathan Agersea

Leave a comment