CODEWITHSUNDEEP
vue.jsresponsivenuxt.js
user3348410
user3348410

Reputation: 2833

Conditionally rendering NuxtJS component based on viewport

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?

Upvotes: 2

Views: 3602

Answers (1)

Sumurai8
Sumurai8

Reputation: 20745

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.

Upvotes: 2

Related Questions