Responsive Tabs with Vuetify

Question

I have a component that have a v-tab list of items and, in certain resolutions, it works great. However, I saw that when it gets lower than 600px width, the tabs gets weird, they break a little and move off their space.

I'm thinking of displaying it in a vertical way for lower resolutions, however, I can't override the tabs style even putting everything with the !important attribute. I see that Vuetify has a prop called vertical, but, is it possible to use this kind of prop in a conditional way? Let's say, over 600px, I don't want the vertical prop and under it, I want.

Can we make something like this in Vue?

user_8234097 · Answer

maybe the $vuetify breakpoints feature is useful for you. Set the prop with a computed property depending on current $vuetify breakpoint.

user_12542704 · Answer

is it possible to use this kind of prop in a conditional way?

Yes, you could do something like this:

or:

More information here: https://vuetifyjs.com/en/features/breakpoints/#breakpoint-service

Responsive Tabs with Vuetify

2 Answers