Vuetify add class on certain grid size

Question

I'm trying to only add a class to the v-flex if the grid size of the element is xs (so only on mobile). The code below shows the thought process behind it. However this doesn't work, so how can I apply a class that only on a certain grid size?

   <v-flex xs12 lg6 :class="{'roomPadding': xs != visible }">
      <p> My room </p>
   </v-flex>

Answer 1

use breakpoint:

:class="{'roomPadding': $vuetify.breakpoint.xs}"

See docs about breakpoint object and visibility

If you want to apply the class to every breakpoint (i.e. screen-size) except xs, you can use:

:class="{'roomPadding': !$vuetify.breakpoint.xs}" (notice !)
or
:class="{'roomPadding': $vuetify.breakpoint.smAndUp}"

because breakpoints return boolean value.
You can get current breakpoint name (string) with vuetify.breakpoint.name