While I was working on a work-related project recently, I came across the need to resize my v-navigation-drawer component so that I can toggle it to be either visible or hidden on smaller screens.
Turns out that with Vuetify, you can take advantage of the props provided by the API to improve mobile responsiveness without having to have media queries or extra computed props. Using the permanent prop for the v-navigation-drawer component, I was able to selectively make the drawer permanent (meaning always visible) only on larger screens by binding :permanent to a vuetify breakpoint ($vuetify.breakpoint.mdAndUp). The colon is shorthand for v-bind: which I am using here to apply dynamic behaviour to the permanent prop.
When the screen size gets smaller, the navigation drawer automatically changes to become the temporary variant, meaning it becomes hidden again when anywhere on the screen outside the drawer is clicked. This means that the drawer property might also be working as part of a computed property under the hood since clicking anywhere outside the drawer successfully hides the drawer and sets drawer to false. Finally, I added a v-model prop set to drawer so that whenever the toggle button is clicked (this button is only visible on smaller screen sizes), the drawer becomes visible again.
Here’s the code for the drawer. I am using Vuetify 1.5.
