With Vuetify you can control the layout of your application depending on the window size. That can be achieved for example by using specific grid props or helper classes (i.e. display) that will target particular breakpoint. Vuetify provides 5 predefined breakpoints defined as described below, but you can easily change them to meet your needs.
|Extra small||xs||small to large handset||< 600px|
|Small||sm||small to medium tablet||600px > < 960px|
|Medium||md||large tablet to laptop||960px > < 1264px*|
|Large||lg||desktop||1264px* > < 1904px*|
|Extra large||xl||4k and ultra-wides||> 1904px*|
|* -16px on Desktop|
Vuetify converts the available breakpoints into an accessible object from within your application. This will allow you to assign/apply specific properties and attributes based upon viewport size. The object is available at
You can define your own breakpoint threshold pixel values, but it is currently a two-step process: 1. To update the styles you will have to override the
Let's try a real world example. You have a
v-dialog component that you want to convert to a full-screen dialog on mobile devices. Normally you would need to bind watchers for the viewport size, and/or check whenever the page loads.
That's a lot of boilerplate to write. Even if you opt to use the built in v-resize directive, you are still going to have to define a resize method. With the breakpoint object you can completely skip this logic and get back to building your application.
Ready for more? Continue reading with: