Conditionally rendering NuxtJS component based on viewport

user_3348410 0
Viewed 2707

I wonder how conditionally rendering NuxtJs components based on viewport width.

so;

in traditional css way we can make it like that: 

<div class="isMobile">
<!-- mobile content -->
</div>

<div class="isDesktop">
<!-- desktop content -->
</div>

in this case this solution working. 

@media only screen and (max-width: 768px) {
  .isDesktop {display:none;}
  .isMobile {display:block}
}

But with this solution isDesktop and isMobile divs rendered in dom anyway.

I wan't to do that: 

  <div v-if="isMobile"></div>
    <div v-if="isDesktop"></div>

and control this in beforeMount component, or if user will resize window.

I see some plugin like [https://github.com/dotneet/nuxt-device-detect][1] but there is not understandable readme for me.

anybody have some suggestions?

nuxt.js vue.js responsive
1 Answers

You cannot detect the view width from the server, because... well... it is the server. nuxt-device-detect uses the user agent to figure out what kind of device is requesting a page and sets some predefined variables based on that.

Using $device.isMobile and $device.isDesktop in a v-if will make sure that you only serve the DOM nodes you want to serve for mobile and desktop. It will however not respond to resizing the browser. Detection is, after all, done based on user agent and not on view width.

user_22090070
Related