Vuetify

Store

For Enterprise

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.

Material Design Viewport Breakpoints
DeviceCodeTypesRange
Extra smallxssmall to large handset< 600px
Smallsmsmall to medium tablet600px > < 960px
Mediummdlarge tablet to laptop960px > < 1264px*
Largelgdesktop1264px* > < 1904px*
Extra largexl4k and ultra-wides> 1904px*
* -16px on Desktop

The breakpoint service is a programmatic way to access Vuetify viewport breakpoints; xs, sm, md, lg, and xl. This service exposes the the current window's height and width, the name of the current breakpoint and more; e.g. A value of md for name property indicates that the screen is currently on the medium breakpoint. Finally, check the mobile status of your application with the mobile property. These properties are accessible globally via this.$vuetify.breakpoint.

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 $grid-breakpoints SASS variables (please see SASS variables). 2. To use the same values on the javascript side of things you must pass them during the application bootstrap like so:

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.

We can simplify this process by simply checking the value of the mobile property on the $vuetify.breakpoint object.

Ready for more? Continue reading with:

Caught a mistake or want to contribute to the documentation? Edit Layout or Content on GitHub!