Breakpoints

Vuetify has a 12 point grid system. Built using flex-box, the grid is used to layout an application's content. It contains 5 types of media breakpoints that are used for targeting specific screen sizes or orientations. The props for grid components are actually classes that are derived from their defined properties. This allows you to easily specify these helper classes as props, while still providing the classes to be used anywhere.

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

Breakpoint object

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 $vuetify.breakpoint.

export default {
  mounted () {
    console.log(this.$vuetify.breakpoint)
  },
  computed: {
    imageHeight () {
      switch (this.$vuetify.breakpoint.name) {
        case 'xs': return '220px'
        case 'sm': return '400px'
        case 'md': return '500px'
        case 'lg': return '600px'
        case 'xl': return '800px'
      }
    }
  }
}

This object contains the same semantic properties that you are already used to using from the grid system. 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.

export default {
  data: () => ({
    isMobile: false
  }),
  mounted () {
    this.onResize()
    window.addEventListener('resize', this.onResize, { passive: true })
  },
  beforeDestroy () {
    if (typeof window !== 'undefined') {
      window.removeEventListener('resize', this.onResize, { passive: true })
    }
  },
  methods: {
    onResize () {
      this.isMobile = window.innerWidth < 600
    }
  }
}

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.

<v-dialog :fullscreen="$vuetify.breakpoint.xsOnly">
    ...
</v-dialog>

Below you can see the complete definition of the $vuetify.breakpoint object.

    {
      xs: boolean
      xsOnly: boolean
      xsAndUp: boolean
      sm: boolean
      smOnly: boolean
      smAndDown: boolean
      smAndUp: boolean
      md: boolean
      mdOnly: boolean
      mdAndDown: boolean
      mdAndUp: boolean
      lg: boolean
      lgOnly: boolean
      lgAndDown: boolean
      lgAndUp: boolean
      xl: boolean
      xlOnly: boolean
      xlAndDown: boolean
      name: ('xs' | 'sm' | 'md' | 'lg' | 'xl')
      width: number
      height: number
    }