Vuetify breakpoints not working in Nuxt.js

问题

I'm working on a project using Nuxt.js as SSR engine and Vuetify as styling framework. In one of my templates I have such code:

<v-layout row wrap align-center 
 :class="{ 'mb-4': $vuetify.breakpoint.smAndDown }">...</v-layout>

As you can see, I want to apply mb-4 class only if I am on small screens and smaller ones. But when I load this on desktop large screen and inspect element, this class is attached even though screen resolution does not match logic for applying this class. However, styling is back to expected when I resize browser window.

I've tried to manually dispatch 'resize' event in lifecycle hook:

mounted() {
   window.dispatchEvent(new Event('resize')); 
}

But it didn't help. Even if I wrap it in setTimeout, still no luck.

UPD: found a workaround, but still think it is not the best solution: changed

:class="{ 'mb-4': $vuetify.breakpoint.smAndDown }"

to

:class="{ 'mb-4': isMounted && $vuetify.breakpoint.smAndDown }"

and in mounted lifecycle hook added: this.isMounted = true

UPDATE: while digging in Vuetify source code found out, that it checks window width with 200ms delay as window width check is costly operation. That is why we have delay.

来源：https://stackoverflow.com/questions/50991071/vuetify-breakpoints-not-working-in-nuxt-js