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!
<!--cmty--><!--cmty_prevent_hook--><div align="right"><sub><em>This question is available on <a href="https://nuxtjs.cmty.io">Nuxt.js</a> community (<a href="https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c312">#c312</a>)</em></sub></div>