Nuxt.JS doesen't render blocks as I need

Question

I'm building nuxt.js SSR web app and I face strange issue.

<div class="container" @mouseenter="hovered = true" @mouseleave="hovered = false">
  <transition name="fade">
    <div class="class1" v-show="!hovered && isDesktop">blank_1</div>
  </transition>
  <transition name='scale'>
    <div class="class2" v-show="hovered || !isDesktop">blank_2</div>
   </transition>
</div>

<script>
export default {
  data() {
    return {
      hovered: false
    }
  },
  computed: {
    isDesktop() {
      if(process.client) {             
        window.screen.width > 1024 ? return true : return false
      }
    }
  }
}
</script>

<style>
.class1 {
  height: 100px;
  width: 100px;
  background-color: red;
}
.class2 {
  height: 100px;
  width: 100px;
  background-color: blue;
}
</style>

I'll explain this by few steps.

1. Let me explain how it should work:
   • Div with class="class1" should be displayed by default on Desktop and dissapear when you hover container. On mobile it should be hidden everytime.
   • Div with class="class2" should be hidden on Desktop and appear when you hover container. On mobile it should be displayed everytime.
2. Let me explain how it works now:
   1. Desktop:
      • Div with class="class1" not displayed untill I hover container once, then works as it should
      • Div with class="class2" works as it should.
   2. Mobile:
      • Div with class="class1" works as it should.
      • Div with class="class2" works as it should.
3. How did I fix it:
   • After few hours of trying I just realised that I can rewrite v-show on first div to v-show="!hovered" and set media query on mobile screen display:none; . So I fixed the only Desktop issue that I have.

But why does it works this way when I have v-show="!hovered && isDesktop" ? I guessed that first load on Nuxt.JS goes on server, so isDesktop is returned as undefined so v-show="!hovered && isDesktop" turns into v-show="!false && undefined" . But then why second div's v-show directive: v-show="hovered || !isDesktop" works fine if it should turn into v-show="false || !undefined" but I still got this div hidden on Desktop and displayed on Mobile .

PS This is my first StackOverflow question, sorry if I styled code badly, I dont get how it works. Thank you for answers.

Answer 1

The weird behavior probably comes from this line

window.screen.width > 1024 ? return true : return false

when it should be

return window.screen.width > 1024 ? true : false

The syntax is incorrect. Nuxt won't even compile it when i tried. I wonder why your Nuxt server can work with this.