V-Navigation-Drawer Close on LG Screen

The V-Navigation-Drawer component in Vuetify provides a convenient way to build a sliding drawer menu in your web application. It allows you to show or hide your menu on different screen sizes. However, you may want to close the drawer automatically when the screen size is large, such as on a desktop or a laptop.

In this article, we'll show you how to achieve this behavior with Vuetify's V-Navigation-Drawer component.

Using the Responsive Prop

The V-Navigation-Drawer component has a responsive prop that allows you to specify the breakpoints at which the drawer will be shown or hidden. By default, it is set to 'sm' (small screen) which means the drawer will be hidden when the screen width is less than or equal to 600 pixels.

You can set the responsive prop to an array of breakpoints to control the visibility of the drawer on different screen sizes. For example, if you want to hide the drawer on screens larger than the 'lg' breakpoint, you can set the responsive prop like this:

<template>
  <v-navigation-drawer
    v-model="drawer"
    app
    :responsive="['sm', 'md', 'lg']"
  >
    <!-- drawer content here -->
  </v-navigation-drawer>
</template>

<script>
export default {
  data() {
    return {
      drawer: false
    }
  }
}
</script>

In this example, the drawer will be shown on screens smaller than 'lg', but hidden on screens larger than or equal to 'lg'. Therefore, when the user resizes the browser window to a large size, the drawer will be closed automatically.

Conclusion

Using the V-Navigation-Drawer component in Vuetify, you can easily create a sliding drawer menu for your web application. To make it more user-friendly, you can use the responsive prop to control the visibility of the drawer on different screen sizes. By setting the breakpoints appropriately, you can make sure the drawer is closed automatically when it's not needed.