vue.js - Vuetify: Changing navbar entirely at breakpoint

Question

I'm using nuxt and vuetify, and I have a pretty normal default layout with a navbar added, as seen below:

<v-app dark>
 <v-app-bar height="60" max-height="60" app>
   <Navbar />
 </v-app-bar>
...
<v-app />

With Navbar being a custom component. However I need to swap out the current component (as in, totally change the grid-based layout to the point that adding a few breakpoints for justify and align content and whatnot would not suffice) for another one, containing most of the components of the first Navbar, just with a different layout.

What would be the most efficient method for swapping out the two different layouts/components at different screen sizes?

I was thinking of using vue-mq but I was wondering if there were better ways of doing this.

question from:https://stackoverflow.com/questions/65560133/vuetify-changing-navbar-entirely-at-breakpoint

Answer 1

Vuetify provides breakpoints by default which you can access through this.$vuetify.breakpoint inside your Vue components. Creating a computed prop that is pointing to the breakpoint props and conditionally rendering NavBar or another component depending on the computed prop could be the way.

More information about Vuetify Breakpoint Service Object