Vue/Vuetify - breakpoints based on component size

user_1247113 0
Viewed 66

As far as I can see, Vuetify allows you to define breakpoints based on viewport size. Is it also possible to define breakpoints based on the size of the component? E.g.

  • when several components are shown on an overview page, it would use a more "compact" layout to be able to show the components side by side on large screens.
  • when only one component is shown it could take up more space (on large screens).
  • the "compact" layout could also be used when only one component is shown on a small screen.
  • on small screens, the overview page could show several components vertically rather than side by side.

Or can you recommend a better approach to this?

vuetify.js vue.js
1 Answers

As far as I know, there is no such feature in Vuetify. However, you can always hide v-col containing the component and other columns will take up the freed-up space.

enter image description here

For example: https://codepen.io/olegnaumov/pen/rNpzvEX

user_72647990
Related