'Vue/Vuetify - breakpoints based on component size

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?

vue.jsvuetify.js


Solution 1:[1]

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Oleg Naumov

Related Questions