title: Vuetify breakpoints not working in Nuxt.js
body: <p>I'm working on a project using <em>Nuxt.js</em> as SSR engine and <em>Vuetify</em> as styling framework. In one of my templates I have such code:</p>
  
  <pre><code>&lt;v-layout row wrap align-center 
   :class="{ 'mb-4': $vuetify.breakpoint.smAndDown }"&gt;...&lt;/v-layout&gt;
  </code></pre>
  
  <p>As you can see, I want to apply <strong>mb-4</strong> 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.</p>
  
  <p>I've tried to manually dispatch <strong>'resize'</strong> event in lifecycle hook:</p>
  
  <pre><code>mounted() {
     window.dispatchEvent(new Event('resize')); 
  }
  </code></pre>
  
  <p>But it didn't help. Even if I wrap it in <code>setTimeout</code>, still no luck.</p>
  
  <p><strong>UPD:</strong> found a workaround, but still think it is not the best solution:
  changed</p>
  
  <pre><code>:class="{ 'mb-4': $vuetify.breakpoint.smAndDown }"
  </code></pre>
  
  <p>to</p>
  
  <pre><code>:class="{ 'mb-4': isMounted &amp;&amp; $vuetify.breakpoint.smAndDown }"
  </code></pre>
  
  <p>and in <code>mounted</code> lifecycle hook added: <code>this.isMounted = true</code></p>
  
  <p>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.</p>