nuxt generate: strange behavior in template

[ivodolenc]

Hi and thanks for your work on this module 👋

This is more like a question so I hope you have tips on how to solve this.

I found a strange behavior when using $device in template.

Test environment:

• @nuxtjs/device: 2.1.0
• create-nuxt-app: 2.15.7
• target: static (yarn generate)

Simple Example

To avoid possible errors in target: static mode, I use v-if with v-else:

<!-- index.vue -->

<template>
  <div>
    <!-- If 'isDesktop = true' - show desktop content -->
    <p v-if="$device.isDesktop">Desktop</p>
    <!-- If 'isDesktop = false' - show content but with class="hidden" -->
    <p v-else class="hidden">*</p>
  </div>
</template>

<script>
  export default {}
</script>

<style>
  .hidden {
    display: none;
  }
</style>

Current Output

This is displayed in the html output after I run yarn generate -> yarn start:

<!-- isDesktop = true -->

<div id="__layout">
  <div>
    <p>Desktop</p>
  </div>
</div>

<!-- isDesktop = false -->

<div id="__layout">
  <div>
    <!-- attribute class="hidden" is removed from the html output -->
    <p>*</p>
  </div>
</div>

Expected Output

This is example of expected html output after I run yarn generate -> yarn start:

<!-- isDesktop = true -->

<div id="__layout">
  <div>
    <p>Desktop</p>
  </div>
</div>

<!-- isDesktop = false -->

<div id="__layout">
  <div>
    <!-- attribute class="hidden" has not been removed from the html output -->
    <p class="hidden">*</p>
  </div>
</div>

Working Example

This example works as expected after I run yarn generate -> yarn start:

<!-- index.vue -->

<template>
  <div>
    <p v-if="isDesktop">Desktop</p>
    <p v-else class="hidden">*</p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        isDesktop: false
      }
    }
  }
</script>

<style>
  .hidden {
    display: none;
  }
</style>

Output

<!-- isDesktop = true -->

<div id="__layout">
  <div>
    <p>Desktop</p>
  </div>
</div>

<!-- isDesktop = false -->

<div id="__layout">
  <div>
    <!-- attribute class="hidden" has not been removed from the html output -->
    <p class="hidden">*</p>
  </div>
</div>

I hope this is not too confusing. Please let me know if you need more info.

[ivodolenc]

Update

Also, this example only works in dev, but not in prod mode. (yarn generate -> yarn start)

<template>
  <div>
    <p :class="{ 'text-blue-700': $device.isFirefox }">
      The text turns blue in Firefox.
    </p>
  </div>
</template>

<script>
  export default {}
</script>

<style>
  .text-blue-700 {
    color: #1c50b8;
  }
</style>

Maybe this have to do with the way vue/nuxt works because I experience exactly the same behaviour with the nuxt-bowser module (which is inspired by @nuxtjs/device) and ua-parser-js 😀 🤷‍♂️

Does this mean that it's currently impossible to achieve this type of device detection in target: static?

[lustremedia]

Did you set a defaultUserAgent?

device: {
    defaultUserAgent: 'Mozilla/5.0 (Linux; Android 5.1.1; Nexus 6 Build/LYZ28E) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.39 Mobile Safari/537.36'
  },

This is needed for generat to work afaik ...

[ovrdrv3]

I had this same issue, same version of @nuxtjs/device, same npm run generate. What ended up working for me was wrapping the section that I needed to use $device.isMobile with <client-only>. Here is the relevant documentation.