Sometimes, we want to change font size in Vuetify based on viewport.

In this article, we’ll look at how to change font size in Vuetify based on viewport.

How to change font size in Vuetify based on viewport?

To change font size in Vuetify based on viewport, we can apply Vuetify font size classes based on the breakpoint.

For instance, we write

<template>
  <div>
    <div class="{'subheading': $vuetify.breakpoint.xs}">...</div>
  </div>
</template>

to set the div’s class to subheading when the breakpoint is xs or higher by setting subheading to $vuetify.breakpoint.xs.

Conclusion

To change font size in Vuetify based on viewport, we can apply Vuetify font size classes based on the breakpoint.