title: Conditionally rendering NuxtJS component based on viewport
body: <p>I wonder how conditionally rendering <code>NuxtJs</code> components based on viewport width. </p>
  
  <p>so;</p>
  
  <p>in traditional css way we can make it like that: </p>
  
  <pre><code>&lt;div class="isMobile"&gt;
  &lt;!-- mobile content --&gt;
  &lt;/div&gt;
  
  &lt;div class="isDesktop"&gt;
  &lt;!-- desktop content --&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>in this case this solution working. </p>
  
  <pre><code>@media only screen and (max-width: 768px) {
    .isDesktop {display:none;}
    .isMobile {display:block}
  }
  </code></pre>
  
  <p>But with this solution isDesktop and isMobile divs rendered in dom anyway. </p>
  
  <p>I wan't to do that: </p>
  
  <pre><code>  &lt;div v-if="isMobile"&gt;&lt;/div&gt;
      &lt;div v-if="isDesktop"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>and control this in beforeMount component, or if user will resize window.</p>
  
  <p>I see some plugin like [<a href="https://github.com/dotneet/nuxt-device-detect][1]" rel="nofollow noreferrer">https://github.com/dotneet/nuxt-device-detect][1]</a>
  but there is not understandable readme for me. </p>
  
  <p>anybody have some suggestions? </p>