Home

Issue: 366

How to handle conditional rendering that involves window?

[issue link]

Hi, I used nuxt to render a vue template that involves v-if.

// template
<header v-if="checkMobile()"></header>

// script
export default {
  methods: {
    checkMobile() {
      return window ? window.innerWidth < 768 : true
    }
}

This may cause different rendering result between server and client due to window.innerWidth.
And this raises an error:

The client-side rendered virtual DOM tree is not matching server-rendered content.

So, how should I handle conditional rendering that involves window?

Thank you!

This question is available on Nuxt.js community (#c312)